Meta 的 referrer 干什么用

背景:

最近在做一个 vue 项目，项目中的一些图片来自外网，动态的赋值给src属性,结果加载不出来，如果拿上地址直接给src属性，可以加载出来, 查看控制台的network，错误信息为 403(forbidden)

解决方案:

在index.html的head标签内加上一个meta标签

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

Referrer Policy(引用策略)

引用策略就是从一个文档发出请求时，是否在请求头部定义 Referrer 的设置。

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

• 默认值： 一般浏览器的默认值是 no-referrer-when-downgrade
• no-referrer： 所有请求不发送 referrer
• no-referrer-when-downgrade： 当请求安全级别下降时不发送 referrer。目前，只有一种情况会发生安全级别下降，即从 HTTPS 到 HTTP。HTTPS 到 HTTP 的资源引用和链接跳转都不会发送 referrer。
• same-origin：对于同源的链接和引用，会发送referrer，其他的不会。
• origin：会发送 referrer，但只会发送源信息。源信息包括访问协议和域名。
• strict-origin：这个相当于 origin 和 no-referrer-when-downgrade 的 AND 合体。即在安全级别下降时不发送 referrer；安全级别未下降时发送源信息。
  注意：这个是新加的标准，有些浏览器可能还不支持。
• origin-when-cross-origin：这个相当于 origin 和 same-origin 的 OR 合体。同源的链接和引用，会发送完全的 referrer 信息；但非同源链接和引用时，只发送源信息。
• strict-origin-when-cross-origin：这个比较复杂，同源的链接和引用，会发送 referrer。安全级别下降时不发送 referrer。其它情况下发送源信息。注意：这个是新加的标准，有些浏览器可能还不支持。
• unsafe-url：无论是否发生协议降级，无论是本站链接还是站外链接，统统都发送 Referrer 信息。正如其名，这是最宽松而最不安全的策略。

设置方法

• 通过 http 响应头中的 Referrer-Policy 字段
• 通过 meta 标签，name 为 referrer(本次使用)
• 通过<a>、<area>、<img>、<iframe>、<link>元素的 referrerpolicy 属性。

参考: Web 页面 Meta 的 Referrer Policy