属性内内联 JS 的 CSP 哈希或随机数

Question

New to Content Security Policy stuff so not sure if this is possible or not, but wondering how to add a hash or nonce for some inline script within a HTML element's attribute.

For example:

<form method="post" onsubmit="function();">

Gives me the following CSP error in Google Chrome:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'. Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

I've tried hashing just the script eg function(); as well as onsubmit="function" and neither work. I tried adding a nonce to the form element but that didn't help.

If needed I can move the event binding outside of the element attribute, just curious if there is a way to adhere to a CSP with the above.

Answer 1

Go to your endpoint where your content is being blocked. Check out the console on your browser. Your browser will notify the content which is being blocked, and it will also give you the hash you have to use to unblock that content via CSP.

Source: https://www.troyhunt.com/locking-down-your-website-scripts-with-csp-hashes-nonces-and-report-uri/