轉載網址：https://juejin.cn/post/6844903879042138120
場景
公司官網上需要點擊一個鏈接打開新標簽頁到第三方網站，但是總會出現第一次能打開，后面點擊都是下載頁面。
<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，就認為這是不安全的，不給對方瀏覽，為什么呢，因為這個源頁面出現了問題，責任在於這個第三方網站，它這樣限制相當於提前甩鍋吧（因為很有可能其他技術人員通過第三方網站竊取源頁面的信息，所以這個第三方比較機智，不給這些黑客下手機會）
終於解決了