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 1

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>.


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.

  • Firefox also supports script-src-attr by now.
    – Blackbam
    Commented Mar 2, 2023 at 15:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .