Noopener (rel=”noopener”) — це значення атрибута rel у HTML-посиланні, яке розриває доступ нової вкладки до вихідної сторінки через властивість window.opener. Його додають до посилань з target=”_blank”, щоб зовнішній сайт не міг керувати вашою вкладкою чи перенаправляти її — це захист від атаки типу tabnabbing.
Простими словами: коли ви відкриваєте чуже посилання в новій вкладці, ви ніби лишаєте прочинені двері назад до себе. Noopener ці двері зачиняє — нова вкладка бачить лише себе, а не вашу сторінку.
Що таке noopener і навіщо він потрібен
За замовчуванням посилання з target="_blank" дає новій сторінці доступ до об’єкта window.opener — посилання на вкладку, з якої її відкрили. Цим може скористатися шкідливий сайт: через JavaScript він здатен підмінити вашу початкову вкладку на фішинговий клон. Такий трюк називають tabnabbing. Атрибут rel="noopener" прибирає цей доступ: значення window.opener стає null, і жодного контролю над батьківською вкладкою нова сторінка не отримує.
Хороша новина: сучасні браузери (Chrome, Firefox, Safari) з 2021 року самі підставляють noopener для посилань з target="_blank". Але покладатися лише на браузер не варто — старі версії й нестандартні середовища трапляються, тому атрибут прописують явно.
Синтаксис і приклад коду
Одне значення: <a href="https://example.com" target="_blank" rel="noopener">Посилання</a>
Разом з noreferrer (рекомендовано): <a href="https://example.com" target="_blank" rel="noopener noreferrer">Посилання</a>
Значення в атрибуті rel перелічують через пробіл, тому noopener легко поєднати з noreferrer чи nofollow.
Приклад
У статті блогу є зовнішнє посилання на джерело, що відкривається в новій вкладці. Без rel="noopener" той сайт технічно міг би через window.opener перезавантажити вашу вкладку. З noopener доступу немає — читач у безпеці, а на SEO це ніяк не впливає негативно.
Часто плутають з…
- noreferrer — ховає джерело переходу (Referer); noopener — прибирає доступ до вкладки. Різні задачі, часто ставлять разом.
- nofollow — стосується передачі ваги посилання для SEO, а не безпеки вкладок.
- Атрибут rel — це сам контейнер; noopener — лише одне з його можливих значень.
Питання та відповіді
Чи впливає noopener на SEO?
Прямо — ні. На відміну від nofollow, noopener не змінює передачу ваги посилання. Це суто атрибут безпеки, і Google це підтверджує.
Чи потрібен noopener, якщо браузери додають його самі?
Так, прописувати варто явно. Автоматична поведінка з’явилася лише у свіжих версіях браузерів, а прописаний атрибут гарантує захист скрізь.
Чим noopener відрізняється від noreferrer?
Noopener прибирає технічний доступ нової вкладки до вашої сторінки. Noreferrer додатково приховує, з якого сайту прийшов користувач. Noreferrer вмикає й ефект noopener.
Багато зовнішніх посилань без атрибутів безпеки? Перевіримо й приведемо код до ладу — SEO-аудит та виправлення помилок на сайті.
Схожі терміни: Атрибут rel, noreferrer, nofollow, HTML.
