Когда вы ссылаетесь на страницу на другом сайте с помощью атрибута target="_blank"
, вы можете подвергнуть свой сайт проблемам с производительностью и безопасностью:
- Другая страница может работать в том же процессе, что и ваша страница. Если на другой странице используется много JavaScript, производительность вашей страницы может снизиться.
- Другая страница может получить доступ к вашему объекту
window
с помощью свойстваwindow.opener
. Это может позволить другой странице перенаправить вашу страницу на вредоносный URL-адрес.
Добавление rel="noopener"
или rel="noreferrer"
к ссылкам target="_blank"
позволяет избежать этих проблем.
Почему аудит Lighthouse между источниками и пунктами назначения терпит неудачу
Lighthouse отмечает небезопасные ссылки на перекрестные пункты назначения:
![Аудит маяка, показывающий небезопасные ссылки на пункты назначения из разных источников](https://developer.chrome.com/static/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/image/lighthouse-audit-showing-b1f47b11d85bc.png?authuser=5&hl=ru)
Lighthouse использует следующий процесс для определения ссылок как небезопасных:
- Соберите все теги
<a>
, содержащие атрибутtarget="_blank"
, но не содержащие атрибутыrel="noopener"
илиrel="noreferrer"
. - Отфильтруйте любые ссылки на один и тот же хост.
Поскольку Lighthouse отфильтровывает ссылки с одного и того же хоста, есть крайний случай, о котором вам следует знать, если вы работаете над большим сайтом: если одна страница содержит ссылку target="_blank"
на другую страницу вашего сайта без использования rel="noopener"
, последствия этого аудита для производительности по-прежнему сохраняются. Однако вы не увидите эти ссылки в результатах Lighthouse.
Как улучшить производительность вашего сайта и предотвратить уязвимости безопасности
Добавьте rel="noopener"
или rel="noreferrer"
к каждой ссылке, указанной в отчете Lighthouse. В общем, когда вы используете target="_blank"
, всегда добавляйте rel="noopener"
или rel="noreferrer"
:
<a href="https://examplepetstore.com" target="_blank" rel="noopener">
Example Pet Store
</a>
-
rel="noopener"
предотвращает доступ новой страницы к свойствуwindow.opener
и гарантирует ее запуск в отдельном процессе. -
rel="noreferrer"
имеет тот же эффект, но также предотвращает отправку заголовкаReferer
на новую страницу. См. Тип ссылки «noreferrer» .
Дополнительную информацию см. в публикации «Безопасное совместное использование ресурсов перекрестного происхождения» .