Что такое атрибут rel=noopener
Перевод: About rel=noopener
Какие проблемы решает этот атрибут?
Как не странно, в данный момент времени вы читаете эту HTML страницу, для упрощения примера пусть она будет называться index.html
.
И на ней размещена эта ссылка (Смотреть нужно на сайте оригинальной статьи):
Обратите внимание на ее HTML код (в оригинальной статье):
<a class="user-generated" href="malicious.html" target="_blank"><b>Click me!!1 (same-origin)</b></a>
При щелчке по указанной выше ссылке открывается файл malicious.html (вредоносный.html) в новой вкладке (с использованием target = _blank). Само по себе это не очень интересно.
Однако в документе malicious.html на этой новой вкладке есть window.opener, который указывает на окно исходного HTML-документа, который вы просматриваете прямо сейчас, то есть index.html.
Скрин страницы malicious.html
![](https://webdevblog.ru/wp-content/uploads/2020/11/111-1024x564.png)
Это означает, что как только пользователь переходит по ссылке, malicious.html получает полный контроль над объектом window
этого документа!
Скрин исходной страницы на сайте оригинальной страницы после перехода по ссылке:
![](https://webdevblog.ru/wp-content/uploads/2020/11/222.png)
Обратите внимание, что это также работает, когда index.html и malicious.html находятся в разных источниках – window.opener.location доступен из разных источников! (Однако такие вещи, как window.opener.document, недоступны из разных источников; и CORS здесь не применяется.) Вот пример со ссылкой из разных источников (см на сайте оригинальной статьи):
То есть malicious.html заменяет исходную вкладку, содержащую index.html, на index.html#hax, которая отображает скрытое сообщение. Это относительно безобидный пример, но он может быть использован для перенаправления на фишинговую страницу, внешне похожую на настоящий index.html, с запросом учетных данных. Пользователь, скорее всего, этого не заметит, потому что фокус в этот момент будет находится на вредоносной странице в новом окне, а перенаправление происходит в фоновом режиме. Эту атаку можно сделать еще более изощренной, добавив задержку перед перенаправлением на фишинговую страницу в фоновом режиме (см. tab nabbing).
TL;DR Если задано window.opener, страница может запускать навигацию в opener независимо от security origin.
Рекомендации
Чтобы страницы не злоупотребляли window.opener, используйте rel=noopener
. Это гарантирует, что window.opener будет иметь значение null начиная с Chrome 49 & Opera 36, Firefox 52, Desktop Safari 10.1+ и iOS Safari 10.3+.
Click me!!1 (now with rel=noopener
)
Для более старых браузеров вы можете использовать rel=noreferrer
, который также отключает HTTP-заголовок Referer, или следующий обходной путь JavaScript, который потенциально запускает блокировщик всплывающих окон:
var otherWindow = window.open(); otherWindow.opener = null; otherWindow.location = url;
Click me!!1 (now with rel=noreferrer
-based workaround)
Click me!!1 (now with window.open()
-based workaround)
Обратите внимание, что обходной путь на основе JavaScript в Safari не работает. Для поддержки Safari вставьте скрытый iframe, который открывает новую вкладку, а затем немедленно удалите iframe.
А вообще лучше не используйте target=_blank (или любой другой target, который открывает новый контекст навигации), особенно для ссылок в пользовательском контенте, если у вас нет для этого веских причин.
Примечания
В Safari Technology Preview 68 target=”_ blank” для “анкорных” ссылок по умолчанию подразумевается rel=”noopener”. Чтобы явно отказаться от наличия window.opener, используйте rel=”opener”. Позже это поведение было стандартизировано.
Bug tickets to follow
Gecko/Firefox bug #1222516fixedWebKit/Safari bug #155166fixedChromium bug #168988fixed- Chromium bug #898942: make
target="_blank"
implyrel="noopener"
- Microsoft Edge feature request
я так понял это просто лишь для безопасности??