转:彻底搞清referrer和origin

在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

时间: 2024-08-05 03:03:54

转:彻底搞清referrer和origin的相关文章

HTTP系列之Referer和Referrer policy简介

目录 @ 1.前言摘要 在csdn网站随便抓个链接来看看: Referer参数: referrer policy是unsafe url的,ok,下面介绍一下Referer和referrer policy 2.Referer简介 referer参数是http请求头header里的一个关键参数,表示的意思是链接的来源地址,比如在页面引入图片.JS 等资源,或者跳转链接,一般不修改策略,都会带上Referer 3.Referer安全性 Referer这个http header的参数应用得当的话,是可以

知乎日报 API的图片盗链问题

由最近 基于vue的知乎日报单页应用 引发的问题 以及问题解决历程 通过 知乎日报API 基于vue做一个知乎日报的单页应用,在获取图片时存在一个图片盗链问题,图片无法加载 提示 403 错误, 最终解决方法 添加meta标签 <meta name="referrer" content="never"> 以下两点为个人的解决问题的过程, 和该meta标签的详细介绍, 不感兴趣的小伙伴可以忽略 1.解决问题的过程记录 遇到问题不要慌,要记住充分利用网络,

比较各大挪动门户网站淘宝、京东、网易、新浪、腾讯meta标签的异同

首先先展示一下各个网站的有关meta标签的代码: 网易 <meta charset="UTF-8"> <meta content="width=device-width,user-scalable=no" name="viewport"> <meta name="apple-itunes-app" content="app-id=425349261"> <meta

img 标签 访问图片 返回403 forbidden问题

解决这个问题只需要在头部添加一个meta <meta name="referrer" content="no-referrer" /> referrer的几种状态 a标签的referrer <a href="http://example.com" referrer="no-referrer|origin|unsafe-url">xxx</a>

D10——C语言基础学PYTHON

C语言基础学习PYTHON--基础学习D10 20180906内容纲要: 1.协程 (1)yield (2)greenlet (3)gevent (4)gevent实现单线程下socket多并发 2.简单爬虫 3.select 4.IO多路复用 5.小结 6.练习 1 协程 协程又叫微线程,纤程.协程是一种用户态的轻量级线程.协程有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文.和栈保存到其他地方,在切换回来的时候回复先前保存的寄存器上下文和栈.协程能保存上一次调用时的状态.一个cpu支

访问图片出现403的解决办法

在写小程序的时候,访问一个网址获取图片,但是显示会出现403(防止盗链)的错误.总结了一下,有两种方法是可以解决这个问题的: 使用images.weserv.nl方案 使用no-referrer方案 第一种:使用images.weserv.nl方案 getImage(url){ console.log(url); // 把现在的图片连接传进来,返回一个不受限制的路径 if(url !== undefined){ return url.replace(/^(http)[s]*(\:\/\/)/,'

解决图片上传到微信服务器后无法显示问题

<meta name = "referrer" content="no-referrer"/> vue项目里可以添加到app.vue 关于referrer 在页面引入图片.JS 等资源,或者从一个页面跳到另一个页面,都会产生新的 HTTP 请求,浏览器一般都会给这些请求头加上表示来源的 Referrer 字段.Referrer 在分析用户来源时很有用,有着广泛的使用.但 URL 可能包含用户敏感信息,如果被第三方网站拿到很不安全(例如之前不少 Wap 站

[Next] 04.next自定义内容

自定义 head 这是默认的 head 这样的 head 并不能满足我们的需求.next 公开了一个内置组件,用于将元素追加到<head>标签的.我们可以通过这个自定义 head 新建 components/Head.js import { Fragment } from "react"; import Head from "next/head"; function MyHead() { return ( <Fragment> <Hea

博客园文章转PDF之非多线程方式

问题: 现在博客园写的文章想要在自己本地存一份,一个一个复制有点麻烦,希望能够程序化解决这个问题 思路: 博客园园第二页会出现页码,可以通过请求第二页,获得页面信息,然后把总页码获取到 每个页面的地址一样除了页码的地方不一样,因此,循环总页码,就可以得到每一个文章列表页的内容 得到了文章列表页的内容,可以把每个文章列表的文章链接获取到,且放在list中 循环文章链接,访问文章页面,获取文章标题和内容,并加上head,得到文章HTML且排除了左边栏及上下底部 把生成的HTML且排除了非文章内容的文