Привет! Представляю Вашему вниманию перевод статьи «Why can’t I set the font size of a visited link?» автора Jim Fisher.
Посещенные ссылки отображаются фиолетовым; не посещенные — голубым. Это различие пришло к нам с времен появления веба. Но CSS позволяет нам перенастроить эти свойства с помощью псевдо-селектора :visited! Скажем, вы хотите сделать посещенные ссылки серыми и уменьшить их размер, для того чтобы показать пользователю что эта ссылка уже была посещена.
a:visited {
color: gray;
font-size: 6px;
}
Этот стиль применен к текущей странице:
Окрашивание ссылки в серый цвет, как и предполагалось, уведомляет нас о том что она уже была посещена, но размер шрифта остался прежним! Так происходит, потому что изменение размера шрифта может быть причиной уязвимости! Если CSS сможет изменить размер шрифта, я(Jim) могу сказать посещали ли Вы pornhub.com. Но как?
Веб страницы доступны для инспектирования отображенных элементов на странице. Наиболее очевидный способ — использовать window.getComputedStyle(). Он рассказывает о свойствах, примененных к вышеупомянутой посещенной ссылке; как сообщает браузер: font-size: 18px; color: rgb(0, 0, 238).
Если getComputedStyle сообщит об изменении размера шрифта с 18px до 6px для посещенных ссылок, я(Jim) пойму, что на странице создана ссылка на pornhub.com, затем я проверю размер шрифта, для того чтобы определить историю посещений вашего браузера. Я могу использовать эти данные для таргетированной рекламы, могу продать ваши данные или шантажировать вас, и так далее… Дыра в безопасности была закрыта путем запрета на изменение font-size для a:visited.
Но информация, полученная с помощью getComputedStyle, о цвете посещенной ссылки будет: rgb(0, 0, 238) — то есть голубое. Это ложь — ссылка же серая! Для свойства color, браузеры закрывают дыру в уязвимости другим способом: вместо запрета на изменение, они заставляют getComputedStyle лгать о реальном значении.
Почему же используется два подхода? Почему мы не можем заставить getComputedStyle лгать так-же и о параметре font-size? Причина в том, что можно исследовать отображенные элементы веб страницы и другими методам, кроме getComputedStyle. Позицию элемента на странице можно проверить так же с помощью .pageXOffset или .pageYOffset. Изменение font-size у посещенной ссылки будет влиять на смещение у других элементов, из-за чего можно косвенное проверить какие ссылки были посещены. Отключение font-size для a:visited — это жесткое, но надежное решение.
По этой ссылке содержится краткий список разрешенных свойств, таких же как color, которые не должны влиять на макет страницы, и не могут быть обнаружены. Все они — разные формы изменения цвета. Все другие CSS свойства — заблокированы.
В теории, нет способа, с помощью которого можно было бы определить, что цвет посещенной ссылки был изменен. Единственная возможность — временная атака: скажем, если изменение цвета в розовый заняло больше времени по сравнению с голубым, страница может измерить, сколько времени потребовалось для отображения элемента, и сравнить это с ожидаемой продолжительностью.
P. S.:
Отдельное спасибо за помощь в корректировке перевода Переверзевой Ольге
Автор: mrhearthstone
