轉載網址：https://juejin.cn/post/6844903879042138120

場景

公司官網上需要點選一個連結開啟新標籤頁到第三方網站，但是總會出現第一次能開啟，後面點選都是下載頁面。

<a href="http://******/stock?plate=szse&stockCode=002148" target="_blank">公告</a>
複製程式碼

猜想：經過查閱資料後，我開始覺得瀏覽器認為這個網頁不是html的，於是我在那個網址後面加了個查詢引數&.html，確實我在本地測試時每次都能開啟，不會下載，但是很不幸的是一上生產環境雖然不會下載，但是開啟的頁面卻是空白的，找不到這個頁面；失敗了，只能再找原因

尋找為什麼會下載？

點選連結到第三方網站時看到請求的第三方介面:

第一次響應的請求頭Content-Type：text/html；

尋找為什麼第三方會改變響應頭Content-Type？

嘗試了很多，在https的網站上點選這個連結，不會出現下載的情況；而在http的網站上就會出現以上情況，不僅是a連結，連iframe也會下載。

猜想：我想是不是這個第三方網站認為http不安全，不允許連結他們網站，可那怎麼解決啊，這個是人家第三方限制的，我很被動啊。

就在這時，我們主管發給我一個例子，證明我的猜想不太對，那個例子就是有一個http的官網，也是連結到同一個第三方網址，卻沒有下載，那個網址的a連結的寫法就是多了一個屬性rel="noreferrer"；經過測試後，果真解決了會下載的問題，然後去看看這個屬性

a標籤的rel屬性noreferrer的作用

當你瀏覽一個頁面點選一個a標籤連結<a href="www.baidu.com" target="_blank">跳轉到另一個頁面時，

在新開啟的頁面（baidu）中可以通過window.opener獲取到源頁面的部分控制權，即使新開啟的頁面是跨域的也照樣可以（例如 location 就不存在跨域問題）， 那麼你就讓使用者暴露在一個非常簡單的釣魚攻擊之下。 第三方網站可以通過window.opener來操作源頁面，會有很大的安全隱患，比如：

if (window.opener) {
    window.opener.location = "**網站地址**?referrer="+document.referrer;
}
複製程式碼

第三方網站就可以更改源頁面的地址源，你本來瀏覽的是自己的網站，點選了這個連結後，第三方的一個操作，你的頁面就變成了第三方給你設定的釣魚網站了。

所以為了限制 window.opener的訪問行為，原始頁面需要在每個使用了target="_blank"的連結中加上一個rel="noopener"屬性。 rel=noreferrer表示 禁用HTTP頭部的Referer屬性。 然而，火狐不支援這個屬性值，所以實際上你要用 rel="noopener noreferrer"來完整覆蓋

why：我理解為什麼我第一次點選是開啟，後面就變成下載了，可能第三方網站做了安全限制，如果第三方能拿到源頁面的window.opener，就認為這是不安全的，不給對方瀏覽，為什麼呢，因為這個源頁面出現了問題，責任在於這個第三方網站，它這樣限制相當於提前甩鍋吧（因為很有可能其他技術人員通過第三方網站竊取源頁面的資訊，所以這個第三方比較機智，不給這些黑客下手機會）

終於解決了