HTTP Referer 和 Referrer Policy

一、 referer是什么

referer：引用页。HTTP请求头信息中，referer用于提供访问来源的信息，客户端发送请求的时候，自主决定是否加上该字段。服务器一般使用referer识别访问来源，可能以此进行统计分析、日志记录以及缓存优化等。
该字段的正确拼写是referrer.

二、 referer的应用

1. 图片防盗：只有自家网站才能显示图片资源，外部网站加载图片报错，就可以基于referer字段去实现
2. 流量记录: 比如在不同网站投放了广告，想知道哪个网站对自己的流量贡献最大，可以通过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 属性。

只作用于当前请求，可用于图片反防盗链