Current Content Security Policy:
content-security-policy: default-src 'self' 'unsafe-inline' fonts.googleapis.com fonts.gstatic.com static.addtoany.com picsum.photos fastly.picsum.photos; child-src 'self' www.youtube.com w.soundcloud.com static.addtoany.com;
Share Buttons (Add-to-Any)
Share buttons using AddToAny. These are loaded by JavaScript, and break unless the script's domain is allowed.
They work under every policy here except Enforced, which allow-lists no external hosts at all. The hash policy covers AddToAny's inline scripts with four SHA-256 hashes, which have to be regenerated whenever the vendor changes that code — the maintenance burden that pushes people toward nonces. The nonce policy instead puts a nonce on the loader tag.
AddToAny publishes its own CSP guidance at demo.addtoany.com/csp.
Fonts
This text should be using the "Audiowide" font from google fonts. Fonts downloaded from external sources need to be added to your CSP in the "font-src" group. You should probably be serving fonts locally anyway.
Inline Javascript
In the next few examples, we insert code via via document.write();
In the red box, you should see the text:
"This is text inserted by javascript. It should be blocked by any CSP unless it is using a hash, or the "unsafe-inline" option"
This won't include either a nonce or a hash, so will not display the text if CSP is enforced.
Inline Javascript with a nonce
This javascript will only be included if the CSP uses unsafe-inline,
the hash, or the nonce set in the tag's attributes. Here we willuse the nonce if that is what you are viewing.
Inline Javascript with a hash
This js will be excluded unless the CSP allows unsafe-inline
or explicitly includes the hash 'sha256-4J8+swjpXzJqezCClmAbHMHlahnf2WGWxdFHouce0EE='.
Since we do not define a nonce in the tag, the js will not run, even if it were included.
Analytics and Google Tag Manager
Google recommends a per-response nonce for the GTM loader. Each tag can then require additional script, image, frame, and connection destinations.
The released Drupal Google Tag module does not yet add all of those CSP requirements automatically. Until it does, manually add every destination used by your GTM container to the appropriate directive.
Google's current CSP guidance · Drupal issue #3203811: test the nonce patch
Any js-based tools
- ReCaptcha
- Maps
Images
This is a plain image using an img tag.
External Images
This plain img element is loaded from an external domain ("picsum.photos"). Under an enforced CSP it is blocked unless that domain is in img-src (or default-src).
Images set as div backgrounds
An image set as the background-image of a div via an inline
style attribute. A plain hash or nonce does not
cover style attributes — so under an enforced CSP this is blocked
unless you allow 'unsafe-inline', or pair a matching hash with
'unsafe-hashes' (CSP Level 3). A nonce cannot apply to an
attribute. Blocking by default is the correct, spec'd behavior.
The robust fix is to move the rule into a stylesheet or a nonce'd
<style> element instead of an inline attribute.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae nibh nec sapien consectetur varius. Etiam molestie felis et turpis commodo, in accumsan ante pharetra. Sed feugiat faucibus elementum. Vestibulum fringilla ullamcorper enim at volutpat. In blandit elementum nunc eget tempor.
This image was inserted by a style element embedded in the HTML document. It will require a hash or a nonce to display the image. We will use the nonce.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae nibh nec sapien consectetur varius. Etiam molestie felis et turpis commodo, in accumsan ante pharetra. Sed feugiat faucibus elementum. Vestibulum fringilla ullamcorper enim at volutpat. In blandit elementum nunc eget tempor.
This image was inserted by an external style sheet.
Note, if you are using an unaliased CDN, e.g. abcdefg.cloudfront.net, you would need to add this to your CSP.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae nibh nec sapien consectetur varius. Etiam molestie felis et turpis commodo, in accumsan ante pharetra. Sed feugiat faucibus elementum. Vestibulum fringilla ullamcorper enim at volutpat. In blandit elementum nunc eget tempor.
Embedded Media
The fallback trap
Both of these policies list www.youtube.com and
w.soundcloud.com in child-src. The only
difference is that the trap version also defines
frame-src 'self', which omits them.
Because frame-src is present, the browser never consults
child-src for frames. Those two entries are dead and the
embeds below are blocked — and nothing in the console tells you
that the child-src entries stopped applying.
Compare: child-src only (embeds load) vs. child-src + frame-src (embeds blocked).
YouTube uses an iframe.
Soundcloud also uses an iFrame to embed audio. But it also relies on
inline, attribute styles. e.g. style="", which do not work
in Chrome without the unsafe-inline option.