What would be an example of a CSP script-src-elem directive allowing a script to be loaded but a script-src-attr directive preventing a function in that script from being executed? If you don't want the js handlers to be executed, why not just prevent the js from being loaded in the first place? I could understand the usefulness of script-src-attr if it operated at the function level, but that is not the case, is it?
Content-Security-Policy: script-src-attr 'none'; script-src-elem 'unsafe-inline';
will allow inline scripts like
<script> alert('I am inline') </script> but disallow event handlers in tags like
It's much safer than
script-src 'unsafe-inline'; because about 90% XSS are based on badly sanitized user input lead to skip event handlers in tags, for example
<img src=/ onerror="alert(String.fromCharCode(88,83,83))"></img>.
Content-Security-Policy: script-src-attr 'unsafe-inline'; script-src-elem 'nonce-ebf34fd3';
will disallow inline scripts
<script> ... </script> without
This is suitable to craft more safe CSP for old sites with a lot of built-in event handlers.
Please note that as for now only Chrome supports
script-src-elem directives. Chromium-based Edge should support these, too.