Testing Pulse third-party tags for CORS issues

In cases where you see that a third-party ad is displaying correctly in a desktop environment using a Flash integration, but is failing on mobile (in HTML5/Native), it is most likely because of a CORS header/cross domain issue. In those cases you need to check if there are any CORS problems by testing the ad and by tracing the request/response directly from a mobile device.

To do this in Charles:
  1. Enable HTTP Proxy (Settings - Proxy settings - Proxies) and set to port 8888.
  2. Fetch your computer's IP address (launch Spotlight in you Mac and search for Network Utility).
  3. Go to your Wifi settings in your mobile, enable HTTP proxy, and enter your computer's IP number as server and 8888 as port.
  4. Launch a web browser on the mobile and go to the link where the campaign is running and play the video. Charles should be prompting and asking you to allow traffic from your device.
  5. Filter for "dist" in Charles and you should see the Pulse distribution request from the player.
Follow the steps below to troubleshoot:
  1. Open up the response in Charles and locate the creative. Find the vastadTagURI and copy only the domain (example.com) from the complete link.
  2. Filter for example.com.
  3. Check the Response Headers. If it has Access-Control-Allow-Origin *, this is most likely why it fails, as security settings in modern browsers require more specific headers. To confirm that this is the issue, continue with the steps listed below.
  4. Go to Charles - Tools - Rewrite and click on "Enable Rewrite".
  5. Click "Add" and write a name for the Rewrite, for example "CORS headers".
  6. Under "Location", click "Add" and then:
    • Protocol: http or https
    • Port: (Keep empty)
    • Path: (Enter part of the path you see in Charles and you can use * as a wildcard.)
  7. Add rules.
    1. First create a Modify rule:
      • Under Rules click ”Add” - Type: Modify Header, Where: Response
      • Match - Name: Access-Control-Allow-Origin Value: (Keep empty)
      • Replace - Name: (Keep empty) Value: (Enter the URL to the page where you are testing the ad)
      • Select "Replace all"
    2. Add an Append rule:
      • Under Rules click ”Add” - Type: Add Header, Where: Response
      • Match - Name: (Keep empty) Value: (Keep empty)
      • Replace - Name: Access-Control-Allow-Credentials Value: true
      • Select "Replace all"
  8. Make sure that "Rewrite" is enabled, then reload the page in your browser and play the video again. If you filter for example.com and look at the Headers, you should see:

    Access-Control-Allow-Origin: http://mydomain.com (The URL to where you are testing)

    Access-Control-Allow-Credentials: true

You should now see the third-party tag running the ad on mobile.