When you have a
Content-Security-Policy header defined, the browser will automatically block inline scripts (unless you implement one of the workarounds specified below), such as:
<script> doSomething(); </script>
<div onclick="doSomething();">Click Me</div>
You might see something like this as a result:
content security policy: the page’s settings blocked the loading of a resource at inline (“script-src”).
Or you might see this:
content security policy: the page’s settings blocked the loading of a resource at inline (“default-src”).
script-src js-cdn.example.com 'nonce-r@nd0m';
Assuming our nonce value is
r@nd0m (you need to randomly generate a new nonce for every HTTP request), we can now use an inline script tag like this:
<script nonce="r@nd0m"> doSomething(); </script>
script-src js-cdn.example.com 'sha256-xzi4zkCjuC8lZcD2UmnqDG0vurmq12W/XKM5Vd0+MlQ='
Tip: your browser developer tools console might compute the hash for you and output it in the console when inline scripts are blocked by CSP.
unsafe-inline source list value can be used to allow inline scripts, but this also defeats much of the purpose of CSP.
CSP Level 3 (newest browsers) support a source list value: