共计 1166 个字符，预计需要花费 3 分钟才能阅读完成。
一、referer 是什么
referer：引用页。HTTP 请求头信息中，referer 用于提供访问来源的信息，客户端发送请求的时候，自主决定是否加上该字段。服务器一般使用 referer 识别访问来源，可能以此进行统计分析、日志记录以及缓存优化等。
该字段的正确拼写是 referrer.
二、referer 的应用
- 图片防盗：只有自家网站才能显示图片资源，外部网站加载图片报错，就可以基于 referer 字段去实现
- 流量记录: 比如在不同网站投放了广告，想知道哪个网站对自己的流量贡献最大，可以通过 referer 做统计，不希望暴露用户所在的原始网址，可以只暴露域名。
三、referer Policy 和 referer
referer 携带什么是由 referer Policy 决定的
（1）no-referrer-when-downgrade（浏览器默认）
如果从 HTTPS 网址链接到 HTTP 网址，不发送 Referer 字段，其他情况发送（包括 HTTP 网址链接到 HTTP 网址）。这是浏览器的默认行为。
（2）no-referrer
不发送 Referer 字段。
（3）same-origin
链接到同源网址（协议 + 域名 + 端口 都相同）时发送，否则不发送。注意，https://foo.com 链接到 http://foo.com 也属于跨域。
（4）origin
Referer 字段一律只发送源信息（协议 + 域名 + 端口），不管是否跨域。
（5）strict-origin
如果从 HTTPS 网址链接到 HTTP 网址，不发送 Referer 字段，其他情况只发送源信息。
（6）origin-when-cross-origin
同源时，发送完整的 Referer 字段，跨域时发送源信息。
（7）strict-origin-when-cross-origin
同源时，发送完整的 Referer 字段；跨域时，如果 HTTPS 网址链接到 HTTP 网址，不发送 Referer 字段，否则发送源信息。
（8）unsafe-url
Referer 字段包含源信息、路径和查询字符串，不包含锚点、用户名和密码。
四、设置 referer policy
(1) <meta> 标签
<meta name="referrer" content="origin">let meta = document.createElement('meta');
meta.setAttribute('name', 'referrer');
meta.setAttribute('content', 'origin');
document.head.appendChild(meta);这种做法会作用于所有的请求
(2) referrerpolicy属性
<a>、<area>、<img>、<iframe>和 <link> 标签，可以设置 referrerpolicy 属性。
只作用于当前请求，可用于图片反防盗链