Issue with "CSP: style-src": `cssText` does not violate CSP

Pamplemousse commented 2 years ago

MDN URL: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src

What information was incorrect, unhelpful, or incomplete?

Documentation says that document.querySelector('div').style.cssText = 'display:none;'; should be blocked by the CSP policy.

Specific section or headline?

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src#examples

What did you expect to see?

I expected that this example indeed triggered a CSP violation.

Did you test this? If so, how?

I created an HTML page

<html>
  <body></body>
  <script>
    document.querySelector('body').style.cssText = 'background-color: red;';
  </script>
</html>

that I served using http-server, then I use the extension ModHeader to update the Content-Security-Policy response header to have the value style-src https://example.com.

MDN Content page report details

* Folder: `en-us/web/http/headers/content-security-policy/style-src` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/http/headers/content-security-policy/style-src/index.md * Last commit: https://github.com/mdn/content/commit/46234997b6257b619423a11ce31154afa336143f * Document last modified: 2021-08-13T16:17:49.000Z

sideshowbarker commented 2 years ago

Nice catch.

As far I can see, the MDN article matches the requirements defined in the CSP spec at https://w3c.github.io/webappsec-csp/#directive-style-src, which even explicitly mentions:

This would include, for example, all invocations of CSSOM’s various cssText setters and insertRule methods

…but no browsers conform to that requirement.

In other words, any time a CSP policy would cause a browser to block element.setAttribute('style', 'display:none;'), then per-spec the browser should also be blockingelement.style.cssText = 'display:none'.

So I think the fix we need here for the MDN article is to update it to state that per-spec, document.querySelector('div').style.cssText = 'display:none;' should be blocked, but that current browsers don’t actually block it.

andy-blum commented 1 year ago

I just ran across this issue myself, and created this codepen to demo

https://codepen.io/andy-blum/pen/ExRRRBj

mdn / content