共计 3324 个字符，预计需要花费 9 分钟才能阅读完成。
背景
HTTP 中 Referer 字段在工作中或者并不会吸引你的留神，暗藏在 Network 的申请之下，然而却有着十分重要的作用。平时你肯定会遇到一些问题须要去排查，如果这个问题在你排查齐全部代码后，仍然没有解决，这个时候你会怎么办？此时咱们就须要将排查问题的角度转换一下，切换到 HTTP 协定上。
最近工作当中也碰到了与此相关的一些问题，借此机会也同时做个记录和总结。HTTP 协定整体蕴含内容十分多，本次咱们只把其中的 Referer 字段拿进去和大家具体说一下。
HTTP Referer
Referer 是什么？
HTTP Referer 是 HTTP 表头的一个字段，用来示意以后网页是来源于哪里，采纳的格局是 URL。咱们通过这个 HTTP Referer，能够查到访客的起源。
能够通过 Network 面板看到，页面拜访及资源申请的 Request Headers 申请头信息里有一个 Referer 字段，用来标记起源的 URL。
有同学可能会留神到 Referer“仿佛”拼写有误，应该是“Referrer” 才对，这其实是个历史起因，在晚期 HTTP 标准当中就存在的拼写错误，前面为了向下兼容，所以一误再误。
拼写错误只有 Request Headers 的“Referer”，在其余中央比方 General Headers、JavaScript 及 DOM 上，都是正确的拼写。
General Headers：
// javascript
document.referrer
// DOM
查看链接
复制代码
到此大家应该对 Referer 有了一个大略的理解，那么 Referer 字段在什么条件下会展现，以及如何去管制 Referer 返回的具体内容呢？答案就在 Referrer-Policy 当中，上面就带大家具体讲一下 Referrer-Policy 策略。
Referrer-Policy 策略
有哪些策略？
Referrer-Policy: no-referrer
顾名思义，这个策略示意不发送 Referer 信息。
工作中理论应用的场景：
在双品牌“乐彩云”推广中为升高双域名跳转革新老本，运维层面在 Nginx 增加了一个规定，若拜访链接（例如 news.zcygov.cn）的 Referer 蕴含 lecaiyun.com 域名，则会强制将拜访链接的域名变更为 lecaiyun.com，实现链接跳转对立。
若局部域名不须要走这一套逻辑，不携带 Referer 头信息，则须要指定 Referrer-Policy 策略为 no-referrer。
Referrer-Policy: no-referrer-when-downgrade
如果从 HTTPS 网址链接到 HTTP 网址，不发送 Referer 字段，其余状况发送（包含 HTTP 网址链接到 HTTP 网址）。
此规定原先是大多数浏览器的默认策略，当初随着隐衷安全性的要求变高之后，浏览器将默认规定变更成了 strict-origin-when-cross-origin。
Referrer-Policy: origin
Referer 字段一律只发送源信息（协定 + 域名 + 端口），不论是否跨域。
Referrer-Policy: origin-when-cross-origin
同源时，发送残缺的 Referer 字段，跨域时发送源信息。
Referrer-Policy: same-origin
链接到同源网址（协定 + 域名 + 端口 都雷同）时发送，否则不发送。留神，foo.com 链接到 foo.com 也属于跨域，因为两者的协定不同。
Referrer-Policy: strict-origin
如果从 HTTPS 网址链接到 HTTP 网址，不发送 Referer 字段，其余状况只发送源信息。
Referrer-Policy: strict-origin-when-cross-origin
同源时，发送残缺的 Referer 字段；跨域时，如果 HTTPS 网址链接到 HTTP 网址，不发送 Referer 字段，否则发送源信息。
Referrer-Policy: unsafe-url
Referer 字段蕴含源信息、门路和查问字符串，不蕴含锚点、用户名和明码。
针对以上策略，能够依据策略及 Referer 携带信息的残缺度，能够总结成一个表格，能够依照本人的需要配置不同的策略：
不携带任何 Referer 信息 Referer 只携带域名 Origin 信息 Referer 携带残缺 URL 信息 no-referrer✅–origin-✅-unsafe-url–✅strict-origin 从 HTTPS 申请到 HTTP 的网址时满足以下任意条件：从 HTTPS 申请到 HTTPS 网址时从 HTTP 申请到 HTTP 的网址时 -no-referrer-when-downgrade 从 HTTPS 申请到 HTTP 的网址时 - 满足以下任意条件：从 HTTPS 申请到 HTTPS 网址时从 HTTP 申请到 HTTP 的网址时 origin-when-cross-origin- 跨域申请同源申请 same-origin 跨域申请 - 同源申请 strict-origin-when-cross-origin 从 HTTPS 申请到 HTTP 的网址时满足以下任意条件：跨域申请从 HTTPS 申请到 HTTPS 网址时从 HTTP 申请到 HTTP 网址时同源申请
浏览器默认的策略
浏览器默认的策略 ChromeChrome 85 版本默认策略变更为：strict-origin-when-cross-origin 原策略：no-referrer-when-downgrade 具体可查看：developer.chrome.com/blog/referr…FirefoxFirefox 87 版本默认策略变更为：strict-origin-when-cross-origin 原策略：strict-origin-when-cross-origin 具体可查看：blog.mozilla.org/security/20…EdgeEdge 88 版本默认策略变更为：strict-origin-when-cross-origin 原策略：no-referrer-when-downgrade 具体可查看：docs.microsoft.com/zh-cn/deplo…Safari 相似于 strict-origin-when-cross-origin 依赖智能跟踪预防 (ITP)策略，具体可查看：webkit.org/blog/9661/p…
设置 Policy 的办法
当咱们须要变更 Referer 策略的时候，浏览器自身以及 W3C 标准都给咱们提供了门路，有以下几种形式能够操作：
rel 属性
、<area> 标签均反对 rel 属性，最常见的就是在 标签中对单个链接设置 rel=”noreferrer”
新地址
复制代码
设置之后，新开的网页申请头中，将不再携带起源页面的 Referer 信息。
<meta> 标签
在 HTML 的 <head> 标签内，能够新增 <meta> 标签，设置整个网页的 Referer Policy 策略。
<meta name=”referrer” content=”no-referrer”>
复制代码
Headers 申请头
更改 HTTP 头信息中的 Referer-Policy 值即可。比方你应用的是 Nginx，则能够设置 add_headers 设置申请头。
add_header Referrer-Policy “no-referrer”;
复制代码
设置完申请头，最终体现在浏览器 Headers 里字段是：
Referrer-Policy: no-referrer
复制代码
referrerpolicy 属性
这个目前看还是试验性功能，并且在 IE 浏览器上也是齐全不反对的。
新地址
复制代码
反对的标签：、<area>、<img>、<iframe>、<link>
优先级
以上几种设置形式，有页面级和元素级，当这两者都存在时，优先级按以下形式进行失效：
1、元素级政策
2、页面级政策
3、浏览器默认
举例：
<meta name=”referrer” content=”strict-origin-when-cross-origin”>
地址一
地址二
复制代码
页面中地址一，则优先按元素级策略，走 no-referrer，而页面中其余元素（包含但不限于 a 标签）则按 meta 页面级策略执行作者：政采云前端团队链接：
