關於html的a標籤的target="__blank "的安全漏洞問題

龍恩0707發表於2018-09-26
HTML

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

相關文章