referrer整理

在接入微信h5支付遇到了referrer为空的问题以后，也看过不少博主整理的相关文档，而后仍是本身简单整理一下，加深一下理解。

1、简单介绍

枯燥的概念

Referer 首部包含了当前请求页面的来源页面的地址，即表示当前页面是经过此来源页面里的连接进入的。服务端通常使用 Referer 首部识别访问来源，可能会以此进行统计分析、日志记录以及缓存优化等

比方说

在一个不火热的旅游景点（很优美没有过分开发的那种）开了个客栈，有一个很无聊的老板，当有游客入住的时候，都会问 场景一：

• 无聊老板: 我是广东佛山那边的，你是哪边的？
• 游客：我是肇庆的。
• 无聊老板：咱们是一个省份的，哈哈哈。

场景二：

• 无聊老板: 我是广东佛山那边的，你是哪边的？
• 游客：我是从东土大唐而来【内心os，广东人吃胡建人】。
• 无聊老板：哦哦【内心os，二般游客】

2、正文

referrer 是否发送，在chrome默认的行为里面是会带的（除了是新标签直接访问页面），这样会带来一个问题

• 可能会暴露用户的浏览历史

那什么状况下不会带这个信息？

1. 安全降级，例如 https -> http
2. 协议为file，例如 file://xxx.html
3. 协议为data，例如 <img src="data:" />
4. 主动配置

怎么主动配置是否带referer？

配置 referrer-policty

属性值	描述
no-referrer	不发送referrer
no-referrer-when-downgrage	安全等级降级的时候不发，例如https->http
origin	只发送“源”
origin-when-cross-origin	非同源只发送“源”，同源访问发送具体的url
same-origin	同源访问发送具体url
strict-origin	同等安全等级的页面访问才发url
strict-origin-when-cross-origin	同等安全等级且同源的状况下才发送url
unsafe-url	不管是同源请求仍是非同源请求都发送完整的url

配置的地方

1. 经过设置标签，例如,a,area,img,iframe,script,link

例如：
<a href=“xxx.com” referrerpolicy=“origin” />

或者

<a href=“xxx.com” rel=“noreferrer” />  这个时候跳转后，页面http里面的信息的referer就为空
复制代码

2. 配置 meta

<meta name=“referrer” conent=“origin” /> 这个时候，referer只会显示origin

复制代码

有什么应用场景？

1.匿名

有时候匿名者不但愿被知道本身的身份，会主动从http报文中删除ua,ip,referer来保证私密性跟匿名性，

2.根据referer去作对应的处理

• 微信h5支付，在调起支付的时候，就会去验证referer 是不是配置的安全域名
• b站点用到不少a站点的服务，两个站点的host又是一致的，当有一天两个站点的服务要独立的时候，想要去整理b站点具体依赖到a站点哪些服务是很麻烦的，这个时候直接经过referer去区分就能够直接得知了。

3.防护 CSRF（跨站请求伪造）

• 描述：跨站请求攻击，简单地说，是攻击者经过一些技术手段欺骗用户的浏览器去访问一个本身曾经认证过的网站并运行一些操做（如发邮件，发消息，甚至财产操做如转帐和购买商品）。因为浏览器曾经认证过，因此被访问的网站会认为是真正的用户操做而去运行
• 解决方式：检查http headers referer 字段是否同源或者在白名单里面。

4. 反爬虫,no referrer 或者 非指定地址的referrer 访问图片资源的时候，统一按异常处理。

注意：看到上面其实有referer，也有referrer，referer 是错误的写法，正确的写法是referrer。http header 里面仍是referer属性，没有修正。其余的才修正了写法。