Copyright notice: This article is an original article and follows
CC 4.0 BY-NC-ND
Copyright agreement. If you want to repost this article, please attach the original source link and this statement.
Source link:
https://www.v2know.com/MainPage/PreView/134
简单来讲，这样做是为了防止钓鱼网站[1]。
你的页面如果不加上这个rel="noopener"会被人链接到别的网站，而noreferrer是一些旧浏览器的规范。
一般情况下，这两个合并使用，例如：
<a href="www.baidu.com" target="_blank" rel="noopener noreferrer"></a>
原理
网页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"
来标记外链。
参考文档：