An inline script rendered with nonce={this.nonce}, like the layout's scripts.
Didn't run
Content Security Policy with nonces
JSX escapes all values, but a single html() with untrusted content, a library bug or a compromised script can still bring foreign code into a page. A Content Security Policy is the second line of defense: the browser only runs the scripts the server allowed.
A guard creates a random nonce for every request, puts it into this and sends a policy which only allows scripts carrying this nonce. The layout adds nonce={this.nonce} to its script tags. Injected markup can't know the nonce, as it changes with every reload, so the browser refuses to run it.
The policy of this page
No policy is sent, so the browser runs every script on this page.
Try it
The same inline script, but without the nonce, like an injected one.
Blocked
Simulates a bug: untrusted markup with an onerror handler, inserted via html().
Blocked
Blocked by the browser
The browser reports every violation as a securitypolicyviolation event (and in the console). With a report-to directive, it can also send them to your server.
Nothing is blocked without a policy.