转：彻底搞清referrer和origin

Posted 2020-10-03 我叫王自信

在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