网页链接里的 noopener、noreferrer 和 nofollow

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

烦恼的四季豆 · Compilation error for ...· 3 天前 ·

爽快的绿豆 · CMake学习笔记· 22 小时前 ·

爱吹牛的青蛙 · 《关于深化统计管理体制改革提高统计数据真实性 ...· 3 月前 ·

眼睛小的排球 · The New NetBackup ...· 7 月前 ·

含蓄的汽水 · 小马软件库4.2.apk手机版下载-小马软件 ...· 1 年前 ·

温暖的键盘 · NGC宣布服务与收费调整 ...· 1 年前 ·

小眼睛的火龙果 · 宝马电动车的非典型“反攻”_腾讯新闻· 1 年前 ·

之前在一篇帖子中看到了一个名词【阻断权重传递】，进而去了解一下这个名词。

阅读相关资料的过程中，收集了3个 no 开头的关键词( noopener 、 noreferrer 和 nofollow )，并且作为相似内容整理成这篇笔记。

太长不看版：


    noopener

: 使用


    target="_blank"

所打开的页面，将无法获取


    window.opener

对象。


    noreferrer

: 使打开的页面无法获取


    document.referrer

信息。


    nofollow

: 表明对该链接不认可，不传递权重。

如果有兴趣可以接着看下去

先顺着开头的 阻断权重传递 聊聊叭，老前端都知道，如果要做SEO，就会需要投放大量的站外链接到自己的站点，作为引流以及获得权重。在开发者社群中，也会相互交换友链来达到这个目的。
但是在一些比较大型的社交平台中，他们并不希望这些链接被搜索引擎的 spider 所爬取，并且将权重传递给那些可能是低质量/违法的页面。

开头那篇帖子中提到的 “安全中心” 就是为了达到上述目的，我们可以从案例 “知乎” 当中看到 UGC 中的外链其实是这样的：

<a href="http://link.zhihu.com/?target=https%3A//yogwang.site" class=" wrap external" target="_blank" rel="nofollow noreferrer" data-za-detail-view-id="1234">一个测试外链</a>

我们添加的外链其实已经变成了指向到 “安全中心” 页面，彻底就封死了权重传递的问题，并且避免了直接跳转链接导致的意外的安全问题，比如说钓鱼网站以及不合规内容的免责。

🔖 nofollow

告知搜索引擎这是一个不被认可的链接，并且不想把权重传递给此页面。 ( P.S. 其实就算使用了 nofollow 其实也并不是完全没有排名影响，具体可以查看这篇文章其中有举了例子)

🔖 noreferrer

这个值其实已经在上边的 “安全中心” 链接当中看到了这个属性的出现，起到的目的也就是为了去除头部中的 referrer (来源)信息，说是另外限制了部分 window.opener 的访问权限，但是我感觉和没有限制一样。

🔖 noopener

声明在新页面中打开页面，并且不授权新页面对于源页面的访问权限，但是仍提供 referrer 头，所以一般来说会和 noreferrer 合用。

因为通过 target="_blank" 打开的新页面可以通过修改 window.opener 的部分属性来造成安全问题。

Using the window.opener.location it navigates to the new site – say, a login form emulating the Facebook login screen with a message: “Your previous Facebook session expired. Please log in again to continue using Facebook”.
使用 window.opener.location 导航到新站点 ———— 比如说，一个模拟 Facebook 登录屏幕的登录表单，其中包含一条消息：“您之前的 Facebook 会话已过期。请重新登录以继续使用 Facebook”。

Explained: noopener, noreferrer, and nofollow Values

在 Chrome 78 最近的几个版本，如果A、B页面跨域，A页面中打开B页面，在B页面使用 console.log 在控制台打印 window.opener 会报跨域的错误。
window.opener - Web API 接口参考 | MDN

并且我发现在 Chrome 93 中打开新页面中输出 window.opener 为 null ，即使我没有使用 noopener ，需要特意声明 rel="opener" 才可以获取 opener 对象，但是我还没有找到明确的变更日志，只在后续的查阅的过程中找到一个疑似的工作组 PR。

Make target=_blank imply noopener; support opener by annevk · Pull Request #4330 · whatwg/html

参考资料

HTML attribute: rel - HTML: HyperText Markup Language | MDN
Link types: noopener - HTML: HyperText Markup Language | MDN

What Is a Nofollow Link? Here’s A Simple Plain English Answer
Explained: noopener, noreferrer, and nofollow Values - Point Jupiter
外链用了 target=”_blank” 结果悲剧了 | 1024译站
 The Hidden Dangers You Have Never Noticed: target = “_blank” and “opener” - TutorialDocs
When to use target=”_blank” | CSS-Tricks
About rel=noopener

🔖 nofollow

🔖 noreferrer

🔖 noopener

参考资料

Archive