使用場景：最近項目中使用一個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"屬性，那么你就讓用戶暴露在一個非常簡單的釣魚攻擊之下。