在a标签里面增加rel="noopener noreferrer"有什么用?

| Web Design | 3k+ Reads

Copyright Notice: This article is an original work licensed under the CC 4.0 BY-NC-ND license. If you wish to repost this article, please include the original source link and this copyright notice.
Source link: https://v2know.com/article/134

简单来讲，这样做是为了防止钓鱼网站[1]。

你的页面如果不加上这个rel="noopener"会被人链接到别的网站，而noreferrer是一些旧浏览器的规范。

一般情况下，这两个合并使用，例如：

<a href="www.baidu.com" target="_blank" rel="noopener noreferrer"></a>

 

原理

[2]

网页A：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
      <a href="window_open.html" target="_blank" >test</a>
  </body>
</html>

网页B：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
      <script type="text/javascript">
            window.opener.location.href = "https://www.baidu.com"
      </script>
  </body>
</html>

从网页A跳到网页B，你不会跳到网页B，你会跳到百度。

是的，我们利用了window.opener的权限让你实现了跳转，这是老浏览器的一个BUG[3]，现在用rel="noopener"来拒绝opener权限，

旧的浏览器，可以使用 rel=noreferrer，它不仅禁用了 window.opener，后一个页面也无法获取到 referrer，

使用 rel=noreferrer 可以禁用HTTP头部的Referer属性。

另外，还可以利用 js 来打开新的页面，之后将 opener 置为 null 来完成这个功能[4]。

需要注意的一点：

绝对不要在内部链接上使用rel= " noreferrer "属性，它会打乱你的谷歌分析报告[5]。

因为这个属性特性是，不让其他站点知道您正在链接到它。

举个例子，知乎里面的外链通常会被加上noreferrer和nofollow，这两个的作用分别是

①noreferrer是为了不分散网站权重，声明该外链的内容非本站内容。

②nofollow让百度蜘蛛不要对这个外链进行探索。

一般我们给a标签增加

target="_blank" rel="nofollow noreferrer" 

或者

target="_blank" rel="nofollow noreferrer noopener" 

来标记外链。

参考文档：

[1] rel="noopener noreferrer"

[2] a标签使用rel=noopener

[3] 聊聊 rel=noopener

[4] rel=noopener 新特性

[5] rel = " noreferrer "是什么?

This article was last edited at