Почему Я Не Могу Установить Размер Шрифта Для Посещенной Ссылки?

Привет, Хабр! Представляю вашему вниманию перевод статьи «Почему я не могу установить размер шрифта посещаемой ссылкиЭ» Джим Фишер.

Почему я не могу установить размер шрифта для посещенной ссылки?

Посещенные ссылки отображаются фиолетовым цветом; не посещенный - синий.

Это различие пришло к нам с появлением Интернета.

Но CSS позволяет нам переопределять эти свойства с помощью псевдоселектора :visited! Допустим, вы хотите выделить посещенные ссылки серым цветом и уменьшить их размер, чтобы показать пользователю, что ссылка уже была посещена.

   

 a:visited {
   color: gray;
   font-size: 6px;
 }

Этот стиль применяется к текущей странице: Окрашивание ссылки в серый цвет, как и положено, уведомляет нас о том, что она уже посещалась, но размер шрифта остается прежним! Это связано с тем, что изменение размера шрифта может стать уязвимостью! Если CSS может изменить размер шрифта, я (Джим) смогу узнать, посещали ли вы сайт pornhub.com. Но как? Веб-страницы доступны для проверки отображаемых элементов на странице.

Самый очевидный способ — использовать window.getComputedStyle().

В нем говорится о свойствах, примененных к посещенной выше ссылке; как сообщает браузер: размер шрифта: 18 пикселей; цвет: RGB(0, 0, 238).

Если getComputedStyle сообщит, что размер шрифта для посещенных ссылок изменился с 18 пикселей на 6 пикселей, я (Джим) буду знать, что страница ссылается наpornhub.com, а затем проверю размер шрифта, чтобы определить историю вашего браузера.

Я могу использовать эти данные для таргетированной рекламы, могу продать ваши данные или шантажировать вас и так далее.

Дыру в безопасности закрыли, запретив менять размер шрифта для a:visited. А вот информация, полученная с помощью getComputedStyle о цвете посещенной ссылки, будет иметь вид: rgb(0, 0, 238) — то есть синий.

Это ложь - ссылка серая! Что касается свойства цвета, браузеры закрывают дыру уязвимости другим способом: вместо того, чтобы предотвратить его изменение, они заставляют getComputedStyle лгать о реальном значении.

Почему используются два подхода? Почему мы не можем заставить getComputedStyle лгать и о параметре размера шрифта? Причина в том, что вы можете проверять отображаемые элементы веб-страницы, используя методы, отличные от getComputedStyle. Положение элемента на странице также можно проверить с помощью .

pageXOffset или .

pageYOffset. Изменение размера шрифта посещенной ссылки повлияет на смещение других элементов, поэтому вы можете косвенно проверить, какие ссылки были посещены.

Отключение размера шрифта для a:visited — сложное, но надежное решение.

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

Все они представляют собой разные формы изменения цвета.

Все остальные свойства CSS отключены.

Теоретически невозможно определить, изменился ли цвет посещенной ссылки.

Единственная возможность — это временная атака: скажем, если смена цвета на розовый заняла больше времени по сравнению с синим, страница может измерить, сколько времени потребовалось для отображения элемента, и сравнить это значение с ожидаемой продолжительностью.

P.S.: Отдельное спасибо за помощь в исправлении перевода Переверзева Ольга .

Спасибо Олегу Яценко( Сэмбер ), в комментариях обратил внимание на то, что решение проблемы такой утечки данных впервые было реализовано в Мозилла — автор решения Дэвид Барон .

Теги: #CSS #безопасность веб-приложений #макет #безопасность #перевод