Why can I set styles in JS without violating the style of the content security policy - src 'self'?

Question

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

But I was really surprised that I can still set the properties of the HTMLElement style object. For example, this does not cause a CSP violation:

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

How does this prevent attacks like those described here or here ?

Answer 1

Presumably because if you already allow script injection, style modification is the least of your problems.

Style elements and attributes are blocked to protect against malicious involvement, which can be done without JS. If someone modifies the HOUSE itself (and not just the presentation), this is much more serious.

The second link you give is not related to this; the demo is no longer working, but apparently, what he was doing was a link to the link page, as if it were a stylesheet, and the fact that some valid css was installed on the link page in two places intermediate text as image URL. CSP is not related there, because the attack is from a different direction; The link striker will intentionally be configured to load external stylesheets. (I don’t think that the CSP header can be set in the HTTP response for the css file itself - or another file that is processed as CSS - to prevent external binding to it, although I could be wrong.)