HTML5安全 CORS(跨域資源共享)簡介

2021-12-29 20:34:07 字數 2916 閱讀 1265

前言:像cors對於現代前端這麼重要的技術在國內基本上居然很少有人使用和提及,在百度或者google上搜尋cors,搜到的中文文章基本都是另外一種衛星定位技術cors的介紹,讓我等前端同學情何以堪(對比起來,用google搜到的國外文章,基本都是跨域資源共享的介紹,說明了前端技術在國內外環境和發展的巨大差距)。

我之前《用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」是本域的相對路徑。

如果我們要使用cors,相關ajax**可能如下所示:

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

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

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:

瀏覽器支援情況

上圖為各瀏覽器對於cors的支援情況(綠色為支援,資料**:看起來相當樂觀。主流瀏覽器都已基本提供對跨域資源共享的支援,所以,cors才會在國外使用的如此普遍。

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

使用案例

目前國外支援cors的平台有很多,例如:

google apiclient library for js

google cloudstorage

face.com api

未來

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

參考文章

ie10中的cors forxhr

using cors

摘自蔣宇捷的部落格()

HTML5安全 CORS(跨域資源共享)簡介

我之前 用html5實現人臉識別 這篇文章中提到了 face.com 實現了cors 跨域資源共享 cors 系統基本上可以讓伺服器暴露給其它域上檔案的 ajax 呼叫。這是乙個偉大的功能,我希望更多的服務能夠使用它。在這篇文章介紹的實現方式裡,我們可以自由的使用自己本域的 js 通過 ajax 來...

HTML5安全 CORS(跨域資源共享)簡介

我之前 用html5實現人臉識別 這篇文章中提到了 face.com實現了cors 跨域資源共享 cors系統基本上可以讓伺服器暴露給其它域上檔案的ajax呼叫。這是乙個偉大的功能,我希望更多的服務能夠使用它。在這篇文章介紹的實現方式裡,我們可以自由的使用自己本域的js 通過ajax來呼叫face....

HTML5安全 CORS(跨域資源共享)簡介

我之前 用html5實現人臉識別 這篇文章中提到了 face.com實現了cors 跨域資源共享 cors系統基本上可以讓伺服器暴露給其它域上檔案的ajax呼叫。這是乙個偉大的功能,我希望更多的服務能夠使用它。在這篇文章介紹的實現方式裡,我們可以自由的使用自己本域的js 通過ajax來呼叫face....