Content Security Policy Level 3 'strict-dynamic'

…makes CSP deployments easier. This demo page will show you why and how.

The server has sent this header to your browser

Content-Security-Policy:
script-src 'strict-dynamic' 'nonce-u6rB+jrp2phChUWVgcDK6w==' 'unsafe-inline' http: https:; object-src 'none'; base-uri 'none'

The script-src values

'strict-dynamic'
Allows script which executes on a page to load more scripts via non-"HTML-parser-inserted" script elements using document.createElement('script'); or similar (CSP3 and above)
'nonce-u6rB+jrp2phChUWVgcDK6w=='
Scripts with nonce="u6rB+jrp2phChUWVgcDK6w==" can be fetched and executed (CSP2 and above)
'unsafe-inline'
unsafe-inline is ignored if a nonce or a hash is present (CSP2 and above)
Because of strict-dynamic this entry is ignored (CSP3 and above)
http:
Because of strict-dynamic this entry is ignored (CSP3 and above)
https:
Because of strict-dynamic this entry is ignored (CSP3 and above)

The object-src values

'none'
Don't allow embedding Flash content, potentially with XSS vulnerabilities

The base-uri values

'none'
Prevents injection of base tags, which can be used to set the base URL for relative script URLs to an evil domain

Demo

Click to change color

In a browser with CSP Level 3 support (Chrome 52+, Firefox 52+, Safari 15.4+)

  1. The color.js script was loaded using <script nonce="u6rB+jrp2phChUWVgcDK6w==" src="color.js">
  2. color.js is allowed to load jQuery from https://code.jquery.com/jquery-3.7.1.min.js using document.createElement('script'); because of strict-dynamic
  3. jQuery "click" handler is attached

In a browser with CSP Level 2 support

  1. The color.js script was loaded using <script nonce="u6rB+jrp2phChUWVgcDK6w==" src="color.js">
  2. color.js is allowed to load jQuery from https://code.jquery.com/jquery-3.7.1.min.js because of https:
  3. jQuery "click" handler is attached

In a browser with CSP Level 1 support

  1. The color.js script was loaded using <script src="color.js"> because of https:, nonce was ignored
  2. color.js is allowed to load jQuery from https://code.jquery.com/jquery-3.7.1.min.js because of https:
  3. jQuery "click" handler is attached

Disable backward compatibility

Parser-inserted?

'strict-dynamic' doesn't allow executed script to load more scripts via "HTML-parser-inserted" script elements (regular <script> tags). That means that the following script or similar will not work. (Try it anyway)

<script nonce="u6rB+jrp2phChUWVgcDK6w==">
document.write('<script src="https://code.jquery.com/jquery-3.7.1.min.js" async defer><\/script>');
</script>

Nonce format

Nonce needs to be a Base64-value, otherwise browsers will ignore it. Try non-Base64-value and check console.

Check also general host-based CSP demo page and reporting demo app.

↩ Home · Created by Michal Špaček michalspacek.com, michalspacek.cz, @spazef0rze, Mastodon, source