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

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

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

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

Почему аудит 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 на новую страницу. См. Тип ссылки «noreferrer» .

Дополнительную информацию см. в публикации «Безопасное совместное использование ресурсов из разных источников» .

Ресурсы