Why can I set styles in JS without violating Content Security Policy's style-src 'self'?

Question

Setting style-src to 'self' disables the use of inline styles via the style tag or the style attribute. This works as intended. Adding a style element via JS is also blocked.

But I was really surprised that I can still set properties of an HTMLElement's style object. For example this doesn't trigger a CSP violation:

document.getElementById('test').style.backgroundImage = 'url("image.png")';

How does this then prevent attacks such as those described here or here?

Answer 1

Presumably because if you're already allowing script injection, style modification is the least of your worries.

The style elements and attributes are blocked to protect against malicious messing around that can be done without JS. If someone is modifying the DOM itself (not just presentation), that's far more serious anyway.

The second link you give is not relevant to this; the demo is no longer is up, but apparently what it was doing was linking to a referring page as if it was a stylesheet, and using the fact that some valid css had been planted in the referring page in two spots to treat the intervening text as an image URL. CSP isn't relevant there because the attack is from the other direction; The attacking link page would deliberately be set to allow loading of external stylesheets. (I don't think CSP header can be set on the HTTP response for a css file itself -- or other file being treated as CSS -- to disallow outside linking to it, although I could be wrong.)