由Gitee图床设置防盗链事件来谈谈Referer属性的作用

今天各个技术群里都在讨论Gitee图床资源访问不起的事件：

自己博客里来源于Gitee图床的图片资源全都变成了Gitee图标：

emmm，虽然说拿公开代码仓库当图床不是上策，但是白嫖的东西它就是香呀~

因此还是有不少小伙伴平常是用Gitee来当图床使的。

不过天下没有免费的午餐，我们之所以可以白嫖，是因为Gitee承担了服务成本。

拿Gitee仓库当图床会消耗Gitee的服务器资源，Gitee维护也需要成本，他们设置资源防盗(防止第三方平台未经授权使用资源提供方的资源)也能理解，但是Gitee在未提前声明的情况下，要求资源请求方在请求里包含Referer属性，从而实现**图片防盗**的目的属实是略有些不妥。。不过当然也不排除是其他技术漏洞导致的短暂bug。

既然定位到了问题是出在了Gitee服务端通过Referer属性来限制图片访问源，那我们就来聊聊Referer属性吧~

Referer属性的定义：

Referer是HTTP协议中的一个请求报头，用于告知服务器用户的来源页面。

那Referer属性有什么用呢？

个人理解，Referer属性的主要作用就是防盗，防止跨域访问服务器资源（写到这里时，我有点不理解referer和origin有什么区别，因为origin也是用来标识请求源的，然后就去了解了一下host、origin、referer三者之间的区别，详看下一个点）。

对于服务器端的接口来说，如果想要限制资源请求方，就可以要求资源请求方带上Referer这个属性，从而可以判断这个请求是否合法，如果不合法，就拦截请求。

当然Referer属性除了可以起到防盗的作用外，还可以防止恶意请求，具体逻辑和防盗一样，就是根据资源请求方的地址来判断是否是恶意请求。

不过上述方式，对防盗和恶意请求的拦截其实意义不大。。不能完全杜绝跨域资源访问。

因为Referer属性的值在发送方是可以伪造的。

referer属性在前端常设置在index.html的头部的meta元信息里：

当content为never时，就代表referrer为空，

当content为origin时，就代表referrer的值为请求地址。

也可以设置在标签，

标签，标签里设置不发送referer字段：

xxx

rel=noreferer表示不发送referer字段。

我们可以发现，referer是允许为空的，也允许不发送，这是因为referer属性的作用是指示一个请求是从哪里链接过来的，那么当一个请求并不是由链接触发产生的，那么自然也就不需要指定这个请求的链接来源。比如，直接在浏览器的地址栏中输入一个资源的URL地址，那么这种请求是不会包含referer字段的，因为这个请求并不是从一个链接跳转过去的。

因此作为一个跨域的请求方，我们可以通过设置referer为空或者noreferer去跨域访问目标资源，从而绕过资源防盗链的问题。

当然，跨域服务器可以设置该接口的请求方必须携带referer，这样我们就必须携带referer了，不过这种方式也会使得他们本身合法的referer访问无法正常使用(即不是通过链接跳转的请求)，除此之外，请求方还可以自己伪造referer。

因此通过referer来实现防盗对于服务方来说其实没什么用处。。。对于客户端来说反而很好用。

最后，来谈谈refer、origin、host三者的区别：

host表示当前请求要被发送的目的地，说白了就是当前请求目标资源的host，仅包括域名和端口号，如：baidu.com。在任何类型请求中，request都会包含此header信息。

origin用于标识跨域请求中的请求方的协议和域名，这个请求一般只存在于CORS跨域请求中，普通请求没有这个header！这个参数浏览器在进行CORS请求预检时会携带。

referer标识当前请求资源所在页面的完整路径：协议+域名+查询参数（注意不包含锚点信息），所有类型的请求都包含此header。当然我们可以手动把这个referer给去掉，设置content='never'即可~

关于referer属性的进一步学习，可以参考阮一峰大佬的博客：

http://www.ruanyifeng.com/blog/2019/06/http-referer.html