Вебсправочник
Ваш первый сайт

Урок: проверить target и rel у ссылок страницы

Проверка внешнего поведения ссылок помогает заметить неожиданные новые вкладки и противоречивые атрибуты. В уроке вы соберёте диагностический список, не переходя по ссылкам автоматически.

Назначение

Проверка внешнего поведения ссылок помогает заметить неожиданные новые вкладки и противоречивые атрибуты. В уроке вы соберёте диагностический список, не переходя по ссылкам автоматически.

Как это работает

Код читает ссылки с явным target в текущем DOM. Href показывает разрешённый адрес, а getAttribute позволяет отдельно посмотреть записанное значение при необходимости. RelList удобно проверять как набор токенов.

Пример

const rows = [...document.querySelectorAll("a[target]")].map(link => ({
  text:link.textContent.trim(),
  href:link.href,
  target:link.target,
  explicitNoopener:link.relList.contains("noopener"),
  noreferrer:link.relList.contains("noreferrer")
}));
console.table(rows);

Что должно получиться

Таблица показывает заявленные контексты перехода и явные токены rel. Скрипт не открывает новые окна и не проверяет доступность целевых адресов. Пустой текст может потребовать отдельной проверки доступного имени ссылки.

Граница применения и частая ошибка

Отсутствие явного noopener не доказывает уязвимость современного _blank: браузеры применяют неявную защиту. И наоборот, наличие токена не подтверждает безопасность самого назначения. Действующий base target может влиять на ссылки без собственного target, которые этот узкий список не включает.

Самостоятельная проверка

Вручную проверьте несколько найденных ссылок в своём проекте. Сравните заявленное действие с видимым текстом. Затем посмотрите наличие base и отдельно оцените ссылки без target, не делая выводов только по таблице.

Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.