前端必備HTTP技能之跨站資源共享(CORS)技術詳解

CORS(Cross-origin resource sharing)是一種安全機制,允許其他域請求獲取到當前域中web頁面中的限制資源脐湾。web頁面可以自由的嵌入圖片犁珠,樣式,腳本丝蹭,iframe慢宗,視頻等資源,但是由于同源策略的限制奔穿,跨域請求會被限制镜沽。

CORS定義了一種方式,通過這種方式瀏覽器和服務器可以互相確定允許跨域請求是否是安全的贱田。這樣就比單純的同源請求有更多的自由度缅茉,也可以實現(xiàn)更多的功能,而且也比允許全部的跨域請求更安全男摧。CORS是W3C中的一個推薦標準蔬墩。

CORS原理
CORS標準介紹了新的HTTP headers,在瀏覽器和服務器都獲得授權的情況下耗拓,這些headers給它們提供了一種訪問遠程URL的方式拇颅。盡管服務器可以執(zhí)行一些驗證和授權,但是瀏覽器也有責任來支持這些headers乔询,遵循限制樟插。

對于AJAX和可以修改數(shù)據(jù)的HTTP請求方法來說,規(guī)范規(guī)定瀏覽器預檢查請求哥谷,通過請求頭中的OPTIONS方法獲取服務端支持的請求方法岸夯,然后得到服務器的批準之后,使用真實的HTTP請求方法發(fā)送真實的請求们妥。服務器也可以通知客戶端是否需要隨請求發(fā)送證書(包括Cookies和HTTP認證數(shù)據(jù))猜扮。


示意圖
示意圖

簡單示例
當支持CORS的瀏覽器嘗試發(fā)起跨域請求時:
1.瀏覽器發(fā)送OPTIONS請求,并在HTTP頭中指定Origin监婶,Origin的值是提供父級頁面的域旅赢。當前域http://www.foo.com中的頁面嘗試獲取域http://www.bar.com中的用戶數(shù)據(jù)時,下面的請求頭將會發(fā)送給http://www.bar.com域:

Origin:http://www.foo.com

2.服務器可能會有下面的響應:

  • 響應頭中的Access-Control-Allow-Origin標識允許那個來源站點惑惶。例如:
    Access-Control-Allow-Origin: http://www.foo.com
  • 如果服務器不支持跨域請求會返回錯誤頁面
  • 響應頭中的Access-Control-Allow-Origin如果是通配符則表示允許任何域訪問:
    Access-Control-Allow-Origin: *

當一個頁面或者API是完全公開的煮盼,并且可以被任何人或者任意站點上的代碼訪問時,通配符同源策略是一個好的方法带污。例如在公共托管服務上的免費可用的Google字體僵控。

通配符*意味著服務器不需要請求提供憑證,有意義的HTTP身份驗證鱼冀,客戶端的SSL驗證报破,也不允許發(fā)送cookies悠就。

注意在CORS架構中,Access-Control-Allow-Origin頭是外部web服務器(http://www.bar.com)設置的充易,而不是源web服務器(http://www.foo.com)設置的梗脾。CORS允許外部web服務器授權web應用使用它的服務,不控制web應用訪問外部服務盹靴。

預檢查示例
執(zhí)行某些類型的跨域ajax請求時炸茧,支持CORS的瀏覽器會插入一個額外的預檢查請求來決定是否有權限執(zhí)行相應的動作。

OPTIONS /
Host: bar.com
Origin: http://foo.com

如果bar.com想要接收這種行為稿静,它可能會回復下面的響應頭:

Access-Control-Allow-Origin: http://foo.com
Access-Control-Allow-Methods: PUT, DELETE

Headers
CORS相關的HTTP頭如下:

請求頭

  • Origin
  • Access-Control-Request-Method
  • Access-Control-Request-Headers

響應頭

  • Access-Control-Allow-Origin
  • Access-Control-Allow-Credentials
  • Access-Control-Expose-Headers
  • Access-Control-Max-Age
  • Access-Control-Allow-Methods
  • Access-Control-Allow-Headers

瀏覽器支持情況
瀏覽器支持詳情可以參考can I use網(wǎng)站上面的統(tǒng)計梭冠,點這里查看詳情。

歷史
跨域支持最早是在2004年的VoiceXML中作為一個雜項提出的自赔,主要是為了支持VoiceXML瀏覽器可以安全獲取跨域數(shù)據(jù)妈嘹。機制本質(zhì)上是通用的,在VoiceXML中沒有具體化绍妨,隨后被分配到一個實現(xiàn)備忘中。然后主要瀏覽器廠商參與的W3C的WebApps工作組開始把備忘錄規(guī)范化成W3C工作草案柬脸,最后才慢慢變成W3C推薦標準他去。

CORS和JSONP對比
CORS可以作為JSONP模式的一個現(xiàn)代選擇。JSONP只支持GET請求倒堕,而CORS也支持其他類型的HTTP請求方法灾测。使用CORS,開發(fā)者可以正常使用XMLHttpRequest對象發(fā)送請求垦巴,這種方法處理錯誤比JSONP方便媳搪。從另一方面來說,JSONP可以兼容不支持CORS的老版瀏覽器骤宣。CORS只能被大多數(shù)現(xiàn)代瀏覽器支持秦爆。JSONP可能導致XSS問題,而CORS允許站點手動解析響應來確保安全憔披。

做好前端開發(fā)必須對HTTP的相關知識有所了解等限,所以我創(chuàng)建了一個專題前端必備HTTP技能專門收集前端相關的HTTP知識,歡迎關注芬膝,投稿望门。


PS:本文翻譯自維基百科,原文地址https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末锰霜,一起剝皮案震驚了整個濱河市筹误,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌癣缅,老刑警劉巖厨剪,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件哄酝,死亡現(xiàn)場離奇詭異,居然都是意外死亡丽惶,警方通過查閱死者的電腦和手機炫七,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來钾唬,“玉大人万哪,你說我怎么就攤上這事÷崭眩” “怎么了奕巍?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵,是天一觀的道長儒士。 經(jīng)常有香客問我的止,道長,這世上最難降的妖魔是什么着撩? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任诅福,我火速辦了婚禮,結果婚禮上拖叙,老公的妹妹穿的比我還像新娘氓润。我一直安慰自己,他們只是感情好薯鳍,可當我...
    茶點故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布咖气。 她就那樣靜靜地躺著,像睡著了一般挖滤。 火紅的嫁衣襯著肌膚如雪崩溪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天斩松,我揣著相機與錄音伶唯,去河邊找鬼。 笑死砸民,一個胖子當著我的面吹牛抵怎,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播岭参,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼反惕,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了演侯?” 一聲冷哼從身側響起姿染,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后悬赏,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體狡汉,經(jīng)...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年闽颇,在試婚紗的時候發(fā)現(xiàn)自己被綠了盾戴。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 37,997評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡兵多,死狀恐怖尖啡,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情剩膘,我是刑警寧澤衅斩,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布,位于F島的核電站怠褐,受9級特大地震影響畏梆,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜奈懒,卻給世界環(huán)境...
    茶點故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一奠涌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧磷杏,春花似錦铣猩、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽天吓。三九已至贿肩,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間龄寞,已是汗流浹背汰规。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留物邑,地道東北人溜哮。 一個月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓,卻偏偏與公主長得像色解,于是被迫代替她去往敵國和親茂嗓。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,722評論 2 345

推薦閱讀更多精彩內(nèi)容