【跨域】常见方式及原理总结

原创 amandakelake 随笔 前端安全 413阅读 2017-05-28 10:03:52 举报

一、什么是跨域?
出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”
只要协议、域名、端口有任何一个不同,都被当做不同的域,js不能在不同的域之间进行通信和传输数据
跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果。

【跨域】常见方式及原理总结

二、跨域办法
1、JSONP(AJAX不允许跨域请求,但可以通过使用jQuery+JSONP来实现)
2、CORS(跨域资源共享):使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败
3、通过document.domain跨域(设置相同的主域,只适用于不同子域的框架间的交互)
4、通过window.name跨域

三、具体原理以实现
1、JSONP(创建<script>标签,利用src属性跨域)
在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据;
正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据;
使用JSONP模式来请求数据的时候,服务端返回的是一段可执行的JavaScript代码
①jQuery实例一
javascript 代码

②利用getJSON来实现
javascript 代码

通过dataType指定jsonp,底层封装后,会在head标签后面追加<script src="http://www.a.com/user?id=123&jsoncallback=funcName"></script>;

2、CORS(跨域资源共享)
①前端部分
以前使用Ajax,代码如下
javascript 代码

使用CORS,相关Ajax代码如下:
1)相对路径换成了其他域的绝对路径,也就是你要跨域访问的接口地址
2)还必须提供浏览器回退功能检测和支持,避免浏览器不支持的情况
javascript 代码

②服务器端:设置Access-Control-Allow-Origin头,如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问

3、Document.domain
浏览器同源策略的限制
1)不能通过ajax的方法去请求不同源中的文档
2)浏览器中不同域的框架之间是不能进行js的交互操作的(不同的框架之间是可以获取window对象的,但却无法获取相应的属性和方法)
比如有两个页面
http://www.damonare.cn/a.html,这个页面里面有一个iframe
它的src是http://damonare.cn/b.html,很明显子域不同
html 代码

只要把http://www.damonare.cn/a.html和http://damonare.cn/b.html这两个页面的document.domain都设成相同的域名就可以了。
但要注意的是,document.domain的设置是有限制的,只能把document.domain设置成自身或更高一级的父域,且主域必须相同
①在页面http://www.damonare.cn/a.html 中设置document.domain:
html 代码

②在页面http://damonare.cn/b.html 中也设置document.domain
html 代码

修改document.domain的方法只适用于不同子域的框架间的交互

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复