Что такое атрибут rel=noopener

Перевод: About rel=noopener

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

Как не странно, в данный момент времени вы читаете эту HTML страницу, для упрощения примера пусть она будет называться index.html.

И на ней размещена эта ссылка (Смотреть нужно на сайте оригинальной статьи):

Click me!!1 (same-origin)

Обратите внимание на ее 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

Это означает, что как только пользователь переходит по ссылке, malicious.html получает полный контроль над объектом window  этого документа!

Скрин исходной страницы на сайте оригинальной страницы после перехода по ссылке:

Обратите внимание, что это также работает, когда index.html и malicious.html находятся в разных источниках – window.opener.location доступен из разных источников! (Однако такие вещи, как window.opener.document, недоступны из разных источников; и CORS здесь не применяется.) Вот пример со ссылкой из разных источников (см на сайте оригинальной статьи):

Click me!!1 (cross-origin)

То есть 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 #1222516 fixed
• WebKit/Safari bug #155166 fixed
• Chromium bug #168988 fixed
• Chromium bug #898942: make target="_blank" imply rel="noopener"
• Microsoft Edge feature request