背景:

最近在做一個 vue 項目，項目中的一些圖片來自外網(wǎng)，動態(tài)的賦值給src屬性,結(jié)果加載不出來，如果拿上地址直接給src屬性，可以加載出來, 查看控制臺的network，錯誤信息為 403(forbidden)

解決方案:

在index.html的head標(biāo)簽內(nèi)加上一個meta標(biāo)簽

<meta name="referrer" content="no-referrer"/>

Referrer Policy(引用策略)

引用策略就是從一個文檔發(fā)出請求時，是否在請求頭部定義 Referrer 的設(shè)置。

referrer 的值

1. 空字符串
2. no-referrer
3. no-referrer-when-downgrade
4. same-origin
5. origin
6. strict-origin
7. origin-when-cross-origin
8. strict-origin-when-cross-origin
9. 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，其他的不會。
• 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 信息。正如其名，這是最寬松而最不安全的策略。

設(shè)置方法

• 通過 http 響應(yīng)頭中的 Referrer-Policy 字段
• 通過 meta 標(biāo)簽，name 為 referrer(本次使用)
• 通過<a>、<area>、<img>、<iframe>、<link>元素的 referrerpolicy 屬性。

參考: Web 頁面 Meta 的 Referrer Policy