Google Adwords CSP (content security policy) img-src

by

Unfortunately, there aren’t many ways around this. Resources require either whitelisting (in the case of remote resources, like this one) or inlining tricks (i.e. nonce or sha256-...) when CSP is active. At the end of the day, though, CSP can probably still make your site safer and protect most resources.

Depending on what you are trying to do, though, you may still be able to achieve your goal.

Here are some options:

  1. Whitelist all images.

    Of course, you could simply place a "*" in your img-src directive, but I imagine you already know that and are choosing not to because it defeats CSP’s protection for images.

  2. Load the image via alternate means.

    If all you are after is specifically locking down images, and, say, don’t care so much about XMLHttpRequest, you could load the pixel via POST or even via a <script> tag with a custom type (using the AdWords image tag tracking method). This takes advantage of the fact that Google only needs the browser to complete the HTTP request/response (and redirect) cycle for analytics purposes, and you don’t really care about parsing or executing the resulting content, which is a 1×1 transparent pixel anyways. This allows you to lock down your img-src directive (if that is indeed your goal) while still allowing whatever domain Google would like to use for redirects.

    I know this only moves your problem, but it’s useful if your main threat is malicious images.

  3. Place all Google domains in your img-src.

    As suggested below. Header lengths will be a problem (even if the specs say you’re fine, implementors are not always so generous), and more importantly, you may encounter spurious failures as Google changes their list of domains, which is certainly not a public or easily noticeable action (besides your ad conversions not coming through!). Since I imagine your job isn’t to update that list constantly, you probably don’t want to go with this option.

  4. Report failures for a few months and then roll with it.

    Because CSP supports reporting URIs and the Content-Security-Policy-Report-Only variant, you can roll it out in report-only mode and wait for reports to come in. If you already have good data about your userbase (and it doesn’t change much), this can be a good option – once you see those reports stabilize on a list of domains, seal it in a regular CSP header. Optionally, you can place a reporting URI on the final header to catch any additional failures. The downside of this strategy, of course, is that you don’t get protection while in report-only mode, and when you switch to enforcing it, failures cause lost conversion data and you’re playing catch up.

  5. Static pixel with reverse proxy

    Okay. Well, with the above options not being so great (I admit it), it’s time to think outside the box. The problem here is that HTTP optimization techniques applied by Google (sharding/geo-pinning domains) are at odds with good security practice (i.e. CSP). The root cause of the domain ambiguity is the client’s geographic location, so why not pin it yourself?

Assuming you have advanced control of your own HTTP server, you could use the static pixel approach for tracking and proxy the request yourself, like so:

User ---> GET http://your-page/

User <--- <html>...
          pixel: http://your-page/pixel?some=params

User ---> http://your-page/pixel?some=params
          ---> fetch http://googleads.g.doubleclick.net/pagead/viewthroughconversion/12345/?some=params
          <--- redirect to http://google.com, or http://google.co.uk
User <--- return redirect

Using a static pixel (like approach #2) and putting your proxy, say, in the US or UK should ensure that the source IP is geographically pinned there, and Google’s anycast frontend should route you to a stable endpoint. Placing a proxy in between the user and Google also gives you a chance to force-rewrite the redirect if you want to.

To simplify proxy setup (and add some performance spice), you could opt for something like Fastly with Origin Shielding instead of building it yourself. If you add the DoubleClick backend and proxy from there, you can pin the originating requests from the CDN to come only from a certain geographic region. Either way, your user should see a stable set of redirects, and you can trim down that list of Google domains to just img-src 'self' *.google.com *.doubleclick.net *.googleadservices.net.

Edit: It is also worth noting that Fastly (and a growing list of other CDN providers) peer directly with Google Cloud at a few of their Points-of-Presence, offering an optimized path into Google’s networks for your proxied traffic.

More Related Contents:

  1. “Cross origin requests are only supported for HTTP.” error when loading a local file
  2. Detect when a browser receives a file download
  3. Accessing the web page’s HTTP Headers in JavaScript
  4. Response to preflight request doesn’t pass access control check
  5. Error: request entity too large
  6. Using http rest apis with angular 2
  7. Refused to load the script because it violates the following Content Security Policy directive
  8. Calling a JSON API with Node.js
  9. Method for streaming data from browser to server via HTTP
  10. How to make a jsonp POST request that specifies contentType with jQuery?
  11. How to do the chain sequence in rxjs
  12. How to prevent an HTTP request just for a favicon?
  13. Pure JavaScript code for HTTP Basic Authentication?
  14. How can I use JavaScript on the client side to detect if the page was encrypted?
  15. How to override content security policy while including script in browser JS console?
  16. Angular 2 – Chaining http requests
  17. Restrictions of XMLHttpRequest’s getResponseHeader()?
  18. Add CORS header to an http request using Ajax
  19. Axios – DELETE Request With Request Body and Headers?
  20. Cordova – refuse to execute inline event handler because it violates the following content Security policy
  21. Calling Express Route internally from inside NodeJS
  22. How to download a csv file using PhantomJS
  23. Sending an HTTP Post using Javascript triggered event
  24. Get HTTP Body of Form in JavaScript
  25. How to track a Google Adwords conversion onclick?
  26. AngularJS : factory $http service
  27. Accessing partial response using AJAX or WebSockets?
  28. In Node.js / Express, how do I “download” a page and gets its HTML?
  29. Checking if a URL is broken in Javascript
  30. Can I use the HTTP range header to load partial files “on purpose”?

Leave a Comment