浏览器跨域访问解决方案

跨域大家都知道，不同地址，不同端口，不同级别，不同协议都会构成跨域。例如：about.haorooms.com和www.haorooms.com都会构成跨域。总结起来只要协议、域名、端口有任何一个不同，都被当作是不同的域。JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象，即同源政策

同源策略是浏览器最基本的安全策略，它认为任何站点的内容都不是安全的，所以当脚本运行时，只被允许访问来自同一站点的资源。同源是指域名、协议、端口都相同。

如果没有同源策略，就会发生下面的问题：

恶意网站用一个iframe的真实的银行登录页放到他的页面上，当用户使用用户名密码登录时，父页面的javascript就可以读取到银行登录页表单中的内容。 甚至浏览器的1个tab页打开了恶意网站，另一个tab页打开了银行网站，恶意网站中的javascript可以读取到银行网站的内容，这样银行卡和密码就能被轻易拿走。

解决跨域的方案

1.jQuery下通过jsonp实现跨域

JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。JSON系统开发方法是一种典型的面向数据结构的分析和设计方法，以活动为中心，一连串的活动的顺序组合成一个完整的工作进程。

$.getJSON(url+"?callback=?",

function(json){

});

$.ajax({

url: '', // 跨域URL

type: 'GET',

dataType: 'jsonp',

jsonp: 'jsoncallback', //默认callback

data: mydata, //请求数据

timeout: 5000,

success: function (json) { //客户端jquery预先定义好的callback函数，成功获取跨域服务器上的json数据后，会动态执行这个callback函数

if(json.actionErrors.length!=0){

alert(json.actionErrors);

}

},

complete: function(XMLHttpRequest, textStatus){

}

});

2.通过修改document.domain来跨子域

我们只需要在跨域的两个页面中设置document.domain就可以了。修改document.domain的方法只适用于不同子域的框架间的交互。例如：

1.在页面 http:// www.haorooms.com/a.html 中设置document.domain

<iframe id = "iframe" src="http://haorooms.com/b.html" onload = "test()"></iframe>

<script type="text/javascript">

document.domain = 'haorooms.com';//设置成主域

function test(){

alert(document.getElementById('?iframe').contentWindow);//contentWindow 可取得子窗口的 window 对象

}

</script> 

2、在页面http:// haorooms.com/b.html 中设置document.domain

<script type="text/javascript">

document.domain = 'haorooms.com';//在iframe载入这个页面也设置document.domain，使之与主页面的document.domain相同

</script>

3.window.name实现跨域

浏览器窗口有window.name属性。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置这个属性，后一个网页就可以读取它。

父窗口先发开一个子窗口，载入一个不同源的网页，该网页将信息写入window.name属性。

[javascript] view plain copy 
 
01.window.name = data; 

接着，子窗口跳回一个与主窗口同域的网址。

[javascript] view plain copy 

01.location = 'http://parent.url.com/xxx.html'; 

然后，主窗口就可以读取子窗口的window.name了。

[javascript] view plain copy 

01.var data = document.getElementById('iframe').contentWindow.name;    

优点：window.name容量很大，可以防止非常长的字符串；

缺点：必须监听子窗口window.name属性的变化，会影响网页性能。

4.postMessage

message事件的事件对象event，提供一下三个属性:

(1).event.source:发送消息的窗口

(2).event.origin:消息发向的网站

(3).event.data:消息内容

具体实例：

a.com/index.html中的代码：

<iframe id="ifr" src="b.com/index.html"></iframe>

<script type="text/javascript"

window.onload=function() {

var ifr = document.getElementById('ifr');

var targetOrigin = 'http://b.com'; // 若写成 'http://b.com/c/proxy.html' 效果一样

// 若写成 'http://c.com' 就不会执行 postMessage了 ifr.contentWindow.postMessage('I was there!', targetOrigin); };

</script>

b.com/index.html中的代码：

<script type="text/javascript">

window.addEventListener('message', function (event){ //通过origin属性判断消息来源地址

if(event.origin == 'http://a.com') {

alert(event.data); //弹出"I was there!"

alert(event.source); //对a.com、index.html中window对象的引用 //但由于同源策略，这里event.source不可以访问window对象

}

},false);

</script>