Current Content Security Policy:
content-security-policy: default-src 'self';
Share Buttons (Add-to-Any)
Share buttons using AddToAny. These are loaded by javascript, and will break unless the javascript domain is allowed. They might degrade if not handled properly.
In the hash example, this just completely breaks. They recommend using a nonce https://demo.addtoany.com/csp (I can't get this to work with a nonce).
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
Since analytics are generally included via inline scripts. They need a nonce or hash to allow them to meet the CSP.
Google tag manager Documentation. the Drupal Google Tag Manager module gets aruond this be including the script in an external file. e.g.
<script src="/sites/default/files/google_tag/primary/google_tag.script.js?qgt931" defer></script>
Any js-based tools
- ReCaptcha
- Maps
Images
This is a plain image using an img tag.
External Images
This plain img elemeny was loaded from an external domain "pbs.twimg.com".
Images set as div backgrounds
An image that is set as a backgound-image of a div by a style attribute. Hashes behave differently between Chrome and Firefox. This image will be blocked in Chrome unless it is allowed by including the "unsafe-inline" option. It will display in Firefox when using the hash in the CSP. A nonce cannot be used here. Blocking is actually the correct behavior according to the spec.
Oddly, Chrome will still suggest an sha256 hash, even if it is already in use.
This is what we do currently in Gesso.
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
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.