跨域访问

来源:互联网 发布:管家婆软件电话 编辑:程序博客网 时间:2024/05/16 11:50

1.同源定义

一般一个url为http://www.test.com/index.html

定义:同样的协议,域名(主机),端口,则为同源

栗子:http://store.company.com/dir/page.html 同源url

URL结果原因http://store.company.com/dir2/other.html成功 http://store.company.com/dir/inner/another.html成功 https://store.company.com/secure.html失败协议不同http://store.company.com:81/dir/etc.html失败端口不同http://news.company.com/dir/other.html失败主机名不同浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性。         

从一个域上加载的脚本不允许访问另外一个域的文档属性。

在浏览器中,<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源,而不受同源限制,但浏览器限制了JavaScript的权限使其不能读、写加载的内容。  
另外同源策略只对网页的HTML文档做了限制,对加载的其他静态资源如javascript、css、图片等仍然认为属于同源。


2.跨域的几种方法

#1 JS

因为<script>的src是不受同源策略影响,可以直接获取外域的js内容。因此在这里作一些改变,即可获得对面的内容。
上面是简单的使用JS访问跨域,还可以利用jquery的$.getJson $.ajax等

#2 document.domain

这种方法只适用于主域相同,而子域不同的跨域。
也就是get.a.com和data.a.com的跨域问题.

解决方法很简单:
若get.a.com/get.html需要获取data.a.com/data.html的数据,
首先在get.html插入一个iframe,src指向data.a.com/data.html,
然后在data.html写上document.domain=’a.com’;
即可操纵data.html内的内容。


#3 url hash

通过url的hash来实现跨域。hash就是url#后面的内容

a.com/get.html需要获取b.com/data.html
首先在get.html建立一个iframe,src还是指向data.html,后面带上hash值实现传参。
另一端data.html根据获取的hash作出响应,自身也创建一个iframe,src指向a.com/proxy.html,并把响应数据添加到hash。
之后,a.com/proxy.html只需要修改在同一a.com父域的get.html的hash即可。


Proxy页面的作用:
由于get.html和data.html不在一个域上,所以不能修改location.hash值,
于是运用proxy.html,先跳到找个代理页面,
然后通过parent.parent.location.hash,也就是修改祖父,让get.html也得到响应。


#4 postMessage

html5的新方法postMessage()优雅地解决了跨域,也十分容易理解。

发送方调用postMessage()内容,接受方监听onmessage接受内容即可。
假设发送方为a.com/send.html,接受方为b.com/receive.html。

#5 CORS

以上5点都是前端实现的跨域,但是后台参与会让跨域更容易解决,也就是用CORS。

CORS是Cross-Origin Resource Sharing的简称,也就是跨域资源共享。它有多厉害?之前说JsonP只能get请求,但CORS则可以接受所有类型的http请求,然而CORS只有现代浏览器才支持。

在Java中,你只需要设置
response.setHeader("Access-Control-Allow-Origin", "*");
即可;


http://targetkiller.net/cross-domain/ 写得太好了,请参考

https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

http://blog.csdn.net/shimiso/article/details/21830313

0 0
原创粉丝点击