Безопасность ссылок с target=»_blank» и rel=»noopener noreferrer»

Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.

Современные веб-страницы часто используют ссылки, которые открываются в новом окне или вкладке браузера. Для этого применяется атрибут target="_blank". Однако, не все знают, что использование этого атрибута может повлечь за собой определенные риски безопасности.

Проблема заключается в том, что страница, на которую ведет ссылка, получает доступ к объекту window родительской страницы через свойство window.opener. Это может быть использовано для фишинговых атак или других манипуляций.

Пример кода:

<a href="http://malicious-website.com" target="_blank">Неожиданно опасная ссылка</a>

В этом случае, если malicious-website.com является злонамеренным сайтом, он может использовать window.opener для перенаправления родительской страницы на другую веб-страницу.

Для предотвращения этой проблемы рекомендуют использовать атрибут rel="noopener noreferrer". Атрибут noopener говорит браузеру «не давай новой вкладке доступ к window.opener«, а noreferrer добавляет к этому «не отправляй информацию о реферере».

Пример безопасной ссылки:

<a href="http://example.com" target="_blank" rel="noopener noreferrer">Безопасная ссылка</a>

Возникает вопрос: что если злоумышленник будет использовать инструменты разработчика в браузере и удалять атрибут rel? Теоретически, это возможно, но важно понимать, что при таком сценарии злоумышленник должен иметь уже физический доступ к устройству пользователя. В таком случае, угроза безопасности гораздо выше, и удаление атрибута rel будет наименьшей из проблем.

Таким образом, использование атрибутов target="_blank" и rel="noopener noreferrer" вместе является эффективным способом защиты от определенного типа угроз безопасности в вебе.

На курсе Skypro «Веб-разработчик» освоите JavaScript, GitHub, Tilda, Postman, HTML, CSS и другие программы и инструменты, научитесь решать реальные задачи разработчика и работать в команде. Все учебные проекты можно положить в портфолио и устроиться на работу по новой специальности еще в процессе обучения.