The noopener and noreferrer attributes

Готовился к собесу, решил поделиться интересной инфой про атрибуты: noopener и noreferrer
Атрибуты noopener и noreferrer используются в HTML для обеспечения безопасности и конфиденциальности, когда вы открываете ссылки в новом окне или вкладке с помощью target="_blank".
1. Почему важен атрибут noopener?

Когда вы открываете ссылку с target="_blank", новая вкладка может получить доступ к объекту window.opener. Это объект позволяет новой вкладке взаимодействовать с оригинальной страницей. Это может быть опасно, потому что:

• Новая вкладка может изменить содержимое оригинальной страницы через window.opener.location.
• Это создает риск ******а, когда злоумышленники перенаправляют пользователя на поддельный сайт.

Как помогает noopener?

Если вы добавите rel="noopener" в ссылку, новая вкладка не будет иметь доступа к объекту window.opener. Это изолирует две страницы друг от друга, делая их независимыми и снижая риски безопасности.
Пример:

<a href="https://example.com" target="_blank" rel="noopener">Открыть ссылку</a>

HTML

<a href="https://example.com" target="_blank" rel="noopener">Открыть ссылку</a>

2. Что делает атрибут noreferrer?

Атрибут noreferrer выполняет две функции:

1. Он предотвращает передачу реферера (адреса страницы, с которой перешел пользователь) на новый сайт. Это полезно, если вы хотите сохранить приватность пользователей или скрыть источник трафика.
2. Он автоматически включает поведение noopener, изолируя страницы друг от друга.

Пример использования:

<a href="https://example.com" target="_blank" rel="noreferrer">Открыть ссылку</a>

HTML

<a href="https://example.com" target="_blank" rel="noreferrer">Открыть ссылку</a>

В этом случае сайт https://example.com не узнает, что пользователь пришел с вашего сайта.
Практический пример:

Если вы создаете ссылку, которая открывает внешний сайт, рекомендуется всегда добавлять rel="noopener" или rel="noopener noreferrer" для защиты вашей страницы.

<a href="https://another-website.com" target="_blank" rel="noopener noreferrer">Открыть сайт</a>

HTML

<a href="https://another-website.com" target="_blank" rel="noopener noreferrer">Открыть сайт</a>