使用场景：最近项目中使用一个a标签的 target="__blank "链接跳转 页面，打开一个新的 pdf文件(或者外部的一个网页)，然后在chrome浏览器中快速的滑动的时候，页面偶尔会出现空白现象，这可能是一个浏览器的漏洞，如何解决这个问题，需要对a标记需要target="__blank "的链接中，我们加上rel="nofollow noopener noreferrer" 这个就可以解决这个漏洞了。
比如我现在在本地的页面为 index.html, 然后链接引入了一个外部的页面，比如是http://www.b.com这样的一个链接如下：
// 本地页面 <html lang="en"> <body> <a href="http://www.b.com" target="_blank">http://www.b.com</a> </body> </html> // b.com下的页面 <html lang="en"> <body> <script type="text/javascript"> if (opener) { opener.window.location.href="http://www.danger.com"; } </script> </body> </html>
当我们点击网页中的超链接的时候，打开http://www.b.com页面，就会发现我们的网页很有可能被篡改成为其他的网页，比如为 www.danger.com。
并且在外部打开的网页有本网页的全部控制权，比如可以获取本页面的cookie等信息。甚至在跨域的情况下也是生效的。
因此 对于使用了 target="_blank" 并且跳转到外部链接的超链接，加上 rel="noopener noreferrer" 属性即可，此时外部链接获取到的 opener 为 null。
rel="noopener" 可以确保 window.opener 为 null 在 Chrome 49+ 和 Opera 36，而对于旧版本浏览器和火狐浏览器，可以加上 rel="noreferrer" 更进一步禁用 HTTP 的 Referer 头，或者使用 js 打开新页面。如下js代码：
<div id="btn">test</div> <script type="text/javascript"> const safeOpen = url => { var otherWindow = window.open(); otherWindow.opener = null; otherWindow.location = url; } document.getElementById('btn').onclick = function() { safeOpen('http://wwww.baidu.com'); } </script>
理解 rel="external nofollow noreferrer"
rel = 'nofollow' 的作用是：它是来告诉搜索引擎，不要将该链接计入权重，因为在很多情况下，我们可以将一些不想传递权重的链接进行nofollow处理，比如一些非本站的链接，不想传递权重，但是又需要加在页面中，比如一些 统计代码，备案号链接，供用户查询链接等等这些。
rel = 'external' 的作用是：它告诉搜索引擎，这个链接不是本站链接.
rel = 'external nofollow'的作用就是上面两种属性一起的含义了，可以理解为：这个链接非本站链接，不要爬取也不要传递权重。
因此对于SEO角度来讲，可以有效的减少蜘蛛爬行的流失。
rel="nofollow noopener noreferrer" 超链接 target="_blank" 要增加 rel="nofollow noopener noreferrer" 来堵住钓鱼安全漏洞。
如果你在链接上使用 target="_blank"属性，并且不加上rel="noopener"属性，那么你就让用户暴露在一个非常简单的钓鱼攻击之下。