Веб безопасность

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

Spread the love

Перевод: 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

Была ли вам полезна эта статья?
[4 / 4]

Spread the love
Editorial Team

View Comments

  • я так понял это просто лишь для безопасности??

Recent Posts

Vue 3.4 Новая механика v-model компонента

Краткий перевод: https://vuejs.org/guide/components/v-model.html Основное использование​ v-model используется для реализации двусторонней привязки в компоненте. Начиная с Vue…

10 месяцев ago

Анонс Vue 3.4

Сегодня мы рады объявить о выпуске Vue 3.4 «🏀 Slam Dunk»! Этот выпуск включает в…

10 месяцев ago

Как принудительно пере-отобразить (re-render) компонент Vue

Vue.js — это универсальный и адаптируемый фреймворк. Благодаря своей отличительной архитектуре и системе реактивности Vue…

2 года ago

Проблемы с установкой сертификата на nginix

Недавно, у меня истек сертификат и пришлось заказывать новый и затем устанавливать на хостинг с…

2 года ago

Введение в JavaScript Temporal API

Каким бы ни было ваше мнение о JavaScript, но всем известно, что работа с датами…

2 года ago

Когда и как выбирать между медиа запросами и контейнерными запросами

Все, кто следит за последними событиями в мире адаптивного дизайна, согласятся, что введение контейнерных запросов…

2 года ago