一個圖片酣栈，本站或者外站，都要想辦法拿到
前言介紹
近期在一個項目中志衣，需要引用大量外部網(wǎng)站的圖片屯援，竟意外的發(fā)現(xiàn)在生成環(huán)境中沒有問題猛们，但在本地的開發(fā)環(huán)境下，有部分圖片無法顯示狞洋。于是就開啟了跨域圖片顯示的斗爭中弯淘。
名詞解釋
什么是引用策略（Referrer Policy）？引用策略就是從一個文檔發(fā)出請求時徘铝，是否在請求頭部定義 Referrer 的設(shè)置耳胎。
目前很多網(wǎng)站的防盜鏈機(jī)制都是用頭部定義 Referrer 來判斷是否是盜鏈。其實這個很容易破解惕它，自己在請求時加上 Referrer 頭部就行怕午。
在哪些情況下會設(shè)置引用頭呢？一般來說淹魄，加載一個 HTML 頁面之后郁惜，本 HTML 頁面里的 JavaScript 文件，CSS 文件甲锡，畫面文件都會設(shè)置 Referrer兆蕉。然后，點擊這個 HTML 頁面里的鏈接缤沦，跳轉(zhuǎn)其它畫面時虎韵，也會設(shè)置 Referrer。
Referrer Policy 的值
- 空字符串
- no-referrer
- no-referrer-when-downgrade
- same-origin
- origin
- strict-origin
- origin-when-cross-origin
- strict-origin-when-cross-origin
- unsafe-url
空字符串
默認(rèn)值：一般瀏覽器的默認(rèn)值是 no-referrer-when-downgrade
no-referrer
所有請求不發(fā)送 referrer缸废。
no-referrer-when-downgrade
當(dāng)請求安全級別下降時不發(fā)送 referrer包蓝。目前，只有一種情況會發(fā)生安全級別下降企量，即從 HTTPS 到 HTTP测萎。HTTPS 到 HTTP 的資源引用和鏈接跳轉(zhuǎn)都不會發(fā)送 referrer。
same-origin
對于同源的鏈接和引用届巩，會發(fā)送referrer硅瞧，其他的不會。
同源的意思是指同一個域名且同一協(xié)議恕汇。
如果設(shè)置成 same-origin腕唧，那么 aaa.com 引用 bbb.com 的資源，不會發(fā)送 referrer瘾英。子域名也不是同一個域名枣接，aaa.com 引用 test.aaa.com 的資源，不會發(fā)送 referrer方咆。
origin
會發(fā)送 referrer月腋，但只會發(fā)送源信息蟀架。源信息包括訪問協(xié)議和域名瓣赂。
strict-origin
這個相當(dāng)于 origin 和 no-referrer-when-downgrade 的 AND 合體榆骚。即在安全級別下降時不發(fā)送 referrer；安全級別未下降時發(fā)送源信息煌集。
注意：這個是新加的標(biāo)準(zhǔn)妓肢，有些瀏覽器可能還不支持。
origin-when-cross-origin
這個相當(dāng)于 origin 和 same-origin 的 OR 合體苫纤。同源的鏈接和引用碉钠，會發(fā)送完全的 referrer 信息；但非同源鏈接和引用時卷拘，只發(fā)送源信息喊废。
strict-origin-when-cross-origin
這個比較復(fù)雜，同源的鏈接和引用栗弟，會發(fā)送 referrer污筷。安全級別下降時不發(fā)送 referrer。其它情況下發(fā)送源信息乍赫。
注意：這個是新加的標(biāo)準(zhǔn)瓣蛀，有些瀏覽器可能還不支持。
unsafe-url
無論是否發(fā)生協(xié)議降級雷厂，無論是本站鏈接還是站外鏈接惋增，統(tǒng)統(tǒng)都發(fā)送 Referrer 信息。正如其名改鲫，這是最寬松而最不安全的策略诈皿。
Referrer Policy 的設(shè)置方法
我們可以用以下方法來設(shè)置引用策略（Referrer Policy）。
- 通過 http 響應(yīng)頭中的 Referrer-Policy 字段
- 通過 meta 標(biāo)簽钩杰，name 為 referrer
- 通過
<a>纫塌、<area>、<img>讲弄、<iframe>措左、<link>元素的referrerpolicy屬性。 - 通過
<a>避除、<area>怎披、<link>元素的rel=noreferrer屬性。
通過 http 響應(yīng)頭中的 Referrer-Policy 字段
Content-Security-Policy: referrer no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|unsafe-url;
Apache 下瓶摆，設(shè)置方法如下：
<IfModule mod_headers.c>
Header set Content-Security-Policy: "referrer=no-referrer"
</IfModule>
通過 meta 標(biāo)簽凉逛，name 為 referrer
<meta name="referrer" content="no-referrer|no-referrer-when-downgrade|origin|origin-when-crossorigin|unsafe-url">
通過標(biāo)簽的 referrer 屬性
<a referrer="no-referrer|origin|unsafe-url">xxx</a>
Referrer 策略還有其他歷史遺留的值
Referrer 策略還有其他歷史遺留的值，不過不建議使用群井。
- never 等價于 no-referrer
- default 等價于 no-referrer-when-downgrade
- always 等價于 unsafe-url
小結(jié)
所以在我當(dāng)前的項目中使用same-origin是最好的選擇了状飞，在其他情況下就根據(jù)實際應(yīng)用場景來進(jìn)行選擇即可
附上個人博客傳送門：https://blog.paddings.cn/2018/07/17/html/Meta-Referrer-Policy/
