Securing Cascading Style Sheets (CSS) Cheat Sheet
Last revision (mm/dd/yy): 11/25/2018
The goal of this “CSS (Not XSS, but Cascading Style Sheet) Cheat Sheet is to inform Programmers, Testers, Security Analysts, Front-End Developers and anyone who is interested in Web Application Security to use these recommendations or requirements in order to achieve better security when authoring “Cascading Style Sheets.”
Let's demonstrate this risk with an example:
Santhosh is a programmer who works for a company called “X” and authors a Cascading Style Sheet to implement styling of the web application. The application for which he is writing CSS Code has various roles like “Student”, “Teacher”, “Super User” & “Administrator” and these roles have different permissions (PBAC - Permission Based Access Control) and Roles (RBAC - Role Based Access Control). Not only do these roles have different access controls, but these roles could also have different styling for webpages that might be specific to an individual or group of roles.
Santhosh thinks that it would a great optimized idea to create a “global styling” css file which has all the CSS styling/selectors for all of the roles. According to their role, a specific feature or user interface element will be rendered. For instance, Administrator will have different features compared to “Student” or “Teacher” or “SuperUser”. However, some permissions or features maybe common to some roles.
Example: Profile Settings will be applicable to all the users here while “Adding Users” or “Deleting Users” is only applicable for “Administrator”.
Now, let’s examine what are the risks associated with this style of coding.
Motivated Attackers always take a look at
For instance: Jim is a motivated attacker and always tries to look into CSS files from the View-Source even before other attacks. When Jim looks into the CSS file, he sees that there are different features and different roles based on the CSS selectors like
In a nutshell, having global styling could reveal sensitive information that could be beneficial to the attacker.
Let’s say, Santhosh has this habit of writing the descriptive selector names like
Defensive Mechanisms to Mitigate Attacker’s Motivation
As a CSS Coder / Programmer, always keep the CSS isolated by access control level. By this, it means Student will have a different CSS file called as
If an authenticated user with the Student Role tries to access
Defense Mechanism #2
Being a programmer or a tester, take care of the naming conventions of your CSS (Cascading Style Sheet) Selectors. Obfuscate the selector names in such a fashion that attackers are not informed what a specific selector is linking to.
Example: CSS Selectors for
This NPM package can be used to perform the renaming of the CSS selector.
Defense Mechanism #3
Web applications that allow users to author content via HTML input could be vulnerable to malicious use of CSS. Uploaded HTML could use styles that are allowed by the web application but could be used for purposes other than intended which could lead to security risks.
Example: You can read about how LinkedIn had a vulnerability which allowed malicious use of CSS that lead to the authoring of a page where the entire page was clickable including overwriting LinkedIn's standard navigation elements.
Authors and Primary Editors
Santhosh Tuppad - https://www.linkedin.com/in/santhosh-tuppad-338b7412/