Description

rel=noopener>https://znachenie-slova.ru/вовлечение

Как ?

# Атрибуты **rel= »noopener noreferrer »**: как они защищают ваш сайт и улучшают безопасность

## Введение
Мы часто добавляем внешние ссылки в свои проекты, но знаем ли мы все подводные камни? Если вы используете `target= »_blank »` для открытия ссылок в новой вкладке, помните: без атрибутов **noopener и noreferrer** вы рискуете безопасностью вашего сайта. В этой статье вы узнаете, почему эти атрибуты важны, а также увидите практические примеры их использования.

—

### Что такое атрибут **rel**?
Атрибут **rel** в HTML определяет взаимосвязь между текущим документом и документом, на который ведет ссылка. Например:
« `html
Ссылка
« `
Значения этого атрибута, такие как **nofollow/noopener/noreferrer**, указывают поисковикам и браузерам, как обрабатывать переход.

—

## **rel= »noopener »: зачем его используют
**Проблема без `noopener`: Открытие внешних ссылок через `target= »_blank »` без `noopener` создаёт уязвимость:
1. Основная вкладка вашего сайта может быть взломана через скрипты.
2. Открывая новую вкладку, браузер автоматически создаёт дочернее окно (`window.opener`), которое атакующий может контролировать.

**Что делает `noopener`**:
– Разрывает связь между новой вкладкой и вашим сайтом.
– Предотвращает атаки, например, изменения URL вашей страницы через `window.history`.

**Пример без и с noopener**:
❌ **Небезопасный код**:
« `html
Ссылка
« `
✅ **Безопасный код**:
« `html
Ссылка
« `

—

## **rel= »noreferrer »: защита от передачи данных
Помимо безопасности, важно скрывать **реферера** (данные о том, с какого сайта переходили).

**Зачем использовать noreferrer**:
– Блокирует передачу заголовка HTTP Referer: атакующий не узнает, откуда пользователь переходил.
– Включает **noopener** автоматически. Это значит, что вместо `rel= »noopener noreferrer »` можно указывать только **noreferrer**, но лучше писать **оба** значения для гарантии.

**Пример:**
« `html
Ссылка
« `

—

## Мифы и факты
### Ответы на частые вопросы
1. **Что делает `rel=noreferrer`?**
Отключает передачу реферера **+** добавляет `noopener`, так что можно не писать его вручную.

2. **Запутались в атрибутах?**
– `noopener` — для безопасности.
– `noreferrer` — для приватности.
– Оба можно совмещать.

3. **Важно!**
Если вы используете WordPress: с 4.7 версии ядро добавляет `noopener` к ссылкам с `target= »_blank »`, но `noreferrer` всё равно нужно добавлять вручную.

—

### Как применять на практике
1. **В ручном коде**:
Для любых внешних ссылок с `target= »_blank »` добавьте **rel= »nofollow noopener noreferrer »**.

2. **В WordPress**:
– Используйте плагины вроде « Real NoOpenExternalLinks » для автоматизации.
– В шаблонах добавьте код:
« `php
<a href=" » rel= »noopener noreferrer » target= »_blank »>Ссылка
« `

3. **SEO-секрет**:
`nofollow` — для поисковиков, `noopenener/noreferrer` — для безопасности. Эти цели не конфликтуют и можно комбинировать.

—

## Зачем ещё нужно знать это?
– **Производительность:** `noopener` снизит нагрузку на браузер, потому что предотвращает поиск открытых вкладок.
– **SEO:** Хотя эти атрибуты не influence ранжирование, безопасность повышает доверие поисковиков.

—

## Итог
Ответим на заголовок: **«Как использовать noopener и noreferrer?»**
– Всегда пишите `target= »_blank »` только с **rel= »noopener noreferer »**.
– Добавляйте их к **всем** внешним ссылкам.
– Не экономьте на безопасности: лишние 7 букв кода — это стабильность.

Не ждите, пока браузеры автоматически защитятся! Готовы обсудить примеры или спросить: *Должен ли я ставить их для внутренних ссылок?* Отвечайте в комментариях!

—

🔥 **Проверьте свои сайты:** Нажмите правой кнопкой по ссылке → Просмотр кода → Найдите ли атрибуты!
Теперь вы знаете, как превратить внешнюю ссылку из «бомбы замедленного действия» в защищенный канал.

P.S. Если вы используете генераторы ссылок (например, WYSIWYG редакторы), проверьте их настройки: автоматический добавление `noopener` часто отключено.