Javascript Web跨域资源共享

博客首页 » Javascript Web跨域资源共享

发布于 22 Jun 2014 15:19
标签 blog
Javascript Web跨域资源共享

跨域资源共享的10种方式

本文链接:http://www.blueidea.com/tech/web/2010/8049.asp 
出处:口碑网UED Team

第 1 页 跨域资源共享的10种方式 [1]
第 2 页 跨域资源共享的10种方式 [2]

同源策略

在客户端编程语言中,如JavaScript和ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域,什么叫不同的域呢?当两个域具有相同的协议(如http), 相同的端口(如80),相同的host(如www.example.org),那么我们就可以认为它们是相同的域。比如http://www.example.org/index.html和http://www.example.org/sub/index.html是同域,而http://www.example.org, https://www.example.org, http://www.example.org:8080, http://sub.example.org中的任何两个都将构成跨域。同源策略还应该对一些特殊情况做处理,比如限制file协议下脚本的访问权限。本地的HTML文件在浏览器中是通过file协议打开的,如果脚本能通过file协议访问到硬盘上其它任意文件,就会出现安全隐患,目前IE8还有这样的隐患。

受到同源策略的影响,跨域资源共享就会受到制约。但是随着人们的实践和浏览器的进步,目前在跨域请求的技巧上,有很多宝贵经验的沉淀和积累。这里我把跨域资源共享分成两种,一种是单向的数据请求,还有一种是双向的消息通信。接下来我将罗列出常见的一些跨域方式,以下跨域实例的源代码可以从这里获得。

单向跨域

JSONP

JSONP (JSON with Padding)是一个简单高效的跨域方式,HTML中的script标签可以加载并执行其他域的JavaScript,于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据,那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据,然后在pageA中用script标签把pageB加载进来,那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数,pageB加载完之后会执行pageA中定义的函数,所需要的数据会以参数的形式传递给该函数。JSONP易于实现,但是也会存在一些安全隐患,如果第三方的脚本随意地执行,那么它就可以篡改页面内容,截获敏感数据。但是在受信任的双方传递数据,JSONP是非常合适的选择。

Flash URLLoader

Flash有自己的一套安全策略,服务器可以通过crossdomain.xml文件来声明能被哪些域的SWF文件访问,SWF也可以通过API来确定自身能被哪些域的SWF加载。当跨域访问资源时,例如从域www.a.com请求域www.b.com上的数据,我们可以借助Flash来发送HTTP请求。首先,修改域www.b.com上的crossdomain.xml(一般存放在根目录,如果没有需要手动创建) ,把www.a.com加入到白名单。其次,通过Flash URLLoader发送HTTP请求,最后,通过Flash API把响应结果传递给JavaScript。Flash URLLoader是一种很普遍的跨域解决方案,不过需要支持iOS的话,这个方案就无能为力了。

Access Control

Access Control是比较超越的跨域方式,目前只在很少的浏览器中得以支持,这些浏览器可以发送一个跨域的HTTP请求(Firefox, Google Chrome等通过XMLHTTPRequest实现,IE8下通过XDomainRequest实现),请求的响应必须包含一个Access-Control-Allow-Origin的HTTP响应头,该响应头声明了请求域的可访问权限。例如www.a.com对www.b.com下的asset.php发送了一个跨域的HTTP请求,那么asset.php必须加入如下的响应头:

header("Access-Control-Allow-Origin: http://www.a.com");

window.name

window对象的name属性是一个很特别的属性,当该window的location变化,然后重新加载,它的name属性可以依然保持不变。那么我们可以在页面A中用iframe加载其他域的页面B,而页面B中用JavaScript把需要传递的数据赋值给window.name,iframe加载完成之后,页面A修改iframe的地址,将其变成同域的一个地址,然后就可以读出window.name的值了。这个方式非常适合单向的数据请求,而且协议简单、安全。不会像JSONP那样不做限制地执行外部脚本。

server proxy

在数据提供方没有提供对JSONP协议或者window.name协议的支持,也没有对其它域开放访问权限时,我们可以通过server proxy的方式来抓取数据。例如当www.a.com域下的页面需要请求www.b.com下的资源文件asset.txt时,直接发送一个指向www.b.com/asset.txt的ajax请求肯定是会被浏览器阻止。这时,我们在www.a.com下配一个代理,然后把ajax请求绑定到这个代理路径下,例如www.a.com/proxy/, 然后这个代理发送HTTP请求访问www.b.com下的asset.txt,跨域的HTTP请求是在服务器端进行的,客户端并没有产生跨域的ajax请求。这个跨域方式不需要和目标资源签订协议,带有侵略性,另外需要注意的是实践中应该对这个代理实施一定程度的保护,比如限制他人使用或者使用频率。

双向跨域

document.domain

通过修改document的domain属性,我们可以在域和子域或者不同的子域之间通信。同域策略认为域和子域隶属于不同的域,比如www.a.com和sub.a.com是不同的域,这时,我们无法在www.a.com下的页面中调用sub.a.com中定义的JavaScript方法。但是当我们把它们document的domain属性都修改为a.com,浏览器就会认为它们处于同一个域下,那么我们就可以互相调用对方的method来通信了。

FIM – Fragment Identitier Messaging

不同的域之间,JavaScript只能做很有限的访问和操作,其实我们利用这些有限的访问权限就可以达到跨域通信的目的了。FIM (Fragment Identitier Messaging)就是在这个大前提下被发明的。父窗口可以对iframe进行URL读写,iframe也可以读写父窗口的URL,URL有一部分被称为frag,就是#号及其后面的字符,它一般用于浏览器锚点定位,Server端并不关心这部分,应该说HTTP请求过程中不会携带frag,所以这部分的修改不会产生HTTP请求,但是会产生浏览器历史记录。FIM的原理就是改变URL的frag部分来进行双向通信。每个window通过改变其他window的location来发送消息,并通过监听自己的URL的变化来接收消息。这个方式的通信会造成一些不必要的浏览器历史记录,而且有些浏览器不支持onhashchange事件,需要轮询来获知URL的改变,最后,URL在浏览器下有长度限制,这个制约了每次传送的数据量。

Flash LocalConnection

页面上的双向通信也可以通过Flash来解决,Flash API中有LocalConnection这个类,该类允许两个SWF之间通过进程通信,这时SWF可以播放在独立的Flash Player或者AIR中,也可以嵌在HTML页面或者是PDF中。遵循这个通信原则,我们可以在不同域的HTML页面各自嵌套一个SWF来达到相互传递数据的目的了。SWF通过LocalConnection交换数据是很快的,但是每次的数据量有40kb的大小限制。用这种方式来跨域通信过于复杂,而且需要了2个SWF文件,实用性不强。

window.postMessage

window.postMessage是HTML5定义的一个很新的方法,这个方法可以很方便地跨window通信。由于它是一个很新的方法,所以在很旧和比较旧的浏览器中都无法使用。

Cross Frame

Cross Frame是FIM的一个变种,它借助了一个空白的iframe,不会产生多余的浏览器历史记录,也不需要轮询URL的改变,在可用性和性能上都做了很大的改观。它的基本原理大致是这样的,假设在域www.a.com上有页面A.html和一个空白代理页面proxyA.html, 另一个域www.b.com上有个页面B.html和一个空白代理页面proxyB.html,A.html需要向B.html中发送消息时,页面会创建一个隐藏的iframe, iframe的src指向proxyB.html并把message作为URL frag,由于B.html和proxyB.html是同域,所以在iframe加载完成之后,B.html可以获得iframe的URL,然后解析出message,并移除该iframe。当B.html需要向A.html发送消息时,原理一样。Cross Frame是很好的双向通信方式,而且安全高效,但是它在Opera中无法使用,不过在Opera下面我们可以使用更简单的window.postMessage来代替。

总结

跨域的方法很多,不同的应用场景我们都可以找到一个最合适的解决方案。比如单向的数据请求,我们应该优先选择JSONP或者window.name,双向通信我们采取Cross Frame,在未与数据提供方没有达成通信协议的情况下我们也可以用server proxy的方式来抓取数据。

flash跨域策略文件crossdomain.xml配置详解

2011-08-13 10:30:28 我来说两句 收藏 我要投稿
CnCxzSec衰仔's Blog

0x00 目录

0x01 简介

0x02 crossdomain.xml的配置

0x03 总结

0x01 简介

flash在跨域时唯一的限制策略就是crossdomain.xml文件,该文件限制了flash是否可以跨域读写数据以及允许从什么地方跨域读写数据。

位于www.a.com域中的SWF文件要访问www.b.com的文件时,SWF首先会检查www.b.com服务器目录下是否有crossdomain.xml文件,如果没有,则访问不成功;若crossdomain.xml文件存在,且里边设置了允许www.a.com域访问,那么通信正常。所以要使Flash可以跨域传输数据,其关键就是crossdomain.xml。

本文将着重介绍crossdomain.xml文件的配置方法及不同配置对flash跨域的影响。

0x02 crossdomain.xml的配置

2.1 crossdomain.xml的放置位置

自flash 10以后,如有跨域访问需求,必须在目标域的根目录下放置crossdomain.xml文件,且该根目录下的配置文件称为“主策略文件”。若不存在主策略文件,则该域将禁止任何第三方域的flash跨域请求。

主策略文件对全站的跨域访问起控制作用。

也可以单独在某路径下放置仅对该路径及其子路径生效的crossdomain.xml配置文件,这需要在flash的AS脚本中使用如下语句来加载该配置文件:[具体的加载权限限制,将受后文中site-control策略的影响]

Security.loadPolicyFile("http://www.xxx.com/subdir/crossdomain.xml")

2.2 crossdomain.xml的配置方法及影响

crossdomain.xml需严格遵守XML语法,有且仅有一个根节点cross-domain-policy,且不包含任何属性。在此根节点下只能包含如下的子节点:site-control、allow-access-from、allow-access-from-identity、allow-http-request-headers-from。下面将分别介绍这四个子节点:

2.2.1site-control:通过检查该节点的属性值,确认是否可以允许加载其他策略文件。[如果该策略文件并非主策略文件,则此节点被自动忽略]

每个site-control标签有且仅有属性permitted-cross-domain-policies,该属性指定相对于非主策略文件的其他策略文件的加载策略。permitted-cross-domain-policies属性值有如下情况:

none: 不允许使用loadPolicyFile方法加载任何策略文件,包括此主策略文件。

master-only: 只允许使用主策略文件[默认值]。

by-content-type:只允许使用loadPolicyFile方法加载HTTP/HTTPS协议下Content-Type 为text/x-cross-domain-policy的文件作为跨域策略文件。

by-ftp-filename:只允许使用loadPolicyFile方法加载FTP协议下文件名为 crossdomain.xml的文件作为跨域策略文件。

all: 可使用loadPolicyFile方法加载目标域上的任何文件作为跨域策略文件,甚至是一 个JPG也可被加载为策略文件![使用此选项那就等着被xx吧!]

如需要对网站某子目录做单独的flash跨域限制策略,在主策略文件中必须进行相应的site-control设置。

下面的例子将site-control策略配置为可加载本服务器中其它的text/x-cross-domain-policy文件作为跨域策略文件。

<cross-domain-policy>

<site-control permitted-cross-domain-policies="by-content-type" />

</cross-domain-policy>

2.2.2 allow-access-from:通过检查该节点的属性值,确认能够读取本域内容的flash文件来源域。

allow-access-from标签有三个属性:

·domain:该属性指定一个确切的 IP 地址、一个确切的域或一个通配符域(任何域)。只有domain中指定的域,才有权限通过flash读取本域中的内容。

可采用下列两种方式之一来表示通配符域:

1)单个星号(*),如:<allow-access-fromdomain="*" />,表示匹配所有域和所有 IP 地 址,此时任何域均可跨域访问本域上的内容。[这是极不安全的!]

2)后接后缀的星号,表示只匹配那些以指定后缀结尾的域,如*.qq.com可匹配 game.qq.com、qq.com。形如www.q*.com或www.qq.*的为无效配置。

Tips:当domain被指定为IP地址时,只接受使用该IP作为网址来访问的来源请求[此时ip地址也就相当于一个域名而已],如domain被设置为192.168.1.100时,使用http://192.168.1.100/flash.swf 来请求该域内容是允许的,但是使用指向192.168.1.100的域名www.a.com来访问时[http://www.a.com/flash.swf]将会被拒绝,因为flash不懂得dns解析:)

·to-ports:该属性值表明允许访问读取本域内容的socket连接端口范围。可使用to-ports="1100,1120-1125"这样的形式来限定端口范围,也可使用通配符(*)表示允许所有端口。

·secure:该属性值指明信息是否经加密传输。当crossdomain.xml文件使用https加载时,secure默认设为true。此时将不允许flash传输非https加密内容。若手工设置为false则允许flash传输非https加密内容。

下面的例子配置为允许所有qq.com下的所有二级域名[包括qq.com本身]通过https访问本域中的内容。

<cross-domain-policy>

<allow-access-from domain="*.qq.com" secure="true" />

</cross-domain-policy>

2.2.3allow-access-from-identity:该节点配置跨域访问策略为允许有特定证书的来源跨域访问本域上的资源。每个allow-access-from-identity节点最多只能包含一个signatory子节点。形如:

<allow-access-from-identity>

<signatory>

<certificate

fingerprint="01:23:45:67:89:ab:cd:ef:01:23:45:67:89:ab:cd:ef:01:23:45:67"

fingerprint-algorithm="sha-1"/>

</signatory>

</allow-access-from-identity>

2.2.4allow-http-request-headers-from:此节点授权第三方域flash向本域发送用户定义的http头。

allow-access-from节点授权第三域提取本域中的数据,而 allow-http-request-headers-from 节点授权第三方域将数据以http头的形式发送到本域中。[简而言之,allow-access-from是控制读取权限,allow-http-request-headers-from是控制以http头形式的写入权限]

allow-http-request-headers-from包含三个属性:

·domain:作用及参数格式与allow-access-from节点中的domain类似。

·headers:以逗号隔开的列表,表明允许发送的http头。可用通配符(*)表示全部 http头。

·secure:作用及用法与allow-access-from节点中的secure相同。

在下面的示例中,任何域都可以向当前域发送 SOAPAction 标头:

<cross-domain-policy>

<allow-http-request-headers-from domain="*" headers="SOAPAction" />

</cross-domain-policy>

0x03 总结

不正确的crossdomain.xml策略将导致严重的安全问题,如信息泄露、CSRF等。从上文中可以看出,在进行安全评估时,我们应重点关注以下几点:

1)allow-access-from标签的domain属性检测:domain属性应根据最小化原则按需设置,仅允许可信任的来源跨域请求本域内容。禁止将该属性值设置为“*”。

2)allow-http-request-headers-from标签的domain属性检测:domain属性应根据最小化原则按需设置,仅允许可信任的来源向本域跨域发送内容。禁止将该属性值设置为“*”。

3) site-control标签的permitted-cross-domain-policies属性检测:根据业务的实际需求及可行性,对该属性做相应设置。禁止将该属性值设置为“all”。

解决NodeJS+Express模块的跨域访问控制问题:Access-Control-Allow-Origin

http://www.2cto.com/Article/201108/100008.html

Posted on 2013/04/18
在一个项目上想用NodeJS,所以边学边练。第一个遇到的问题就是跨域访问控制问题。很多初学者会遇到同样问题。

问题

在前端的JS(http://localhost/xxx)中ajax访问后端RestAPI(http://localhost:3000/….)时(Chrome)报错:

XMLHttpRequest cannot load http://localhost:3000/auth/xxx/xxx. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

方案

解决代码如下:

var express = require('express');
var app = express();
//设置跨域访问
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});

app.get('/auth/:id/:password', function(req, res) {
res.send({id:req.params.id, name: req.params.password});
});

app.listen(3000);
console.log('Listening on port 3000…');
This entry was posted in 教程 by 董 龙飞. Bookmark the permalink.
ONE THOUGHT ON “解决NODEJS+EXPRESS模块的跨域访问控制问题:ACCESS-CONTROL-ALLOW-ORIGIN”
one on 2013/08/01 at 11:00 am said:
请教一个问题,当前需要需要在webkit的基础上构建一个app开发框架,遇到了本地文件访问的安全限制的问题,通过XMLHTTPRequest不能访问本地文件,请问这个问题有什么解决方法吗?


本页面的文字允许在知识共享 署名-相同方式共享 3.0协议和GNU自由文档许可证下修改和再使用,仅有一个特殊要求,请用链接方式注明文章引用出处及作者。请协助维护作者合法权益。


系列文章

文章列表

  • Javascript Web跨域资源共享

这篇文章对你有帮助吗,投个票吧?

rating: 0+x

留下你的评论

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License