Testing Pulse 3rd-Party Tags for CORS /Cross Domain Issues

0 Kudos
Started ‎03-27-2017 by
Modified ‎03-27-2017 by

Testing Pulse 3rd-Party Tags for CORS /Cross Domain Issues

by Community Manager ‎03-27-2017 11:16 AM - edited ‎03-27-2017 11:23 AM (345 Views)

In cases where you see that a 3rd-party ad is displaying correctly in a Desktop environment using a Flash integration, but is failing on Mobile (In HTML5/Native), it could most likely be because of a CORS header/Cross domain issue.

In those cases you need to test if there in any CORS problems by testing the ad and by tracing the request/response directly from a Mobile device.

To do this in Charles you first need to enable HTTP Proxy (Proxy -> Proxy settings -> Proxies and set to port 8888).

Next you need to fetch your computers IP-address (launch Spotlight in you Mac and search for Network Utility).
Go to your Wifi settings in your mobile end enable HTTP proxy and enter your computers IP-number as "server" and 8888 as ”port”.

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).

If you now filter for ”dist” in Charles 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, because security settings in modern browsers require more specific headers.

To confirm that this is the issue you would need to continue with these steps:

4. Go to Charles - Tools -> Rewrite. 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. Now you need to add rules.

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".

8. Now you 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”

9. 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

If our assumptions where correct you should now see the 3rd-party tag running the ad on mobile.