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

29

Від автора: кілька років тому веб-співтовариство прийшло до негласної угоди, що більше не можна відкривати посилання в новому вікні (з допомогою 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 розробник, тому буду радий будь-якій допомозі.