Learning the basics of how to create a CSS (cascading style sheet) file in order to separate style from content in your websites is great. By creating just a few files, you can define the look and layout of a site and change it with ease once you’re bored. Indeed, this ability to disconnect the coding for a site’s aesthetics from the HTML base means it’s a lot easier to change page elements on the fly. However, with this ability to separate and store code in external .CSS files comes security risks. Although there are potential holes in various aspects of a website or web application, CSS injections have become a common problem for unprotected sites. Indeed, if you check the OWASP top ten threats for 2017, injections top the list above sensitive data exposure.
Also in the top ten is cross-site scripting, which is another consequence of not protecting your site against CSS injections. These attacks are often aimed at vulnerable application programming interface (API). In simple terms, an API is a software intermediary that allows applications to communicate. Problems occur when developers don’t follow API security protocols like filtering traffic based on authentication and authorization. For most website developers/owners, the simple solution to cross-site scripting attacks is a web application firewall (WAF). These programs will monitor and filter data moving between applications in an attack to block any malicious software.
However, as useful as WAFs are at preventing cross-site scripting from infecting HTML and JavaScript coding, CSS vulnerabilities can leave the door open to these sorts of attack. As Mike Gualtieri has previously demonstrated, it’s possible to exfiltrate data from a user’s browser using CSS injections. Although fairly complex, Gualtieri has been able to use attribute selectors (a CSS feature that allows you to define the style of HTML elements with certain attributes) to inject outgoing requests into the code and extract information. While Gualtieri’s way of stealing data may be one that only experienced hackers can carry out successfully, the threat is there.
What this tells us as aspiring CSS coders is that security is always an issue. Regardless of how complex or simple you want to make your website, there is no margin for error when it comes to sloppy code. The best way to prevent CSS injections is to go through your code with a fine-tooth comb and look for any omissions or errors. Beyond that, using a vulnerability scanner will pick up on any anything you might have missed. Additionally, context-dependent sanitization, whereby you use different coding for different situations, should become standard practice.
Finally, implementing a proper content security policy (CSP) will help mop up any weaknesses you might have missed. Basically, by restricting where images and stylesheets are allowed to be loaded from (i.e. the user’s browser will only load stylesheets from your domain/trusted third-parties), you can block a lot of CSS injection attacks. Naturally, as is often the case, security isn’t a case of one and done. As things evolve and criminals find new ways around things, you have to stay active and ensure you’re always up to date with the latest security trends.
CSS Injections: How Poor Coding Can Lead to Data Extraction Attacks
