HTML5安全 CORS（跨域資源共享）簡介

我之前《用html5實現人臉識別》這篇文章中提到了「face.com

實現了cors

（跨域資源共享）。

cors

系統基本上可以讓伺服器暴露給其它域上檔案的

ajax

呼叫。這是乙個偉大的功能，我希望更多的服務能夠使用它。」在這篇文章介紹的實現方式裡，我們可以自由的使用自己本域的

js**通過

ajax

來呼叫face.com

的api

，這是一種很美妙的方式，而在以前我們很難做到這一點。

由此我將引入和介紹cors，希望對大家有所幫助。

定義

cors其實出現時間不短了，它在維基百科上的定義是：跨域資源共享（cors）是一種網路瀏覽器的技術規範，它為web伺服器定義了一種方式，允許網頁從不同的域訪問其資源。而這種訪問是被同源策略所禁止的。cors系統定義了一種瀏覽器和伺服器互動的方式來確定是否允許跨域請求。它是乙個妥協，有更大的靈活性，但比起簡單地允許所有這些的要求來說更加安全。

而w3c的官方文件目前還是工作草案，但是正在朝著w3c推薦的方向前進。

簡言之，cors就是為了讓ajax可以實現可控的跨域訪問而生的。

以往的解決方案

以前要實現跨域訪問，可以通過jsonp、flash或者伺服器中轉的方式來實現，但是現在我們有了cors。

cors與jsonp相比，無疑更為先進、方便和可靠。

1、 jsonp只能實現get請求，而cors支援所有型別的http請求。

2、使用cors，開發者可以使用普通的xmlhttprequest發起請求和獲得資料，比起jsonp有更好的錯誤處理。

3、 jsonp主要被老的瀏覽器支援，它們往往不支援cors，而絕大多數現代瀏覽器都已經支援了cors（這部分會在後文瀏覽器支援部分介紹）。

詳細內容

要使用cors，我們需要了解前端和伺服器端的使用方法。

1、前端

以前我們使用ajax，**類似於如下的方式：

這裡的「/hfahe」是本域的相對路徑。

請注意，**與之前的區別就在於相對路徑換成了其他域的絕對路徑，也就是你要跨域訪問的介面位址。

我們還必須提供瀏覽器回退功能檢測和支援，避免瀏覽器不支援的情況。

function createcorsrequest(method, url)  else if (typeof!= "undefined")  else 
return xhr;} 
var xhr = createcorsrequest('get', url);
if (!xhr)

現在如果直接使用上面的指令碼進行請求，會看到瀏覽器裡控制台的報錯如下：

錯誤顯示的很明顯，這是因為我們還未設定access-control-allow-origin頭。

2、伺服器

伺服器端對於cors的支援，主要就是通過設定access-control-allow-origin來進行的。如果瀏覽器檢測到相應的設定，就可以允許ajax進行跨域的訪問。

http 頭的設定方法有很多，這篇文章裡對各種伺服器和語言的設定都有詳細的介紹，下面我們主要介紹apache和php裡的設定方法。

apache：apache需要使用mod_headers模組來啟用http頭的設定，它預設是啟用的。你只需要在apache配置檔案的,,或的配置裡加入以下內容即可：

header set access-control-allow-origin *

php：只需要使用如下的**設定即可。

<?php
header("access-control-allow-origin:*");

以上的配置的含義是允許任何域發起的請求都可以獲取當前伺服器的資料。當然，這樣有很大的危險性，惡意站點可能通過xss攻擊我們的伺服器。所以我們應該盡量有針對性的對限制安全的**，例如下面的設定使得只有這個域才能跨域訪問伺服器的api。

access-control-allow-origin:

瀏覽器支援情況

上文曾經提到，ie8和ie9在某種程度上可以通過xdomainrequest來提供同樣功能的支援。

使用案例

目前國外支援cors的平台有很多，例如：

google apiclient library for js

google cloudstorage

face.com api

未來

從所有的瀏覽器都支援來看，cors將成為未來跨域訪問的標準解決方案。無論是自己伺服器間的跨域訪問，還是開放平台為第三方提供api，都將採用這種統一的解決方案，因為它簡單、高效，受到所有主流瀏覽器的支援。它非常重要，也會讓我們的網路變得更加開放。

參考文章

ie10中的cors forxhr

using cors

HTML5安全 CORS（跨域資源共享）簡介

HTML5安全 CORS（跨域資源共享）簡介

HTML5安全 CORS（跨域資源共享）簡介

HTML5安全 CORS（跨域資源共享）簡介

相關推薦