同源策略和跨域

时间 2019-12-04

标签同源策略繁體版

原文原文链接

1、同源策略

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

2、跨域方法

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

1. JSONP技术

1）ajaxhtml

$.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传输的技术html5

<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.htmljava

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

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

如何访问数据：跨域

<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);

3、 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>