What are the risks associated with using inline styles?

Question

A Content Security Policy with the default-src or style-src directive will prevent inline styles from applying to elements or to the <style> attributes. To enable inline styles, the unsafe-inline parameter value must be applied to the CSP fetch directive. This seems to indicate that inline styles are unsafe.

While inline Javascript is an obvious attack vector for XSS attacks (CSP is almost useless with script-src 'unsafe-inline' ), Google Web Essentials considers inline -styles as an equivalent threat , providing one example of a clever method of extracting data from a 2009 blog post of the year.

On the other hand, another article on Website Basics suggests that style styles can help optimize the critical rendering path, as the first paint will not block when the browser retrieves external resources. There seems to be a very real trade-off between security and performance:

In general, how risky are inline styles?

Answer 1

In terms of possible use-use, then yes, inline styles are just as dangerous as inline JavaScript. However, the use of such vulnerabilities is much less common.

There are several ways in which CSS can be used maliciously, with image injection being the most common method. There are (at least) two possible ways to do this:

 div { background-image: url("evil.png"); } img { content:url("evil.png"). } 

Giving the user the ability to force the image to be displayed is incredibly dangerous, since you can use PHP to replace the contents of the image - you can separate all kinds of information from those who are viewing the PHP image, for example, their cookies, their browser and even their operating system. Worse, the image will be displayed correctly, so the person viewing the image will not even notice anything suspicious.

Consider other situations where the user can upload an image, for example, install a profile image on a forum (this will eventually become <img> ). The key is how the user can save the image so that another user can render it. To download image images, server verification usually prohibits users from downloading files that are not images or are malicious images. It is almost impossible to verify images that are inserted inline as background-image or content URLs.

In addition to this, we can even take another step by specifying the URL itself to run JavaScript:

 url('javascript: eval(evil)'); 

As you can imagine, this allows an attacker to do almost everything they need.

There are also rarer XSS methods that even allow things like executing JavaScript directly with the behavior tag and HTC:

 body { behavior: url(evilscript.htc); } 

It is also worth noting that using a policy of the same origin in itself therefore not safe .

So, while inline styles improve speed a bit, as you say, there is a trade-off between security and speed. Avoid inline styles where possible;)

Hope this helps!