首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

跨域小结

2012-10-07 
跨域总结前端的需要掌握的知识储备要远远的大于实践浏览器安全模型规定,XMLHttpRequest、框架(frame)等只能

跨域总结
前端的需要掌握的知识储备要远远的大于实践

浏览器安全模型规定,XMLHttpRequest、框架(frame)等只能在一个域中通信。从安全角度考虑,这个规定很合理;但是,也确实给分布式(面向服务、混搭等等本周提到的概念)Web开发带来了麻烦。

所谓的跨域就是,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象

第一种:
window.name:就是window对象上的一个属性,只要窗口不发生变化(打开的不为_blank),这个值是一直存在,不会发生改变

a.com/app.html:
a.com/proxy.html:内容空白
b.com/data.html


需求:a.com/app.html需要访问b.com/data.html里面的数据
实现:在a.com/app.htm上加入一个iframe,然后src指向b.com/data.html,在b.com/data.html会执行一段脚本,将数据写入window.name上,这个时候a.com/app.html会执行iframe的onload函数将window.name读取进来,然后将src指向空白界面a.com/proxy.html

b.com/data.html



这种方法适合弹出框跨域和window.parent的iframe跨域是完全不同的

摘至:http://blog.csdn.net/mpu/article/details/1375301

第四种:
JSONP:虽然浏览器默认禁止了跨域访问,但并不禁止在页面中引用其他域的JS文件,并可以自由执行引入的JS文件中的function

需求:a.html放问b.do数据
原理:在a.html动态创建一个script标签,向不同域的b.do发送请求,b.do返回一段js脚本在客户端立即执行,里面直接向回调函数注入数据

a.html
<script>
function callback(data){
alert("haha")
}
</script>
<script src="b.do?cb=callback"></script>

b.do服务器端返回
callback({name:"cc",age:"25"})

这样callback({name:"cc",age:"25"})会当做脚本直接在客户端执行,就实现了跨域请求数据的效果

JSONP 服务返回打包在函数调用中的 JSON 响应,而函数调用是由浏览器执行的,这使宿主 Web 应用程序更容易受到各类攻击。

第五种:
flash当跨域访问资源时,例如从域www.a.com请求域www.b.com上的数据,我们可以借助Flash来发送HTTP请求,不过对方域crossdomain.xml上要有授权

原理:使用URLLoader向目标域发一段请求,得到数据之后在通过ExternalInterface调用js的方法,将数据注入进去

代码略~~

第六种:
服务器代理,虽然浏览器的同源策略限制跨域请求,但在服务器端发送http请求就没有这限制了(比如说爬虫器)

原理:比如www.a.com要访问www.b.com里的数据,可以创建一个www.a.com/proxy代理,因为www.a.com和www.a.com/proxy是在同域不受限制,首先www.a.com会request给www.a.com/proxy,www.a.com/proxy会在服务器端向www.b.com发送请求,得到数据之后在response给www.a.com(用到了点长轮询的概念)

其他跨域方式:
Access Control
原理:请求的响应必须包含一个Access-Control-Allow-Origin的HTTP响应头,如:header("Access-Control-Allow-Origin: http://www.a.com");
局限:Firefox, Google Chrome等通过XMLHTTPRequest实现,IE8下通过XDomainRequest实现

document.domain
原理:将document的domain属性都修改为xx.com
局限:只能在子域之间通信

window.postMessage
原理:HTML5定义的一个很新的方法
局限:在很旧和比较旧的浏览器中都无法使用(ie6,7,8)

摘至:http://ued.koubei.com/?p=1291

6大类基本包括了绝大的部分,其他的就是根据项目量体裁衣了,欢迎其他高手补充~

热点排行