新W3C標準中 AJAX 跨域實現以及隱患

 

標準也很無奈，標準很難做到 Secure By Default。

最新的W3C標準裡是這麼實現HTTP跨域請求的，
Cross-Origin Resource Sharing

簡單來說，就是跨域的目標伺服器要返回一系列的Headers，通過這些Headers來控制是否同意跨域。

這些Headers有：

• 4
  Syntax
  • 4.1
    Access-Control-Allow-Origin HTTP Response Header
  • 4.2
    Access-Control-Max-Age HTTP Response Header
  • 4.3
    Access-Control-Allow-Credentials HTTP Response Header
  • 4.4
    Access-Control-Allow-Methods HTTP Response Header
  • 4.5
    Access-Control-Allow-Headers HTTP Response Header
  • 4.6
    Origin HTTP Request Header
  • 4.7
    Access-Control-Request-Method HTTP Request Header
  • 4.8
    Access-Control-Request-Headers HTTP Request Header

在 Request 包和 Response 包中都有一些。

其中最敏感的就是 Access-Control-Allow-Origin
這個 Header, 他是W3C標準裡用來檢查該跨域請求是否可以被通過。 (Access Control Check)

跨域實現的過程大致如下:

從 http://www.a.com/test.html 發起一個跨域請求，

請求的地址為： http://www.b.com/test.php

如果 伺服器B返回一個如下的header

Access-Control-Allow-Origin: http://www.a.com

那麼，這個來自 http://www.a.com/test.html 的跨域請求就會被通過。

在這個過程中， request 還會帶上這個header：

Origin: http://www.a.com

不過這裡比較要命的是 Access-Control-Allow-Origin 的值可以是萬用字元 *

如果是 * 的話，就可以接收來自任意source origin的請求。

我已經可以想象到以後這個特性被程式員濫用以及被用來製作後門的可怕後果了！

在 Firefox 3.1 Beta 2 上抓包如下：

GET http://www.b.com/test.php HTTP/1.1
Host: www.b.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.1b2) Gecko/20081201 Firefox/3.1b2 Paros/3.2.13
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-cn,zh;q=0.5
Accept-Charset: gb2312,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Proxy-Connection: keep-alive
Referer: http://www.a.com/test.html
Origin: http://www.a.com
Cache-Control: max-age=0

HTTP/1.1 200 OK
Date: Thu, 15 Jan 2009 06:28:54 GMT
Server: Apache/2.0.63 (Win32) PHP/5.2.6
X-Powered-By: PHP/5.2.6
Access-Control-Allow-Origin: *
Content-Length: 28
Content-Type: text/html

Cross Domain Request Test!

兩段代碼大致如下：
www.a.com/test.html:
<script>
var client = new XMLHttpRequest();
client.open("GET", "http://www.b.com/test.php");
client.onreadystatechange = function() { }
client.send(null);
</script>

www.b.com/test.php:
<?php

header("Access-Control-Allow-Origin: *");

?>

Cross Domain Request Test!

除了這個Header外，還可以通過一些其他的Header 來控制比如 Method, 時間等，可以參考標準，不在此贅述。

出於安全考慮，跨域請求不能訪問document.cookie 對象

對於IE8 Beta 2， 則是通過 XDomainRequest 來實現的這個跨域請求

比如類似如下代碼就可以實現了：

var request = new XDomainRequest();
request.open("GET", xdomainurl);
request.send();

也要求對方伺服器返回這個頭才行。

IE的開發人員今天公布了一段小視頻：
http://ieblog.members.winisp.net/images/XdomainRequest-small.wmv

目前，支援這種跨域實現的要求

Firefox 3.1 Beta2

IE 8 Beta2

等到普及還有一段時間。

最後再加一個Firefox3.1實現跨域的說明文檔：
https://developer.mozilla.org/En/HTTP_access_control