Если на вашем сайте есть ссылки на другой сайт, используйте rel="noopener"
, особенно, если они открываются в новой вкладке или новом окне.
<a href="http://example.com" target="_blank" rel="noopener">
Прекрасная ссылка
</a>
Если у ссылки нет этого атрибута, новая страница будет иметь доступ к объекту window оригинальной страницы (той, где была ссылка) через window.opener
. Благодаря модели безопасности касательно доменов браузеры не допускают чтение вашей страницы, тем не менее, некоторые легаси API могут перенаправить на другой URI, используя window.opener.location = newURL
.
Mathias Bynens описал это более детально, а я добавил лишь некоторые замечания касательно производительности.
Демонстрация
—
Нажатие на эту кнопку запустит генерацию случайных чисел. Если числа не будут генерироваться не каждый кадр (frame), значит что-то задерживает поток.
Теперь нажмите поочерёдно ссылки ниже, которые ведут на страницу с простым скриптом на JavaScript:
Если перейти на страницу по ссылке без атрибута rel="noopener",
то генерация чисел будет прерываться скриптом с новой страницы. И задержка будет касаться не только генерации чисел, главный поток тоже будет прерываться — попробуйте плавно прокручивать страницу или выделить текст на оригинальной странице. Такой проблемы не возникает, если открыть страницу по ссылке с атрибутом rel="noopener"
. По крайней мере, это работает для Chrome и Opera. На данный момент у меня установлен Firefox 47 и пользы от атрибута никакой.
Почему так происходит?
Окна и процессы
Большинство популярных и современных браузеров многопроцессорные (за исключением Firefox, хотя разработчики уже работают над исправлением этой несуразицы). Каждый процесс имеет несколько потоков, включая так называемый главный поток. У каждого процесса свои задачи: парсинг, рендеринг, отрисовка и пр. Таким образом, JavaScript для разных доменов работают в разных потоках.
Однако, из-за синхронного «межоконного» доступа DOM доступен нам через window.opener
, а окна, запущенные через target="_blank"
работают в одном процессе и потоке. То же самое верно и для фреймов iframes и окон, открытых с помощью window.open
.
rel="noopener"
предотвращает работу window.opener
и кроссдоменный доступ. Основанные на Chromium браузеры создают для новых страниц собственные процессы.
Вывод
Разработчики браузеров, например, Chromium, работают над тем, чтобы новые вкладки и окна открывались в независимом потоке независимо от того, использовался ли атрибут rel="noopener" или нет.
Тем не менее, использование этого атрибута может помочь решить некоторые проблемы с производительностью.