关于前端:Referrer-Policy介绍

referer 的写法是错的，正确的是 referrer。大略是晚期 http 标准的拼写错误，而后为了放弃向下兼容，就一误再误了。

一、九种 policy

enum ReferrerPolicy {
“”,
“no-referrer”,
“no-referrer-when-downgrade”,
“same-origin”,
“origin”,
“strict-origin”,
“origin-when-cross-origin”,
“strict-origin-when-cross-origin”,
“unsafe-url”
};
1 no-referrer
示意 http 申请的申请头没有 referer 字段

2 no-referrer-when-downgrade（默认值）
如果没指定其余 policy，则这个就是浏览器的默认值。即以后的 referer 就是以后页面的地址（不包含锚点 #）。
如果存在降级的状况，则 referer 不会被发送，也就是申请头没有 referer 字段，比方 https->http 的状况。

3 same-origin
如果申请是同源，即没有跨域，则 referer 字段会被发送。
如果申请存在跨域，则 referer 字段不会被发送。

4 origin
不论是否存在跨域或者降级的状况，referer 字段都会被发送，但不会带上门路等信息，只有域名和端口。
比方页面地址是 http://localhost:3000/referer.html，则 referer 则是 http://localhost:3000/

5 strict-origin
在 policy=origin 的要求内，减少了在降级（https->http）的状况下，referer 不会被发送。

6 origin-when-cross-origin
如果是同源的申请，则 referer 字段都会被发送，且 referer 的值是以后页面的地址（http://localhost:3000/referer.html）。
如果是跨域的申请，referer 也会被发送，但此时 referer 的值只有域名 + 端口（http://localhost:3000/），也就是跟 origin 一样。

7 strict-origin-when-cross-origin
在 policy=origin-when-cross-origin 的要求内，减少了在降级（https->http）的状况下，referer 不会被发送。

8 unsafe-url
不论是否同源或跨域，referer 都会被发送。

9 空字符串
如果 referer 是空字符串，则会依据设定的算法回退到默认值，即 no-referrer-when-downgrade

详情可参考：https://w3c.github.io/webapps…

二、referer 什么时候不发送
在浏览器地址栏，间接输出或者点击标签的时候，referer 就不会被发送。其余形式都会发送。
比方加载页面其余资源，如 js，css 和 img 等资源，又或者 form 表单，或者点击标签。

可通过 js 来获取 referer 的值：document.referrer。
但想通过 js 来扭转 http 申请头的 referer 是不行的，尽管能扭转 document.referrer 的值，但申请头的 referer 字段仍然不会被扭转。

delete window.document.referrer;
window.document.__defineGetter__(‘referrer’, function () {
return “http://referer.com”;
});
console.log(window.document.referrer) // http://referer.com
// 须要留神：此时 http 申请头的 referer 是没有被扭转的
三、哪些 html 标签可设置 referer 的 policy
1 meta
可通过 meta 来设置下面提到的九种 policy
如：<meta name=”referrer” content=”no-referrer”>

2 a
可通过 ref 属性来设置。
如：xxx

3 img
可通过 referrerPolicy 属性来设置，如：

4 iframe
可通过 referrerPolicy 属性来设置，如：<iframe src=”http://xxx.com” referrerPolicy=”no-referrer”></iframe>

下面几种形式，meta 是网站级别的，相当于父级，一旦设置，html 页面下的 a 和 img 等都会继承 referer 策略。
但可通过独自设置 a 和 img 等来实现不同的 referer 策略。

网上说貌似 form 表单也能够设置 referer，但看了下 w3c 文档，貌似没有。
而 link 标签的 referrerpolicy 属性则属于试验阶段的 API。referer的写法是错的，正确的是referrer。大略是晚期 http 标准的拼写错误，而后为了放弃向下兼容，就一误再误了。

enum ReferrerPolicy {"","no-referrer","no-referrer-when-downgrade","same-origin","origin","strict-origin","origin-when-cross-origin","strict-origin-when-cross-origin","unsafe-url"};

示意 http 申请的申请头没有 referer 字段

如果没指定其余 policy，则这个就是浏览器的默认值。即以后的referer 就是以后页面的地址（不包含锚点 #）。
如果存在降级的状况，则 referer 不会被发送，也就是申请头没有 referer 字段，比方 https->http 的状况。

如果申请是同源，即没有跨域，则 referer 字段会被发送。
如果申请存在跨域，则 referer 字段不会被发送。

不论是否存在跨域或者降级的状况，referer字段都会被发送，但不会带上门路等信息，只有域名和端口。
比方页面地址是 http://localhost:3000/referer.html，则referer 则是http://localhost:3000/

在 policy=origin 的要求内，减少了在降级（https->http）的状况下，referer不会被发送。

如果是同源的申请，则 referer 字段都会被发送，且 referer 的值是以后页面的地址（http://localhost:3000/referer.html）。
如果是跨域的申请，referer也会被发送，但此时 referer 的值只有域名 + 端口（http://localhost:3000/），也就是跟 origin 一样。

在 policy=origin-when-cross-origin 的要求内，减少了在降级（https->http）的状况下，referer不会被发送。

不论是否同源或跨域，referer都会被发送。

如果 referer 是空字符串，则会依据设定的算法回退到默认值，即no-referrer-when-downgrade

详情可参考：https://w3c.github.io/webappsec-referrer-policy/

在浏览器地址栏，间接输出或者点击标签的时候，referer就不会被发送。其余形式都会发送。
比方加载页面其余资源，如 js，css 和img等资源，又或者 form 表单，或者点击 <a> 标签。

可通过 js 来获取 referer 的值：document.referrer。
但想通过 js 来扭转 http 申请头的 referer 是不行的，尽管能扭转 document.referrer 的值，但申请头的 referer 字段仍然不会被扭转。

delete window.document.referrer;
window.document.__defineGetter__('referrer', function () {return "http://referer.com";});
console.log(window.document.referrer) // http://referer.com
// 须要留神：此时 http 申请头的 referer 是没有被扭转的

可通过 meta 来设置下面提到的九种 policy
如：<meta name="referrer" content="no-referrer">

可通过 ref 属性来设置。
如：<a rel="noreferrer" href="http://xxx.html">xxx</a>

可通过 referrerPolicy 属性来设置，如：<img src="http://xx.png" referrerPolicy="no-refereer">

可通过 referrerPolicy 属性来设置，如：<iframe src="http://xxx.com" referrerPolicy="no-referrer"></iframe>

下面几种形式，meta是网站级别的，相当于父级，一旦设置，html页面下的 a 和img等都会继承 referer 策略。
但可通过独自设置 a 和img等来实现不同的 referer 策略。

网上说貌似 form 表单也能够设置 referer，但看了下 w3c 文档，貌似没有。
而 link 标签的 referrerpolicy 属性则属于试验阶段的 API。