您的位置：首页 > 其它

同源策略和跨域

2017-10-18 00:00 225 查看

一、同源策略

处于安全考虑，脚本只能读取和所属文档来源相同的窗口和文档的属性。来源相同即所谓的同源策略。需要保证协议、主机以及URL的端口都全部相同！三者有一个不一样就非同源！

二、跨域方法

对于小网站而言，资源可以集中都放到同源服务器下，而对于大型网站而言，都把资源放到一个同源服务器中显然对这个服务器的压力会很大。所以在很多情况下，必须打破这一安全策略，实现跨域分布。如下有几种方法可以实现！

1. JSONP技术

1）ajax

$.ajax({
type : "get",
async:false,
url : "http://app.example.com/base/json.do?sid=1494&busiId=101",
dataType : "jsonp",//数据类型为jsonp
jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数
success : function(data){
$("#showcontent").text("Result:"+data.result)
},
error:function(){
alert('fail');
}
});

2）使用<script>元素作为Ajax传输的技术

<script type="text/javascript">
function jsonpCallback(result) {
alert(result.a);
alert(result.b);
alert(result.c);
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
}
</script>
<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>

2. document.domain属性注明相同的域

现有父域：http://b.com/b.com.html

要向子域：http://a.b.com/a.b.com.html获取数据怎么办？

将document.domain = 'b.com';都设置为父域即可

如何访问数据：

<script>
document.domain = 'b.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://a.b.com/a.b.com.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
// 这里操作DOM
var oUl = doc.getElementById('ul1');
alert(oUl.innerHTML);
ifr.onload = null;
};
</script>

3. HTML5 提供了一个基于事件的消息传输API

html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递：

postMessage(data,origin)方法接受两个参数。

myPopup = window.open(URL);
//发送
myPopup.postMessage(message,URL);

//监听消息反馈
window.addEventListener('message',function(event) {
if(event.origin !== 'http://scriptandstyle.com') return;
console.log('received response:  ',event.data);
},false);

三、 window对象之间的通信

在同源的情况下两个窗口之间可以相互访问：

demo1.html

<body>
<button id="btnOpen">打开demo2窗口</button>
<button id="btnClose">关闭demo2窗口</button>
<button id="btnGet">获取demo2窗口的值</button>
<input id="iput" name="ipName" value="这是窗口1的DOM数据"/>
<script>
var w ;
var str = "我是demo1的变量";
var btnOpen = document.getElementById('btnOpen');
var btnClose = document.getElementById('btnClose');
var btnGet = document.getElementById('btnGet');

//打开demo2
btnOpen.onclick =function () {
w = window.open("demo2.html");
};
//访问demo2窗口文档中的a变量
btnGet.onclick = function () {
alert("\n " + w.a); //a = "我是demo2的变量哦";
};
//关闭demo2
btnClose.onclick = function () {
w.close();
};
</script>
</body>

demo2.html

<body>
<input id="ip1"/>
<input id="ip2"/>
<script>
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
var a = "我是demo2的变量哦";

//获取demo1中js的变量值
ip1.value = opener.str;
//获取demo1的DOM节点
var w1 = window.opener.document.getElementById("iput");
//获取demo1中DOM节点值
ip2.value = w1.value;
//修改demo1中DOM节点值
w1.value = "我被窗口2给改了数据";
</script>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航