點擊a連接打開第三方頁面變成下載頁面問題

場景

公司官網上須要點擊一個連接打開新標籤頁到第三方網站，可是總會出現第一次能打開，後面點擊都是下載頁面。

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

猜測：通過查閱資料後，我開始以爲瀏覽器認爲這個網頁不是html的，因而我在那個網址後面加了個查詢參數&.html，確實我在本地測試時每次都能打開，不會下載，可是很不幸的是一上生產環境雖然不會下載，可是打開的頁面倒是空白的，找不到這個頁面；失敗了，只能再找緣由

尋找爲何會下載？

點擊連接到第三方網站時看到請求的第三方接口:

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

第二次之後響應的請求頭Content-Type：octet-stream

瀏覽器解析到octet-stream會將此頁面認爲是下載的文件，就不會打開頁面，而是下載頁面

尋找爲何第三方會改變響應頭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，就認爲這是不安全的，不給對方瀏覽，爲何呢，由於這個源頁面出現了問題，責任在於這個第三方網站，它這樣限制至關於提早甩鍋吧（由於頗有可能其餘技術人員經過第三方網站竊取源頁面的信息，因此這個第三方比較機智，不給這些黑客下手機會）

終於解決了