Если на вашем сайте есть ссылки на другой сайт, используйте 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" или нет.
Тем не менее, использование этого атрибута может помочь решить некоторые проблемы с производительностью.