Особенности CSS :visited — почему вы не можете установить размер шрифта для посещенной ссылки

Особенности CSS :visited - почему вы не можете установить размер шрифта для посещенной ссылки

От автора: посещенные ссылки отображаются фиолетовым цветом; непосещенные — отображаются синим. Это различие восходит к началу Интернета. Но можно настроить эту визуальную разницу с помощью псевдо-селектора :visited CSS!

Скажем, вы хотите сделать посещенные ссылки серыми и маленькими, чтобы указать пользователю, что эта ссылка «обработана»:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Веб-страницы могут проверять визуализированные на странице элементы. Самый очевидный способ с помощью window.getComputedStyle(). Вот сообщаемые свойства посещенной ссылки выше, как их указывает браузер: font-size: 18px; color: rgb(0, 0, 238).

Если бы getComputedStyle отправлял для посещенных ссылок 6px вместо 18px, я мог бы на этой странице сгенерировать ссылку pornhub.com, а затем протестировать размер шрифта, чтобы раскрыть историю просмотров. Тогда я смогу показывать вам целевую рекламу, продавать ваши данные, шантажировать вас и так далее. Эта брешь в безопасности была закрыта, так и для a:visited нельзя установить font-size.

Но обратите внимание на то, что для цвета посещенной ссылки getComputedStyle сообщает: rgb(0, 0, 238), т.е. синего цвета. Это не так — ссылка серая! Для свойства color браузеры по-разному закрывают брешь в безопасности: вместо того, чтобы запрещать настройку свойства, они лгут getComputedStyle о его значении.

Почему два подхода? Почему мы тоже не можем солгать getComputedStyle о font-size? Причина в том, что веб-страницы могут проверять визуализированные элементы не только с помощью getComputedStyle. Веб-страницы могут проверять положение элемента на странице с помощью .pageXOffset или .pageYOffset. Поскольку font-size посещенной ссылки будет влиять на смещение других элементов, страница может косвенно проверить, была ли ссылка посещена. Отключение font-size для a:visited является жестким, но более безопасным решением.

Существует короткий белый список свойств, например color, которые не влияют на макет страницы, и поэтому не должны обнаруживаться. Они все связаны с цветом цвета. Все остальные свойства CSS запрещены.

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

Автор: Jim Fisher

Источник: https://jameshfisher.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree