Исходящие ссылки

Что это?

Исходящие ссылки с target="_blank" без атрибута rel="noopener" создают уязвимость безопасности. Когда пользователь кликает на такую ссылку, открытая страница получает доступ к исходной вкладке через JavaScript. Это как оставить ключи от своей квартиры незнакомцу.

Почему это критически опасно?

• Уязвимость безопасности: новая вкладка может изменить содержимое исходной страницы. Риск: фишинг, подмена контента, кража данных.
• Производительность: новая вкладка использует тот же процесс, что и исходная. Результат: замедление работы обеих вкладок.
• SEO-риски: поисковые системы учитывают безопасность сайта. Возможное понижение в выдаче.

Техническая суть проблемы

<!-- ОПАСНО -->
<a href="https://externalsite.com" target="_blank">Внешняя ссылка</a>

<!-- БЕЗОПАСНО -->
<a href="https://externalsite.com" target="_blank" rel="noopener">Внешняя ссылка</a>

Когда новая вкладка получает доступ:

// На странице externalsite.com злоумышленник может выполнить:
window.opener.location = 'https://fake-site.com/phishing';

Быстрая проверка за 2 минуты

1. Аудит текущих ссылок:
   • Откройте исходный код (Ctrl+U)
   • Найдите через поиск target="_blank"
   • Проверьте наличие rel="noopener" или rel="noreferrer"
2. Инструменты автоматизации:
   • Google Search Console → Безопасность
   • Lighthouse audit → Best Practices
   • Screaming Frog → Custom Search

План исправления за 10 минут

1. Добавьте защитные атрибуты:

   <!-- МИНИМУМ -->
   <a href="https://externalsite.com" target="_blank" rel="noopener">Внешняя ссылка</a>
   
   <!-- РЕКОМЕНДУЕТСЯ -->
   <a href="https://externalsite.com" target="_blank" rel="noopener noreferrer">Внешняя ссылка</a>

2. Массовое исправление в CMS (WordPress):

   function add_noopener_to_external_links($content) {
       $content = preg_replace('/<a(.*?)target="_blank"(.*?)>/', '<a$1target="_blank" rel="noopener$2>', $content);
       return $content;
   }
   add_filter('the_content', 'add_noopener_to_external_links');

3. Для статических сайтов:
   • Глобальный поиск и замена в коде
   • Используйте Prettier или ESLint с правилом "react/jsx-no-target-blank"

Разница между атрибутами

• noopener — запрещает доступ к window.opener
• noreferrer — скрывает источник перехода + включает noopener
• nofollow — не передает ссылочный вес (для SEO)

Частые ошибки

• Только target="_blank" — уязвимость к атакам через window.opener
• rel="nofollow" без noopener — безопасность не обеспечена
• Ручное добавление на каждую ссылку — легко пропустить и сделать ошибку

Проверка результата

• Протестируйте ссылки на сайте
• Запустите Lighthouse audit
• Убедитесь, что в отчете нет предупреждений
• Проверьте исходный код обновленных страниц

Реальный пример последствий

До исправления: пользователь кликает на ссылку → открывается фишинговый сайт → исходная страница подменяется → кража данных.

После исправления: пользователь кликает на ссылку → безопасное открытие в новой вкладке → исходная страница защищена.