Target blank rel nofollow: wordpress — Add rel=»nofollow» and target=»_blank» for external links permanently

Безопасный JS, чем опасны ссылки с target blank, зачем писать rel noopener

17.06.18 ИТ / JavaScript 6466

Переходы по ссылкам в браузерах, почтовых программах и в прочих местах могут быть небезопасны. Многие с осторожностью относятся к ссылкам, а некоторые пользователи и вовсе напрочь отказываются переходить по ссылкам, думая, что там непременно вирус. Здесь нужно соблюдать баланс, не быть параноиком и в то же время не переходить по некоторым ссылкам.

Какие могут быть опасности? Не так давно, стало известно об одной уязвимости в браузерах. Ее суть заключается в том, что при переходе по ссылке, страница, на которую перешел пользователь, может получить доступ к предыдущей странице с помощью JavaScript, объекта window.opener. Чаще всего это опасно, когда новая страница будет открыта в новой вкладке, то есть если пользователь перешел по ссылке с атрибутом target=»_blank».

Что может произойти после такого перехода? На том сайте, на который Вы перешли, может быть размещен

Как видно, уязвимость достаточно серьезная. Возникает вопрос, как ее устранить? Производители всех современных браузеров уже оперативно выпускают обновления для всех своих продуктов, в которых такой уязвимости уже нет. Но как быть, ведь не все пользователи обновляют браузеры сразу, а некоторые и вовсе могут не обновлять.

Уже сейчас, не дожидаясь обновлений, можно устранить уязвимость самостоятельно. Для этого важно к каждой ссылке, особенно с атрибутом target=»_blank», прописывать атрибут rel со значением noopener: rel=»noopener». Что это дает? Этот атрибут запрещает целевой странице обращаться к исходной, таким образом доступа не будет и значит ничего подменить не получится. Вот почему сейчас часто можно видеть ссылки не только с nofollow, но и с добавленным noopener. Только что, был дан ответ на вопрос, зачем писать

Как быть, если нужно совместить два значения в одном атрибуте? Просто перечислить их через пробел, например, так: rel=»nofollow noopener». Но это еще не все, не все браузеры понимают noopener, поэтому лучше дописать еще и noreferrer. В итоге ссылка с запретом индексации и защитой от уязвимости для всех браузеров будет выглядеть таким образом: rel=»nofollow noopener noreferrer».

Есть еще одно решение, глобальное, которое позволит защитить все ссылки на странице без прописывания noopener. Для это достаточно в JS-файле Вашего сайта, который подключается на все страницы сайта до полной загрузки страницы — обнулить объект window.opener таким образом: пропишите

Мало того, что значение noopener повышает безопасность, оно еще и повышает производительность. Если сказать просто, сложный JavaScript обрабатывается на одном домене, но нагрузка идет и на страницу, откуда произошел переход. В случае же использования rel=»noopener», доступ к window.opener предотвращается

Таким образом, нужно позаботится о безопасности своих проектов уже сейчас, применить те меры, которые описаны в этой статье.

Links to cross-origin destinations are unsafe

Links to cross-origin destinations are unsafe

Published on Thursday, May 2, 2019 • Updated on Wednesday, August 28, 2019

Translated to: Español, 한국어, 中文, Pусский, 日本語

Table of contents

• How the Lighthouse cross-origin destination audit fails
• How to improve your site’s performance and prevent security vulnerabilities
• Resources

When you link to a page on another site using the target="_blank" attribute, you can expose your site to performance and security issues:

• The other page may run on the same process as your page. If the other page is running a lot of JavaScript, your page’s performance may suffer.
• The other page can access your window object with the window.opener property. This may allow the other page to redirect your page to a malicious URL.

Adding rel="noopener" or rel="noreferrer" to your target="_blank" links avoids these issues.

As of Chromium version 88, anchors with target="_blank" automatically get noopener behavior by default. Explicit specification of rel="noopener" helps protect users of legacy browsers including Edge Legacy and Internet Explorer.

# How the Lighthouse cross-origin destination audit fails

Lighthouse flags unsafe links to cross-origin destinations:

Lighthouse uses the following process to identify links as unsafe:

1. Gather all <a> tags that contain the target="_blank" attribute but not the rel="noopener" or rel="noreferrer" attributes.
2. Filter out any same-host links.

Because Lighthouse filters out same-host links, there’s an edge case you should be aware of if you’re working on a large site: if one page contains a target="_blank" link to another page on your site without using rel="noopener", the performance implications of this audit still apply. However, you won’t see these links in your Lighthouse results.

Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.

# How to improve your site’s performance and prevent security vulnerabilities

Add rel="noopener" or rel="noreferrer" to each link identified in your Lighthouse report. In general, when you use target="_blank", always add rel="noopener" or rel="noreferrer":

<a href="https://examplepetstore.com" target="_blank" rel="noopener">
Example Pet Store
</a>

• rel="noopener" prevents the new page from being able to access the window. opener property and ensures it runs in a separate process.
• rel="noreferrer" has the same effect but also prevents the Referer header from being sent to the new page. See Link type «noreferrer».

See the Share cross-origin resources safely post for more information.

# Resources

• Source code for Links to cross-origin destinations are unsafe audit
• Share cross-origin resources safely
• Site isolation for web developers

Updated on Wednesday, August 28, 2019 • Improve article

Nofollow, noreferrer и noopener | За кулисами

HTML имеет различные способы для поисковых систем и веб-браузеров для понимания данных. Здесь мы покажем, как использовать nofollow, noreferrer и noopener в качестве значений атрибута rel.

Введение в nofollow, noreferrer и noopener

HTML-атрибут rel используется для указания связи между документами. В некоторых случаях правильное использование его значений может быть чрезвычайно полезным.

В этом посте более подробно объясняются значения атрибутов HTML nofollow, noreferrer и noopener rel, а также приводятся сценарии, в которых их использование необходимо рассмотреть и принять. Также упоминаются некоторые связанные функции WordPress.

Поддержите нас

Пожалуйста, поддержите За кулисами , используя эти ссылки при совершении покупок в Интернете. Использование этих ссылок для перехода в эти магазины не требует дополнительных затрат для вас, но мы получаем небольшую комиссию каждый раз, когда они используются.

Вы также можете выразить свою поддержку, сделав пожертвование.

Amazon.com

BangGood

Пожертвовать через PayPal

• Получите LG 22MK430H-B 21,5-дюймовый монитор Full HD от Amazon. com
• Получите механическую игровую клавиатуру Corsair K95 RGB Platinum XT у Amazon.com

Атрибут ссылки HTML rel

Rel используются внутри тегов HTML и для указания связи между текущим документом и другим (связанным) документом.

Типичный пример использования тега rel атрибут будет:

  rel="stylesheet"  type="text/css" href="stylesheet.css"> 

Распространенным примером использования атрибута (он же гиперссылка) rel может быть:

  rel="noopener"  target="_blank">За кулисами 

В WordPress теги и их атрибуты rel в основном настраиваются ядром WordPress, плагинами и/или (дочерними) файлами тем и скрытно находятся внутри раздел веб-страницы.

, с другой стороны, используются для создания гиперссылок и обычно используются внутри раздела веб-страницы. Обычно они добавляются вручную с помощью HTML-редактора. В WordPress область контента будет содержать большинство гиперссылок.

Поскольку этот пост посвящен значениям атрибутов nofollow, noreferrer и noopener

 войти 

  rel="nofollow noreferrer noopener"  >За кулисами 

  pdf" target="_blank" rel="noopener">Просмотреть PDF
 

 Просмотреть PDF