前端网络高级篇(四)CORS 跨域

学习CORS之前,先看下如下问题,作为铺垫和准备。

问题1: 什么是跨域?

满足下面三个条件才会引发跨域问题:

  1. 浏览器限制: 出于安全考虑,浏览器会限制脚本中发起的跨域请求(浏览器对于javascript的同源策略的限制)
  2. 同源策略: 只要 协议,域名,端口有任何一个的不同,就被当作是跨域
  3. 请求类型: XMLHttpRequest类型请求

问题2: 为什么要有跨域限制?

AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略,相当危险,我们发起的每一次HTTP请求都会带上请求地址对应的cookie,那么可以做如下攻击:

  1. 用户登录了自己的银行页面 http://mybank.comhttp://mybank.com 向用户的cookie中添加用户标识。
  2. 用户浏览了恶意页面 http://evil.com 。执行了页面中的恶意AJAX请求代码。
  3. http://evil.comhttp://mybank.com 发起AJAX HTTP请求,请求会默认把http://mybank.com 对应cookie也同时发送过去。
  4. 银行页面从发送的cookie中提取用户标识,验证用户无误,response中返回请求数据。此时数据就泄露了。
  5. 而且由于Ajax在后台执行,用户无法感知这一过程

问题3:为什么表单请求可以跨域

A页面(域名A)用 form 提交表单到B页面(域名B),A页面的脚本无法获取B页面中的内容,无法获得响应,浏览器认为是安全的。
其实,请求已经发送出去了,只是拿不到响应而已,AJAX 接收方可以读取响应内容的。所以,利用这个特性,依然有可能发起CSRF攻击。

问题4: 如何解决跨域问题?

  • 方式一:jsonp
    浏览器对资源文件的请求不限制同源,比如a.com下的页面可以通过标签<script src="b.com/b.js">, <img src="b.com/b.png"/>引入b.com域名下的JavaScript文件或者图片。
    jsonp就是动态创建script标签,然后利用src属性进行跨域的。
// 定义一个fun函数
function foo (data) {
    console.log(data);
};
// 创建一个脚本,并且告诉后端回调函数名叫foo
var body = document.getElementsByTagName('body')[0];
var script = document.gerElement('script');
script.type = 'text/javasctipt';
script.src = 'demo.js?callback=foo';
body.appendChild(script);

服务器接收到请求完成操作后,会调用callback函数(执行foo)。
jsonp的缺点是:只能发起GET请求。因为,请求资源文件默认都是GET请求。

  • 方式二:服务器代理
    客户端发起请求到同源的代理服务器,然后代理服务器再将请求转发给真正的服务器。常见利用Node.js作为代理服务器。
  • 方式三:document.domain来跨子域(不常用)
    对于主域名相同,而子域名不同的情况,可以使用document.domain来跨域。这种方式非常适用于iframe。比如a页面地址为 http://a.yourhost.com,b页面为 http://b.yourhost.com。 这样就可以通过分别给两个页面设置 document.domain = http://yourhost.com 来实现跨域。之后,就可以通过 parent 或者 window[‘iframename’]等方式去拿到iframe的window对象了。
  • 方式四:postMessage实现页面之间通信(不常用)
    window.postMessage是一个HTML5的api,允许两个窗口之间进行跨域发送消息。
  • 方式五:websocket
    Websocket是HTML5的一个持久化的协议,它实现了浏览器与服务器的全双工通信,同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议,都基于 TCP 协议。但是 WebSocket 是一种双向通信协议,在建立连接之后,WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时,WebSocket 在建立连接时需要借助 HTTP 协议,连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。
  • 方式五:CORS跨域

下面,详细讲解CORS跨域。

CORS(Cross-Origin Resource Sharing)

隶属于 W3C 的 Web 应用工作组( Web Applications Working Group )推荐了一种新的机制,即跨源资源共享(Cross-Origin Resource Sharing (CORS))。这种机制让Web应用服务器能支持跨站访问控制,从而使得安全地进行跨站数据传输成为可能。

CORS 请求头

CORS的请求有个明显标示,response header里面带有Access-Control-Allow-Origin字段。

Access-Control-Allow-Origin: <origin> | *

origin参数指定一个允许向该服务器提交请求的URI。对于一个不带有credentials的请求,可以指定为'*',表示允许来自所有域的请求。
还可以指定具体的域,比如:

Access-Control-Allow-Origin: http://mozilla.com

如果服务器端指定了域名,而不是'*',那么请求头必须包含Origin。响应是根据请求头里的Origin的值来返回不同的内容的。


image

CORS的response里面还包含几个特殊的请求头:

  • access-control-allow-methods:支持的HTTP请求方法
  • access-control-allow-headers:支持的request header类型,包括自定义header。
  • access-control-allow-credentials:是否支持携带cookies(后面会详细讲解)

下面,我们具体分析下CORS支持的几种请求方式。

1. 简单请求

简单请求具备以下条件:

  • 只使用 GET, HEAD 或者 POST 请求方法。
  • 如果使用 POST 向服务器端传送数据,则数据类型(Content-Type)只能是application/x-www-form-urlencoded, multipart/form-datatext/plain中的一种。
  • 不使用自定义请求头(类似于 X-Modified 这种)。
image

如果服务器端仅允许来自 http://foo.example 的跨站请求,它可以返回:

Access-Control-Allow-Origin: http://foo.example

2. 预请求(Preflighted requests)

“预请求”要求必须先发送一个 OPTIONS 请求给目的站点,来查明这个跨站请求对于目的站点是不是安全可接受的。这样做,是因为跨站请求可能会对目的站点的数据造成破坏。 当请求具备以下条件,就会被当成预请求处理:

  • 请求以 GET, HEAD 或者 POST 以外的方法发起请求。
  • 使用 POST,但请求数据为application/x-www-form-urlencoded, multipart/form-data 或者 text/plain 以外的数据类型。比如说,用 POST 发送数据类型为application/xml或者text/xml的 XML 数据的请求。
  • 使用自定义请求头(比如添加诸如 X-PINGOTHER)

发起OPTIONS请求


image

预检成功后发起GET请求


image

3. 3.附带凭证信息的请求(support cookies)

如果request请求要支持HTTP Cookies和验证信息,那么,XMLHttpRequest需要将withCredentials属性设置为true,而response需要返回Access-Control-Allow-Credentials: true

image

前端代码如下:

// JS
var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/credentialed-content/';
    
function callOtherDomain(){
  if(invocation) {
    invocation.open('GET', url, true);
    invocation.withCredentials = true;   // 设置
    invocation.onreadystatechange = handler;
    invocation.send(); 
  }
  
// JQuery
 $.ajax({
   ...
   url: a_cross_domain_url,
   xhrFields: {
      withCredentials: true
   }
 }); 

小结

目前最流行的跨域方式就是CORS了,需要服务端做相应配置,前端各类HTTP框架都支持了CORS机制。比如常用的axios库,可以通过全局配置指定CORS相关属性。

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