关闭

浏览器同源策略与跨域请求的实现方法

标签: 浏览器同源策略CORS跨域
680人阅读 评论(0) 收藏 举报
分类:

最近在项目中遇到了跨域请求的问题,趁着这个机会详细地了解了下相关的知识,现在做个记录。

Reference:

  • http://www.ruanyifeng.com/blog/2016/04/cors.html 
  • https://developer.mozilla.org/docs/Web/HTTP/Access_control_CORS


一、浏览器的同源策略


1.什么是同源策略


同源: 页面地址拥有相同的协议,域名,以及端口号

同源策略: 页面A中的脚本不能访问不同源的页面B的cookie、localStorage以及IndexDB,也不能获取页面B的DOM信息, 另外在使用AJAX时也会受到相关限制。


2.同源策略的目的


主要是出于安全方面的考虑。现在的网页都用cookie来进行身份验证,如果不限制读取,网页B里的恶意脚本代码可以随意模仿真实用户进行操作。


二、跨域请求的实现方法


1.JsonP

JsonP依赖于服务器端实现,我们在请求服务器资源之后,服务器可以返回一段js代码交由客户端执行, 在这段代码中附上客户端请求的信息。

比如客户端请求的url为 b.com/someResource?callback=someFunc, 服务器可以返回 someFunc({name: "someName"}) 交由客户端执行。

2.代理


比如我的前端服务器域名是 a.com, 我在js中想要访问 b.com的资源,我们可以在a.com中提供一个代理的api,比如 a.com/proxy, 这个接口的作用就是转发请求。 我们可以在payload中指定这个请求相关的信息, 比如真实资源的url,请求的方法,header和参数等。

3.CORS

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器发出AJAX请求。

CORS需要浏览器和服务器同时支持。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

3.1简单请求和非简单请求

浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。

满足下述条件的就是“简单请求”:

3.2 浏览器对于简单请求的处理

  对于简单请求,浏览器直接发出CORS请求。具体来说,就是在头信息之中,增加一个Origin字段。

Origin字段用来说明,本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值,决定是否同意这次请求。

如果Origin指定的源,不在许可范围内,服务器会返回一个正常的HTTP回应。浏览器发现,这个回应的头信息没有包含Access-Control-Allow-Origin字段(详见下文),就知道出错了,从而抛出一个错误,被XMLHttpRequestonerror回调函数捕获。注意,这种错误无法通过状态码识别,因为HTTP回应的状态码有可能是200。

如果Origin指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段。

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

上面的头信息之中,有三个与CORS请求相关的字段,都以Access-Control-开头。

(1)Access-Control-Allow-Origin

该字段是必须的。它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。

(2)Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值,表示是否允许发送Cookie(注:这里的Cookie指的是对应于该服务器的Cookie)。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。如果服务器不要浏览器发送Cookie,删除该字段即可。

(如果要把Cookie发到服务器,一方面要服务器同意,指定Access-Control-Allow-Credentials字段。

Access-Control-Allow-Credentials: true

另一方面,开发者必须在AJAX请求中打开withCredentials属性。

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

需要注意的是,如果要发送Cookie,Access-Control-Allow-Origin就不能设为星号,必须指定明确的、与请求网页一致的域名。同时,Cookie依然遵循同源政策,只有用服务器域名设置的Cookie才会上传,其他域名的Cookie并不会上传,且(跨源)原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

(3)Access-Control-Expose-Headers

该字段可选。CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-ControlContent-LanguageContent-TypeExpiresLast-ModifiedPragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。上面的例子指定,getResponseHeader('FooBar')可以返回FooBar字段的值。

3.3 对于非简单请求的处理

   如果请求不是简单请求,浏览器会先发送一个预请求:

浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

下面是一段浏览器的JavaScript脚本。


var url = 'http://api.alice.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();

上面代码中,HTTP请求的方法是PUT,并且发送一个自定义头信息X-Custom-Header

浏览器发现,这是一个非简单请求,就自动发出一个"预检"请求,要求服务器确认可以这样请求。下面是这个"预检"请求的HTTP头信息。


OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

"预检"请求用的请求方法是OPTIONS,表示这个请求是用来询问的。头信息里面,关键字段是Origin,表示请求来自哪个源。

除了Origin字段,"预检"请求的头信息包括两个特殊字段。

(1)Access-Control-Request-Method

该字段是必须的,用来列出浏览器的CORS请求会用到哪些HTTP方法,上例是PUT

(2)Access-Control-Request-Headers

该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段,上例是X-Custom-Header

服务器收到"预检"请求以后,检查了OriginAccess-Control-Request-MethodAccess-Control-Request-Headers字段以后,确认允许跨源请求,就可以做出回应。

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

上面的HTTP回应中,关键的是Access-Control-Allow-Origin字段,表示http://api.bob.com可以请求数据。该字段也可以设为星号,表示同意任意跨源请求。

Access-Control-Allow-Origin: *

如果浏览器否定了"预检"请求,会返回一个正常的HTTP回应,但是没有任何CORS相关的头信息字段。这时,浏览器就会认定,服务器不同意预检请求,因此触发一个错误,被XMLHttpRequest对象的onerror回调函数捕获。控制台会打印出如下的报错信息。

XMLHttpRequest cannot load http://api.alice.com.
Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.

服务器回应的其他CORS相关字段如下。

Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

(1)Access-Control-Allow-Methods

该字段必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。

(2)Access-Control-Allow-Headers

如果浏览器请求包括Access-Control-Request-Headers字段,则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在"预检"中请求的字段。

(3)Access-Control-Allow-Credentials

该字段与简单请求时的含义相同。

(4)Access-Control-Max-Age

该字段可选,用来指定本次预检请求的有效期,单位为秒。上面结果中,有效期是20天(1728000秒),即允许缓存该条回应1728000秒(即20天),在此期间,不用发出另一条预检请求。


一旦服务器通过了"预检"请求,以后每次浏览器正常的CORS请求,就都跟简单请求一样,会有一个Origin头信息字段。服务器的回应,也都会有一个Access-Control-Allow-Origin头信息字段。

下面是"预检"请求之后,浏览器的正常CORS请求。

PUT /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

上面头信息的Origin字段是浏览器自动添加的。

下面是服务器正常的回应。

Access-Control-Allow-Origin: http://api.bob.com
Content-Type: text/html; charset=utf-8

上面头信息中,Access-Control-Allow-Origin字段是每次回应都必定包含的。


4.iframe


这种方法感觉现在用的不多了,我自己也没有尝试过。
1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

浏览器拦截跨域请求处理方法(同源策略不允许读取服务器远程资源)

如题目所示,当浏览器进行跨域请求时,会出现跨域问题。该问题在 Firefox 中会报错:已拦截跨源请求:同源策略禁止读取位于 http://XXXX/x 的远程资源。(原因:CORS 头缺少 'Acc...
  • chritina
  • chritina
  • 2017-04-10 09:05
  • 5415

浏览器拦截跨域请求处理方法(已阻止跨源请求:同源策略禁止读取远程资源)

在浏览器请求中,出现跨域访问资源的问题,我们肯定会遇到。如果跨域请求被阻止,有可能导致css、js 、ajax请求、font字体等资源出现无法正常访问的问题。接下来,就介绍下解决同源策略不允许读取远程...
  • sdx1237
  • sdx1237
  • 2016-10-26 10:28
  • 2388

浏览器和服务器实现跨域(CORS)判定的原理

前端对Cross-Origin Resource Sharing 问题(CORS,中文又称'跨域')应该很熟悉了。众所周知出于安全的考虑,浏览器有个同源策略,对于不同源的站点之间的相互请求会做限制(跨...
  • zmx729618
  • zmx729618
  • 2016-11-24 13:44
  • 4249

浏览器拦截跨域请求处理方法(firebug报错,同源策略不允许读取XXX上的远程资源)

1. 如果可以使用get请求的话
  • kexinmei
  • kexinmei
  • 2014-06-18 11:09
  • 7310

ajax请求总是不成功?浏览器的同源策略和跨域问题详解

摘要: XMLHttpRequest cannot load http://oldwang.com/isdad. No 'Access-Control-Allow-Origin' header is ...
  • yunqishequ1
  • yunqishequ1
  • 2017-07-12 14:33
  • 300

jsonp突破同源策略,实现跨域访问请求

跨域访问问题,相信大家都有遇到过。这是一个很棘手的问题。不过道高一尺,魔高一丈,对于这类问题,总有解决问题的方案。最近我又接触到了这个问题,解决的途径是ajax+jsonp。 说到这个问...
  • xiaoxian8023
  • xiaoxian8023
  • 2014-06-06 14:23
  • 6431

浏览器同源策略,跨域(跨源)

参考 https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy http://www.ruanyifeng....
  • kikajack
  • kikajack
  • 2017-11-13 11:34
  • 128

同源策略与JS跨域请求(图文实例详解)

同源策略与JS跨域跨域详解 Jquery Ajax 调用 Web API方法,Jquery ajax 请求.Net C# MVC. 本文介绍了同源策略,以及JS跨域问题出现的原因及原理。 本文以AJ...
  • shuai_wy
  • shuai_wy
  • 2016-04-19 00:43
  • 2517

解决异步请求时跨域访问或同源策略的问题

<?php /** * 异步访问的同源策略 * :异步请求禁止跨域访问,也就是http://sina.com不会让http://localhost去异步调用请求。 * :解决这个问题可以使用if...
  • f1520107395
  • f1520107395
  • 2015-02-01 00:38
  • 772

Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法

同源是指相同的协议、域名、端口,三者都相同才属于同域。不符合上述定义的请求,则称为跨域。 相信每个开发人员都曾遇到过跨域请求的情况,虽然情况不一样,但问题的本质都可以归为浏览器出于安全考虑下的同...
  • WHACKW
  • WHACKW
  • 2015-12-23 16:36
  • 472
    个人资料
    • 访问:298215次
    • 积分:4272
    • 等级:
    • 排名:第8240名
    • 原创:117篇
    • 转载:22篇
    • 译文:12篇
    • 评论:120条
    详细资料
    博客专栏