a標簽 target="_blank" 需要注意這些

網頁里的 a 標簽默認在當前窗口跳轉鏈接地址，如果需要在新窗口打開，需要給 a 標簽添加一個 target="_blank" 屬性。

<a href="http://www.baidu.com" target="_blank">去百度</a>

 

安全隱患

如果只是加上 target="_blank" ，打開新窗口后，新頁面能通過 window.opener 獲取到來源頁面的 window 對象，即使跨域也一樣。雖然跨域的頁面對於這個對象的屬性訪問有所限制，但還是有漏網之魚。

這是某網頁打開新窗口的頁面控制台輸出結果。可以看到 window.opener 的一些屬性，某些屬性的訪問被攔截，是因為跨域安全策略的限制。

即便如此，還是給一些操作留下可乘之機。比如修改 window.opener.location 的值，指向另外一個地址。你想想看，剛剛還是在某個網站瀏覽，隨后打開了新窗口，結果這個新窗口神不知鬼不覺地把原來的網頁地址改了。這個可以用來做什么？釣魚啊！等你回到那個釣魚頁面，已經偽裝成登錄頁，你可能就稀里糊塗把賬號密碼輸進去了。

還有一種玩法，如果你處於登錄狀態，有些操作可能只是發送一個 GET 請求就完事了。通過修改地址，就執行了非你本意的操作，其實就是 CSRF 攻擊。

 

 

性能問題

 

除了安全隱患外，還有可能造成性能問題。通過 target="_blank" 打開的新窗口，跟原來的頁面窗口共用一個進程。如果這個新頁面執行了一大堆性能不好的 JavaScript 代碼，占用了大量系統資源，那你原來的頁面也會受到池魚之殃。

 

 

解決方案

 

盡量不使用 target="_blank" ，如果一定要用，需要加上 rel="noopener" 或者 rel="noreferrer"。這樣新窗口的 window.opener 就是 null 了，而且會讓新窗口運行在獨立的進程里，不會拖累原來頁面的進程。當然，有些瀏覽器對性能做了優化，即使不加這個屬性，新窗口也會在獨立進程打開。不過為了安全考慮，還是加上吧。 

<div>這里是前一個頁面</div>
<a href="http://www.baidu.com" target="_blank" rel="noreferrer">去百度</a>

 

另外，對於通過 window.open 的方式打開的新頁面，可以這樣做：

var yourWindow = window.open();
yourWindow.opener = null;
yourWindow.location = "http://someurl.here";
yourWindow.target = "_blank";

 

轉載： 網頁外鏈用了 target="_blank"，結果悲劇了