JS篇同源策略、CORS、XSS、SessionCookie

本文轉載自查看原文 2014-11-06 14:16 13371

同源策略：

如何引用: (iFrame指的是iframe DOM節點)
1. 引用iframe的window對象：iFrame.contentWindow
2. 引用iframe的document對象：iFrame.contentDocument，或者：iFrame.contentWindow.document

示例：

兩個頁面，前者頁面中嵌入iframe，src指向后者：
1. test.nuomi.com/link1.vm
2. nuomi.com/link2.vm；

同源要求：Protocols, domains, and ports均相同
子域名不同的兩個站:test.nuomi.com, nuomi.com，如果要通信，都必須設置為統一的域名：document.domain=nuomi.com；
即使其中一個已經是域名：nuomi.com，仍然需要明確調用：document.domain=nuomi.com；

document.domain設值：
1. 只能是當前域名的suffix，否則報錯：Uncaught SecurityError: Failed to set the 'domain' property on 'Document': 'test' is not a suffix of 'test.nuomi.com'.
2. 設值為com也會報錯：'com' is a top-level domain.
3. 必須是"."點分隔的后綴，否則報錯：'mi.com' is not a suffix of 'test.nuomi.com'

不同源時：

1. 外面訪問里面window的document屬性：iFrame.contentDocument
Chrome報錯：　　Uncaught SecurityError: ... Protocols, domains, and ports must match.
Firefox報錯：　　 null
IE9報錯：　　　 SCRIPT5: 拒絕訪問

2. 里面訪問外面window的document屬性：window.parent.document
Chrome報錯：　　Uncaught SecurityError: ... Protocols, domains, and ports must match.
Firefox報錯：　　 Permission denied to access property 'document'
IE9報錯：　　　　SCRIPT5: 拒絕訪問

術語：

1. CORS　　　　Cross-Origin-Resource-Sharing. (跨域資源共享)

2. ACAO　　　　Access-Control-Allow-Origin

解決方案：

1. 如果都屬於同一個域名，但子域不同時，都設置document.domain；即可相互訪問；

2. JSONP通信

// jQuery JSONP
var def = $.ajax({ url: "http://nuomi.com/test/request/page/jsonp0.jsp", dataType: "jsonp", //jsonp: "cbNameFlag",
    jsonpCallback:  "cbNameTest" }).done(function(data, textStatus, jqXHR ){ console.log("Access done:", arguments, data.info); }).fail(function( jqXHR, textStatus, errorThrown){ console.log("Access fail:", arguments); });

3. Access-Control-Allow-Origin

　　這種方案支持兩種：

　　1) 簡單的請求：

　　請求方法不支持Put，Delete；

　　此時Request header會包含：Origin: http://test.nuomi.com;

　　期待Response header包含：Access-Control-Allow-Origin: http://test.nuomi.com

　　2) Preflight方式的請求：

　　這種方式，代碼中雖然請求一次，但是實際會請求兩次：第一次發送OPTION方法，詢問對方是否支持我方某種請求方式（如：GET，POST）？如果第一次進過允許，那么發送第二次請求；否則第二次不再發送；

　　第一次請求：

　　　　Request頭包括：　　Origin，Access-Control-Request-Method，Access-Control-Request-Headers（optional），

　　　　Response頭包括：　Access-Control-Allow-Origin，Access-Control-Allow-Methods，Access-Control-Allow-Headers

　　　　如圖所示：

　　第二次請求：

　　　　直接用代碼中的方法發送（PUT、DELETE），然后得到結果；

　　從"6. CORS tutorial"轉載的流程如下：

4. postMessage解決跨域問題，支持IE9及以上；

/* 外面頁面的script */
function msgHandler(e){ 　　console.log("Outer message:", e); } if(window.addEventListener){ 　　window.addEventListener("message", msgHandler, false); }else{ 　　window.attachEvent("message", msgHandler); } // 待加載后發送
$("#iframe1").on("load", function(e){ 　　console.info("Iframe onLoad:", e); 　　$("#iframe1")[0].contentWindow.postMessage("Data from outer, repects 'the structured clone algorithm. '", "*"); });

 1 /* 里面頁面的script */
 2 function msgHandler(e){  3     console.log("Inner message:", e);  4 }  5 
 6 if(window.addEventListener){  7     window.addEventListener("message", msgHandler, false);  8 }else{  9     window.attachEvent("message", msgHandler); 10 } 11 window.parent.postMessage("Data from inner to outer.", "*");