О web-разработке
и даже немного больше...

Опасность использования атрибута target="_blank"

Всем привет. Поговорим об одном атрибуте у ссылок, который наверняка известный вам, это атрибут target="_blank", он позволяет открывать ссылку в новой вкладке. Множество сайтов, да и на нашем ресурсе тоже используются ссылки на внешние ресурсы, которые открывается посредством использования данного атрибута.

Существует один нюанс, о котором не все догадываются, страница на которую происходит переход получает частичный  контроль, над ссылающийся на неё страницу, посредством свойства window.opener в javascript. На самом деле это уязвимость, которая существует уже значительное время, но не все об этом знают.

https://sites.google.com/site/bughunteruniversity/nonvuln/phishing-with-window-opener

Таким образом, со страницы на которую вы ссылаетесь может выполняться js код, который вас не очень обрадует. Один из распространённых случаев, это может быть фишинговая страница, к примеру, которая может производить редирект с ранее доверенной страницы. Это происходит по той причине, что браузеру не было сообщено о том, что страница не должна иметь доступа к родительской вкладке.

Как решить эту проблему?

Проблему решает сторона, публикующая ссылку, и это нужно понимать, за вас это никто делать не будет. В качестве решения данной проблемы можно использовать один из нескольких методов.

Первый более простой, это добавление атрибута rel="noopener" к внешним ссылкам. К примеру, если у вас уже есть атрибут rel="nofollow" вы можете их использовать вместе:

rel="nofollow noopener"

Обратите внимание, что в некоторых браузерах данный метод может не работать, это было замечено в браузере Firefox, в качестве альтернативы в этом случае так же можно использовать rel="noreferer"

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

window.opener = null;

Третий вариант — открывать ссылки в новой вкладке, посредством кода js.

var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = targetUrl;

Существует так же и другие методы, через iframe, которые не очень удобны, по этой причине публиковать их здесь не стану.
Статья на английском, где так же хорошо описывается суть данной темы, с хорошим примером демострации уязвимости:
https://mathiasbynens.github.io/rel-noopener/

На этом пока всё, всем всего доброго!

Опубликован: 24.09.2018 г.

См. также:

Делаем кнопки «Поделиться в соцсетях»
Стрелочные функции в JS
Мобильное меню для сайта на CSS
Бесконечная анимация вращения на CSS
Анимация вращения при наведении курсора
Стилизация выделения номера телефона в мобильных браузерах
Эффекты кнопок для сайта
Подсветка синтаксиса кода на вашем сайте

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

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

Комментарии
  • Загрузка...
Друзья сайта