Security Post-it #4 – XSS yes, but with <style> !
In this short security post-it, I explain how exploit XSS with the inline style.
May 11, 2021 by Nicolas Béguier
XSS 101
Why XSS are important ? Because they facilitate phishing and it makes the victim want to click on the link. The rest is a code reflection (stored or not) that allows executing an arbitrary code.
This "code" in question is generally a smudge of the HTML which makes it possible to execute Javascript code. It sometimes happens that the injection point is directly in a <script> tag but this is rare.
A typical example is:
This "code" in question is generally a smudge of the HTML which makes it possible to execute Javascript code. It sometimes happens that the injection point is directly in a <script> tag but this is rare.
A typical example is:
https://beguier.eu/?q=1'><script>alert("XSS")</script><'
XSS with CSS
I am going to present to you here a type of code injection which is underestimated but which allows to do similar damage to a classic XSS. Here is the magic <style> that allows your element
to span the entire page and be transparent:
position: fixed; z-index: 100000; opacity: 0; top: 0; left: 0; width: 10000px; height: 10000px;
Thus, the victim can only click on it. Here is a variant with a slightly transparent red background to see the attack surface.
position: fixed; z-index: 100000; opacity: 0.5; top: 0; left: 0; width: 10000px; height: 10000px; background-color: red;
Then it all depends on the type of tag. At best, it's an <a> tag (very common) so it's possible to set an href to redirect the victim to an arbitrary website.
For example, a copy of the current website with fake login page, to steal credentials. Here is the entire PoC with the <a> tag:
position: fixed; z-index: 100000; opacity: 0; top: 0; left: 0; width: 10000px; height: 10000px;
Thus, the victim can only click on it. Here is a variant with a slightly transparent red background to see the attack surface.
position: fixed; z-index: 100000; opacity: 0.5; top: 0; left: 0; width: 10000px; height: 10000px; background-color: red;
Then it all depends on the type of tag. At best, it's an <a> tag (very common) so it's possible to set an href to redirect the victim to an arbitrary website.
For example, a copy of the current website with fake login page, to steal credentials. Here is the entire PoC with the <a> tag:
<a href="https://beguier.eu/nicolas/phishing.html"
style="position:fixed;z-index:100000;opacity:0.5;top:0;left:0;width:10000px;height:10000px;background-color:red;">
</a>
How to protect your production
Now regarding defense, here are the CSS properties to be banned:
position: fixed
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block[...] Its final position is determined by the values of top, right, bottom, and left.
z-index
[...] Overlapping elements with a larger z-index cover those with a smaller one. These two CSS properties are the ones that allow you to get out of the HTML structure.
Of course, I don't really recommend reflecting HTML code as a feature. If you can, ban this practice. In case you have no choice, via a comment feature for example. Use a whitelist of HTML tags, like <b> for instance and strip the others.
Then, in the same way, use a whitelist of HTML attributes, such as href for an <a> or src for an <img>.
Finally, if possible, limit the values of these attributes. In the case of a style attribute allowed, only allow a predefined list of CSS attributes.
As presented in this security post-it, the inline style allows the attack presented above, and the class attribute allows to use one already defined in the CSS, or even to trigger JavaScript functions called by this function :
position: fixed
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block[...] Its final position is determined by the values of top, right, bottom, and left.
z-index
[...] Overlapping elements with a larger z-index cover those with a smaller one. These two CSS properties are the ones that allow you to get out of the HTML structure.
Of course, I don't really recommend reflecting HTML code as a feature. If you can, ban this practice. In case you have no choice, via a comment feature for example. Use a whitelist of HTML tags, like <b> for instance and strip the others.
Then, in the same way, use a whitelist of HTML attributes, such as href for an <a> or src for an <img>.
Finally, if possible, limit the values of these attributes. In the case of a style attribute allowed, only allow a predefined list of CSS attributes.
As presented in this security post-it, the inline style allows the attack presented above, and the class attribute allows to use one already defined in the CSS, or even to trigger JavaScript functions called by this function :
document.getElementsByClassName('className');
Demo
Here, you have a button to enable the demo attack. The first one display the attack with a red background, to understand what happend, the second is transparent.