前端必备HTTP技能之跨站资源共享(CORS)技术详解

CORS(Cross-origin resource sharing)是一种安全机制,允许其他域请求获取到当前域中web页面中的限制资源。web页面可以自由的嵌入图片,样式,脚本,iframe,视频等资源,但是由于同源策略的限制,跨域请求会被限制。

CORS定义了一种方式,通过这种方式浏览器和服务器可以互相确定允许跨域请求是否是安全的。这样就比单纯的同源请求有更多的自由度,也可以实现更多的功能,而且也比允许全部的跨域请求更安全。CORS是W3C中的一个推荐标准。

CORS原理
CORS标准介绍了新的HTTP headers,在浏览器和服务器都获得授权的情况下,这些headers给它们提供了一种访问远程URL的方式。尽管服务器可以执行一些验证和授权,但是浏览器也有责任来支持这些headers,遵循限制。

对于AJAX和可以修改数据的HTTP请求方法来说,规范规定浏览器预检查请求,通过请求头中的OPTIONS方法获取服务端支持的请求方法,然后得到服务器的批准之后,使用真实的HTTP请求方法发送真实的请求。服务器也可以通知客户端是否需要随请求发送证书(包括Cookies和HTTP认证数据)。


示意图
示意图

简单示例
当支持CORS的浏览器尝试发起跨域请求时:
1.浏览器发送OPTIONS请求,并在HTTP头中指定Origin,Origin的值是提供父级页面的域。当前域http://www.foo.com中的页面尝试获取域http://www.bar.com中的用户数据时,下面的请求头将会发送给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验证,也不允许发送cookies。

注意在CORS架构中,Access-Control-Allow-Origin头是外部web服务器(http://www.bar.com)设置的,而不是源web服务器(http://www.foo.com)设置的。CORS允许外部web服务器授权web应用使用它的服务,不控制web应用访问外部服务。

预检查示例
执行某些类型的跨域ajax请求时,支持CORS的浏览器会插入一个额外的预检查请求来决定是否有权限执行相应的动作。

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网站上面的统计,点这里查看详情。

历史
跨域支持最早是在2004年的VoiceXML中作为一个杂项提出的,主要是为了支持VoiceXML浏览器可以安全获取跨域数据。机制本质上是通用的,在VoiceXML中没有具体化,随后被分配到一个实现备忘中。然后主要浏览器厂商参与的W3C的WebApps工作组开始把备忘录规范化成W3C工作草案,最后才慢慢变成W3C推荐标准

CORS和JSONP对比
CORS可以作为JSONP模式的一个现代选择。JSONP只支持GET请求,而CORS也支持其他类型的HTTP请求方法。使用CORS,开发者可以正常使用XMLHttpRequest对象发送请求,这种方法处理错误比JSONP方便。从另一方面来说,JSONP可以兼容不支持CORS的老版浏览器。CORS只能被大多数现代浏览器支持。JSONP可能导致XSS问题,而CORS允许站点手动解析响应来确保安全。

做好前端开发必须对HTTP的相关知识有所了解,所以我创建了一个专题前端必备HTTP技能专门收集前端相关的HTTP知识,欢迎关注,投稿。


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容