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?
1 Answer
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 onclick="alert('I am onclick')" and javascript-navigation <a href="window.open('...')".
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>.
Otherwise:
Content-Security-Policy: script-src-attr 'unsafe-inline'; script-src-elem 'nonce-ebf34fd3';
will disallow inline scripts <script> ... </script> without nonce='ebf34fd3' attribute, but will allow inline event handlers and javascript-navigations.
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-attr / script-src-elem directives. Chromium-based Edge should support these, too.
