Загрузка...

The noopener and noreferrer attributes

Thread in Learning created by yopax Dec 22, 2024. (bumped Dec 29, 2024) 251 view

The poll

Знали ли вы об этих атрибутах

Results are only viewable after voting.
  1. Да

  2. Нет

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

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

    Если вы добавите rel="noopener" в ссылку, новая вкладка не будет иметь доступа к объекту window.opener. Это изолирует две страницы друг от друга, делая их независимыми и снижая риски безопасности.
    Пример:
    HTML
    <a href="https://example.com" target="_blank" rel="noopener">Открыть ссылку</a>
    2. Что делает атрибут noreferrer?

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

    HTML
    <a href="https://example.com" target="_blank" rel="noreferrer">Открыть ссылку</a>
    В этом случае сайт https://example.com не узнает, что пользователь пришел с вашего сайта.
    Практический пример:

    Если вы создаете ссылку, которая открывает внешний сайт, рекомендуется всегда добавлять rel="noopener" или rel="noopener noreferrer" для защиты вашей страницы.
    HTML
    <a href="https://another-website.com" target="_blank" rel="noopener noreferrer">Открыть сайт</a>
     
Loading...
Top