HTTP Referer 和 Referrer Policy

1、 referer是什么

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

2、 referer的应用

1. 图片防盗：只有自家网站才能显示图片资源，外部网站加载图片报错，就能够基于referer字段去实现
2. 流量记录: 好比在不一样网站投放了广告，想知道哪一个网站对本身的流量贡献最大，能够经过referer作统计，不但愿暴露用户所在的原始网址，能够只暴露域名。

3、 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字段包含源信息、路径和查询字符串，不包含锚点、用户名和密码。

4、 设置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 属性。

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