Безопасность и доступность при открытии ссылок в новом окне

Безопасность и доступность при открытии ссылок в новом окне

От автора: несколько лет назад веб-сообщество пришло к негласному соглашению, что больше нельзя открывать ссылки в новом окне (с помощью target=»_blank“), чтобы улучшить опыт от работы с сайтами. В конце концов, кто мы вообще такие, чтобы говорить, что что-то должно открываться в новом окне? Такой шаг стал реакцией на проблему с UX, с которой мы по сей день сталкиваемся: мы решаем, что для пользователя будет лучше. Мы дали пользователю возможность самому решать, где и как он хочет открывать ссылки. Хочет в новом окне – клик правой кнопкой мыши, открыть в новом окне. Или можно зажать shift и перейти по ссылке. Пользователь сам выберет. Как пользователь, я не могу избавиться от target=»_blank», но я могу сымитировать эту функцию, если захочу. В сети есть вещи намного хуже, чем борьба с UI, который думает, что лучше знает, что вам нужно.

Не будем спорить, есть еще случаи, когда необходимо открыть что-то в новом окне (кнопки репоста в социальных сетях). Если вам нужно открыть что-то в новом окне, нужно помнить о нескольких вещах. Об этом мы сегодня коротко поговорим: безопасность и доступность.

Безопасность

Пару недель назад я наткнулся на статью «target=”_blank” – самая недооцененная уязвимость». Слишком пугающее название, да? В статье описывается несколько хороших моментов, о которых я ранее не знал. Если коротко, то каждый раз при использовании target=»_blank» вы частично открываете доступ к объекту opener, с помощью которого потенциально можно запустить JS код (чаще всего используется в фишинге).

Есть довольно простой фикс. Необходимо добавить rel=»noopener noreferrer» ко всем ссылкам с target=»_blank». Это заблокирует доступ к объекту opener. Для большей части браузеров используется значение noopener, noreferrer только для Firefox.

Уязвимость также проявляется при открытии окон с помощью JS. Крайне важно программно установить opener в null. Код ниже взят из той статьи:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
var newWnd = window.open();
newWnd.opener = null;

Доступность

Ссылки, открывающиеся в новом окне, имеют ужасную доступность. Перефокусировка интерфейса куда-либо может сильно дезориентировать пользователя с ограниченными возможностями, использующего вспомогательные технологии. Большая часть скринридеров переключают пользователя на новое окно при открытии такой ссылки (но только после клика). Пользователь с хорошим зрением легко заметит это, но пользователям с умственными отклонениями сложно воспринимать такие переходы. Также это отключает кнопку назад (так как открывается новое окно/вкладка), что еще больше смутит, если не понять, что произошло.

Поэтому если ссылка открывается в новом окне, нужно заранее предупредить пользователя об этом. Многие используют для этого иконки с альтернативным текстом типа «эта ссылка открывается в новом окне». Или же можно прятать текст без использования изображений, хотя иконки в этом случае помогут во взаимодействии UI со всеми пользователями (с хорошим и плохим зрением). Рекомендуется использовать этот метод.

Я создал простой WordPress плагин для демонстрации того, как можно автоматизировать этот процесс в CMS. Я не супер WP разработчик, поэтому буду рад любой помощи.

Источник: http://csskarma.com/

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree