同源策略和跨域

時間 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>