CORS跨源资源共享 – 学习画板

首页 » Ajax » CORS跨源资源共享

CORS跨源资源共享

通过XHR实现Ajax通信的一个主要限制,来源于跨域安全策略。默认情况下,XHR对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是,实现合理的跨域请求对于开发某些浏览器应用程序也是至关重要的。

CORS是W3C的一个工作草案,定义了在必须访问跨源资源时,浏览器与服务器应该如何沟通。CORS的实现原理,就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败

比如一个简单的使用GET或POST发送的请求,它没有自定义的头部,而主题内容text/plain。在发送给请求时,需要给它附加一个额外的Origin头部,其中包含请求页面的源信息(协议、域名和端口),以便服务器根据这个头部信息来决定是否给予响应。下面是Origin头部的一个示例:

Origin: https://www.w3cmm.com

如果服务器认为这个请求可以接受,就在Access-Control-Allow-Origin头部中回发相同的源信息。例如:

//允许指定的域名
Access-Control-Allow-Origin: https://www.w3cmm.com
//允许所有的域名
Access-Control-Allow-Origin: *

如果没有这个头部,或者有这个头部但信息不匹配,浏览器就会驳回请求。正常情况下,浏览器会处理请求。注意,请求和响应都不包含cookie信息。

IE对CORS的实现-XDomainRequest

微软在IE8中引入了XDR(XDomainRequest)类型。这个对象与XHR类似,但能实现安全可靠的跨域通信。XDR对象的安全机制部分实现了W3C的CORS规范。以下是XDR与XHR的一些不同之处。

  • cookie不会随请求发送,也不会随响应返回。
  • 只能设置请求头部信息中的Content-Type字段。
  • 不能访问响应头部信息。
  • 只支持GET和POST请求。

这些变化使CSRF(Cross-Site Request Forgery,全站点请求伪造)和XSS(Cross-Site Scripting,跨站点脚本)的问题得到了缓解。被请求的资源可以根据它认为合适的任意数据(用户代理、来源页面等)来决定是否设置Access-Control-Allow-Origin头部。作为请求的一部分,Origin头部的值表示请求的来源域,以便远程资源明确地识别XDR请求。

XDR对象的使用方法与XHR对象非常相似。也是创建一个XDomainRequest的实例,调用open()方法,再调用send()方法。但与XHR对象的open()方法不同,XDR对象的open()方法只接收两个参数:请求的类型和URL。

所有XDR请求都是异步执行的,不能用它来创建同步请求。请求返回之后,会触发load事件,响应的数据也会保存在responseText属性中,如下所示:

var xdr = new XDomainRequest();
xdr.onload = function() {
    alert(xdr.responseText);
};
xdr.open("get", "https://www.w3cmm.com/xdr.php");
xdr.send(null);

在接收到响应后,你只能访问响应的原始文本;没有办法确定响应的状态代码。而且,只要响应有效就会触发load事件,如果失败(包括响应中缺少Access-Control-Allow-Origin头部)就会触发error事件。遗憾的是,除了错误本身之外,没有其它信息可用,因此唯一能够确定的就是只有请求未成功了。要检测错误,可以像下面这样指定一个onerror事件处理程序。

var xdr = new XDomainRequest();
xdr.onload = function() {
    alert(xdr.responseText);
};
xdr.onerror = function() {
    alert("一个错误发生了!");
};
xdr.open("get", "https://www.w3cmm.com/xdr.php");
xdr.send(null);

鉴于导致XDR请求失败的因素很多,因此建议你不要忘记通过onerror事件处理程序来捕获该事件;否则,即使请求失败也不会有任何提示。

在请求返回前调用abort()方法可以终止请求:

xhr.abort(); //终止请求

与XHR一样,XDR对象也支持timeout属性以及ontimeout事件处理程序。下面是一个例子。

var xdr = new XDomainRequest();
xdr.onload = function() {
    alert(xdr.responseText);
};
xdr.onerror = function() {
    alert("一个错误发生了!");
};
xdr.timeout = 1000;
xdr.ontimeout = function() {
    alert("请求时间太长了!");
};
xdr.open("get", "https://www.w3cmm.com/xdr.php");
xdr.send(null);

这个例子会在运行1秒钟后超时,并随即调用ontimeout事件处理程序。

为支持POST请求,XDR对象提供了contentType属性,用来表示发送数据的格式,如下面的例子所示。

var xdr = new XDomainRequest();
xdr.onload = function() {
    alert(xdr.responseText);
};
xdr.onerror = function() {
    alert("一个错误发生了!");
};
xdr.open("get", "https://www.w3cmm.com/xdr.php");
xdr.contentType = "application/X-www-form-urlencoded";
xdr.send("name=value1&name2=value2");

这个属性是通过XDR对象影响头部信息的唯一方式。

其它浏览器对CORS的实现

IE 10+、Firefox3.5+、Safari 4+、Chrome、iOS版Safari和Android平台中的WebKit都通过XMLHttpRequest对象实现了对CORS的原生支持。在尝试了不同来源的资源时,无需额外编写代码就可以触发这个行为。要请求位于另一个域中的资源,使用标准的XHR对象并在open()方法中传入绝对URL即可,例如:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4) {
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            alert(xhr.responseText);
        } else {
            alert("请求没有成功: " + xhr.status);
        }
    }
};
xhr.open("get", "https://www.w3cmm.com/xdr.php", true);
xhr.send(null);

与>IE 8<IE 10中的XDR对象不同,通过跨域XHR对象可以访问status和statusText属性,而且还支持同步请求。跨域XHR对象也有一些限制,但是为了安全这些限制是必须的。以下下就是这些限制。

  • 不能使用setRequestHeader()设置自定义头部
  • 不能发送和接收cookie
  • 调用getAllRresponseHeaders()方法总会返回空字符串

由于无论同源请求还是跨源请求都使用相同的接口,因此对于本地资源,最好使用相对URL,在访问远程资源时再使用绝对的URL。这样能消除歧义,避免出现限制访问头部或本地cookie信息等问题。

Preflighted Requests

CORS通过一种叫做Preflighted Requests的透明服务器验证机制支持开发人员使用自定义的头部、GET或POST之外的方法,以及不同类型的主题内容。在使用下列高级选项来发送请求时,就会向服务器发送一个Preflight请求。这种请求使用OPTIONS方法,发送下列头部。

  • Origin:与简单的请求相同。
  • Access-Control-Request-Method:请求自身使用的方法。
  • Access-Control-Request-Headers:(可选)自定义的头部信息,多个头部可以逗号分隔。

以下是一个带有自定义头部NCZ的使用POST方法发送的请求。

Origin: https://www.w3cmm.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: NCZ

发送这个请求后,服务器可以决定是否允许这种类型的请求。服务器通过在响应中发送如下头部与浏览器进行沟通。

  • Access-Control-Allow-Origin:与简单的请求相同。
  • Access-Control-Allow-Methods:允许的方法,多个方法以逗号分割。
  • Access-Control-Allow-Header:允许的头部,多个头部已逗号分割。
  • Access-Control-Max-Age:应该将这个Preflight请求缓存多长事件(以秒表示)。

例如:

Access-Control-Allow-Origin: https://www.w3cmm.com
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: NCZ
Access-Control-Max-Age: 1728000

Preflight请求结束后,结果将按照响应中指定的时间缓存起来。而为此付出的代价只是第一次发送这种请求时会多一次HTTP请求。

支持Preflight请求的浏览器包括Firefox 3.5+、Safari 4+和Chrome。IE10及更早版本都不支持。

withCredentials

默认情况下,跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。通过将withCredentials属性设置为true,可以指定某个请求应该发送凭据。如果服务器接收带凭据的请求,会用下面的HTTP头部来响应。

Access-Control-Allow-Credentials: true

如果发送的是带凭据的请求,但服务器的响应中没有包含这个头部,那么浏览器就不会把响应交给JavaScript(于是,responseText中将是空字符串,status的值为0,而且会调用onerror()事件处理程序)。另外,服务器还可以在Preflight响应中发送这个HTTP头部,表示允许源发送带凭据的请求。

支持withCredentials属性的浏览器有Firefox 3.5+、Safari 4+和Chrome。IE10及更早版本都不支持。

跨浏览器实现CORS

即使跨浏览器对CORS的支持程度并不都一样,但所有浏览器都支持简单的(非Preflight和不带凭据的)请求,因此有必要实现一个跨浏览器的方案。检测XHR是否支持CORS的最简单的方式,就是检查是否存在withCredentials属性。再结合检测XDomainRequest对象是否存在,就可以兼顾所有浏览器了。

function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if("withCredentials" in xhr) {
        xhr.open(method, url, true);
    } else if(typeof XDomainRequest != "undefined") {
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}

var request = createCORSRequest("get", "https://www.w3cmm.com/xdr.php");
if(request) {
    request.onload = function() {
        //对 request.responseText 进行处理
    };
    request.send();
}

Firefox、Safari和Chrome中的XMLHttpRequest对象与IE中的XDomainRequest对象类似,都提供了够用的接口,因此以上模式还是相当有用的。这两个对象共同的属性/方法如下。

  • abort():用于停止正在进行的请求。
  • onerror:用于替代onreadystatechange检测错误。
  • onload:用于替代onreadystatechange检测成功
  • responseText:用于取得响应内容。
  • send():用于发送请求

以上成员都包含在createCORSRequest()函数返回的对象中,在所有浏览器中都能正常使用。

此文章发表在 Ajax. 将 固定链接 加入收藏.