Why discourage the use of event handler content attributes?

[code86]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

What specific section or headline is this issue about?

Event handler attributes

What information was incorrect, unhelpful, or incomplete?

This webpage warns: "The use of event handler content attributes is discouraged. The mix of HTML and JavaScript often produces unmaintainable code, and the execution of event handler attributes may also be blocked by content security policies."

What did you expect to see?

The above suggests that using addEventListener is preferred to using "event handler attributes".

It would be helpful to provide supporting links / references / examples on how "event handler attributes", but not addEventListener method, would be blocked by content security policies.

Providing a sense of how widespread this problem is would help too.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/html/attributes
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/html/attributes/index.md
• Last commit: mdn/content@84ac987
• Document last modified: 2022-12-19T10:09:47.000Z

[bsmth]

Thanks for opening this one @code86, I've transferred it to a discussion to get some more feedback and opinions on this.

[wbamberg]

It would be helpful to provide supporting links / references / examples on how "event handler attributes", but not addEventListener method, would be blocked by content security policies.

I believe that "event handler attributes" are treated by CSPs as inline scripts:

§ 4.2.3 Should element’s inline type behavior be blocked by Content Security Policy? is called during handling of inline event handlers (like onclick) and inline style attributes in order to determine whether or not they ought to be allowed to execute/render.

(https://w3c.github.io/webappsec-csp/#html-integration)

...so they are blocked by default.

https://w3c.github.io/webappsec-csp/#unsafe-hashes-usage has some more information:

Legacy websites and websites with legacy dependencies might find it difficult to entirely externalize event handlers. These sites could enable such handlers by allowing 'unsafe-inline', but that’s a big hammer with a lot of associated risk (and cannot be used in conjunction with nonces or hashes).

The "'unsafe-hashes'" source expression aims to make CSP deployment simpler and safer in these situations by allowing developers to enable specific handlers via hashes.

...

The capabilities 'unsafe-hashes' provides is useful for legacy sites, but should be avoided for modern sites.

I wonder if we should move this back to being an issue? I do think the page could be more precise than "may also be blocked by content security policies".