关于html的a标签的target=__blank 的安全漏洞问题
使用場景：最近項目中使用一個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"屬性，那么你就讓用戶暴露在一個非常簡單的釣魚攻擊之下。
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的关于html的a标签的target=__blank 的安全漏洞问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于Swift4.0 Method Sw
- 下一篇： python大佬养成计划----HTML