同源策略:
如何引用: (iFrame指的是iframe DOM節(jié)點)1. 引用iframe的window對象:iFrame.contentWindow2. 引用iframe的document對象:iFrame.contentDocument猾警,或者:iFrame.contentWindow.document
示例:
兩個頁面孔祸,前者頁面中嵌入iframe,src指向后者:1. test.nuomi.com/link1.vm2. nuomi.com/link2.vm发皿;
同源要求:Protocols, domains, and ports均相同子域名不同的兩個站:test.nuomi.com, nuomi.com崔慧,如果要通信,都必須設置為統(tǒng)一的域名: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'
不同源時:
- 外面訪問里面window的document屬性:iFrame.contentDocumentChrome報錯: Uncaught SecurityError: ... Protocols, domains, and ports must match.Firefox報錯: nullIE9報錯: SCRIPT5: 拒絕訪問
- 里面訪問外面window的document屬性:window.parent.documentChrome報錯: Uncaught SecurityError: ... Protocols, domains, and ports must match.Firefox報錯: Permission denied to access property 'document'IE9報錯: SCRIPT5: 拒絕訪問
術語:
- CORS **Cross-Origin-Resource-Sharing. (跨域資源共享) **
- ACAO Access-Control-Allow-Origin
解決方案:
- 如果都屬于同一個域名,但子域不同時松捉,都設置document.domain;即可相互訪問;
- 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);
});
- Access-Control-Allow-Origin
這種方案支持兩種:
1) 簡單的請求:
請求方法不支持Put伞芹,Delete怯邪;
此時Request header會包含:O****rigin: http://test.nuomi.com;
期待Response header包含:A****ccess-Control-Allow-Origin: http://test.nuomi.com
2) Preflight方式的請求:
這種方式,代碼中雖然請求一次丙者,但是實際會請求兩次:第一次發(fā)送OPTION方法复斥,詢問對方是否支持我方某種請求方式(如:GET,POST)械媒?如果第一次進過允許目锭,那么發(fā)送第二次請求;否則第二次不再發(fā)送滥沫;
第一次請求:
Request頭包括: Origin侣集,Access-Control-Request-Method,Access-Control-Request-Headers(optional)兰绣,
Response頭包括: Access-Control-Allow-Origin世分,Access-Control-Allow-Methods,Access-Control-Allow-Headers
如圖所示:
第二次請求:
直接用代碼中的方法發(fā)送(PUT缀辩、DELETE)臭埋,然后得到結果;
從"6. CORS tutorial"轉載的流程如下:
- postMessage解決跨域問題臀玄,支持IE9及以上瓢阴;
復制代碼
/* 外面頁面的script /function msgHandler(e){ console.log("Outer message:", e);}if(window.addEventListener){ window.addEventListener("message", msgHandler, false);}else{ window.attachEvent("message", msgHandler);}// 待加載后發(fā)送$("#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.", "");
CORS:
全稱是跨域資源共享(Corss Origin Resource Sharing), 于2014年1月已經成為CORS W3C標準健无。里面增加了預請求Preflight以支持更廣范圍的場景荣恐。
常見的頭信息包括:
Request Headers:
Origin、Access-Control-Request-Method、Access-Control-Request-Headers
Response Headers:
1. 允許向該服務器提交請求的URI
Access-Control-Allow-Origin: <origin> | *
2. 瀏覽器允許訪問的服務器的頭信息的白名單
Access-Control-Expose-Headers: ..., ...
3. 請求有效期(單位:秒):
Access-Control-Max-Age: <seconds>
4. 允許的請求方法:
Access-Control-Allow-Methods
5. 實際的請求中,可以使用的自定義HTTP請求頭
Access-Control-Allow-Headers
6. 告知客戶端,當請求XHR的withCredientials屬性是true的時候,響應是否可以被得到叠穆。(從而使得下一次請求時少漆,上一次的Cookies可以隨著請求發(fā)送)
Access-Control-Allow-Credentials:
例子: withCredential without credential
參考資料:
- Same-origin policy https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#Changing_origin
- document.domain https://developer.mozilla.org/en-US/docs/Web/API/document.domain
- HTML <iframe> Element https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
- window.postMessage https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
- Allow CORS https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
- CORS tutorial http://www.html5rocks.com/en/tutorials/cors/
XSS:
全稱是跨站腳本攻擊(Cross Site Scripting),通過在用戶瀏覽某個存在XSS漏洞的站點時硼被,執(zhí)行特定的腳本或者第三方站點的腳本示损,從而可以用戶sessionid等之類的安全信息。
這類攻擊常被分為兩類:
1. 非持久型xss攻擊: 在URL中通過參數嵌入轉義的script腳本來嚷硫;
2. 存儲型XSS攻擊: 通過表單提交等方式检访,在字段中嵌入腳本內容,并存入到后端數據庫中仔掸;待其他用戶瀏覽時影響更多的用戶脆贵。
預防方式:對字段內容進行轉義,禁止:<script>之類的內容在前后HTTP中傳輸嘉汰;
Session丹禀、Cookie:
Session保存在服務器端,JAVA EE API寫到:
request.getSession(boolean) 參數為true時鞋怀,如果不存在則新建一個Session双泪;
session.getId() 可以獲取到唯一標識;
session.isNew() 判斷此時客戶端是否用過|知道此session密似;如果客戶端禁用Cookie則isNew()一直返回true焙矛;
session.invalidate() 失效session。
個人理解:session在server端新建后残腌,會通過response.addCookie()方法在cookie中添加sessionid村斟,否則此后server端怎么識別該客戶端呢?
Cookie保存于瀏覽器,里面會保存session信息抛猫,如果瀏覽器禁用Cookie蟆盹,可以在URL或者Form中添加session字段;