Ссылки на перекрестные направления небезопасны

При ссылке на страницу другого сайта с помощью атрибута target="_blank" вы можете подвергнуть свой сайт проблемам с производительностью и безопасностью:

  • Другая страница может работать на том же процессе, что и ваша. Если другая страница использует много JavaScript-кода, производительность вашей страницы может снизиться.
  • Другая страница может получить доступ к вашему объекту window через свойство window.opener . Это может позволить другой странице перенаправить вашу страницу на вредоносный URL.

Добавление rel="noopener" или rel="noreferrer" к ссылкам target="_blank" позволяет избежать этих проблем.

Почему аудит кросс-источника назначения Lighthouse провалился

Lighthouse отмечает небезопасные ссылки на перекрестные пункты назначения:

Аудит Lighthouse, выявляющий небезопасные ссылки на перекрестные пункты назначения.

Lighthouse использует следующий процесс для определения небезопасных ссылок:

  1. Соберите все теги <a> , содержащие атрибут target="_blank" , но не содержащие атрибуты rel="noopener" или rel="noreferrer" .
  2. Отфильтруйте все ссылки с того же хоста.

Поскольку 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 на новую страницу.

Для получения более подробной информации прочтите статью Безопасный обмен кросс-источниковыми ресурсами .

Ресурсы