转:彻底搞清referrer和origin

时间:2024-11-18 21:34:33

在http协议中有这两个字段,之前一直隐隐约约的觉得是,一种标记请求来源的方法(的确是),但是更细致的对这两个字段的比较却没有一个清楚的认识。

referrer

到底是referer还是referrer,没人能说得清,不过拼写上,后者是正确的,我们不做评论,下面都用referrer表示。

假设我们当前处于A网站下的某个页面:http://www.exampleA.com/some_page_of_a.html下,该页面中有个链接是链到了B网站的某个页面:http://www.exampleB.com/some_page_of_b.html,那么当点击那个链接(或者其他方法),向B网站发起请求时,HTTP请求头中将包含如下字段:referrer:http://www.exampleA.com/some_page_of_a.html

这个算法是这样:

  • 在发起请求前,调用window.localtion获取window.location.href获取当前地址栏中的请求地址
  • 将该地址附加到referrer域中。

OK,那为什么要有这个域呢?参考了这里写链接内容发现了有两个可能的用处

  1. 防止盗链,盗链的解释,请参考百度百科,当一个请求到达服务器,特别是CDN服务器的时候,CDN服务器可以根据该字段来判断来源站点是否是合作伙伴,或者是可信任的,然后再决定是否将资源返回给它
  2. 防止恶意请求,比如说只允许外部网站访问我的静态资源,对于动态资源,不允许从外部网站访问,这样在一定程度上可以避免CSRF攻击。当然了,依赖客户端的请求是很不可靠的,因为这个可以轻轻松松伪造。
  3. 100 401

但是referrer存在很多问题,比如说我在请求外部网站的时候,携带着url的很多参数信息,而这些信息实际上是隐私的,但是外部网站都可以看到这些数据。这可能就会产生很多问题了。

origin

和referrer很相似,就是将当前URI的请求参数剥离,仅剩下<\schema,host,port>三元组,当且仅当三元组都相等时,才说这两个域属于同一个域,不过这个对origin这个header并没有影响,因为标准的浏览器,会在每次请求中都带上origin,至少在跨域操作时肯定携带。

从上面可以看出,其实referrer所能满足的要求,origin全部都能达到,事实上,origin的提出,本身就是在HTML5中跨域操作所引入的。

其具体流程是,当一个链接或者XMLHttpRequest去请求跨域操作,浏览器事实上的确向目标服务器发起了连接请求,并且携带这origin。

当服务器返回时,浏览器将检查response中是否包含Access-Control-Allow-Origin字段,当缺少这个字段时,浏览器将abort,abort的意思是不显示,不产生事件,就好像没有请求过,甚至在network区域里面都看不到。

当存在这个header时,浏览器将检查当前请求所在域是否在这个access-control-allow-origin所允许的域内,如果是,继续下去,如果不存在,abort!100