- 什么是同源策略
- 同源策略是瀏覽器的一個(gè)功能(same-origin-policy)
- 同源就是協(xié)議、域名奕短、端口號(hào)都相同的URL
- 不同源的客戶端腳本在一般授權(quán)下不能讀寫對(duì)方的資源杈女。但是可以引用啰劲。
a.com/index.html
可以引用b.com/main.js
可以引用b.com/style.css
可以引用b.com/logo.bng
但是a.com里面的b.com/main.js不能對(duì)b.com的資源進(jìn)行讀寫
- http默認(rèn)端口80,https默認(rèn)端口443
例：http://www.a.com/index.html（與以下URL對(duì)比）
http://www.a.com/reg.html (同源)
http://1s.a.com/reg.htm(域名不同栓辜，不同源)
https://www.a.com/index.htm(協(xié)議不同周荐，不同源)
http://www.a.com:8080/reg.html (端口不一致默怨，不同源)
- 什么是跨域垃僚？跨域有幾種實(shí)現(xiàn)形式
- ajax或者iframe指向URL時(shí)改淑，只有在域名、端口、協(xié)議主頁面完全相同時(shí)才行，否則就算跨域
- 跨域的解決方式：
1降域
2JSONP
3CORS(Cross-Origin Resoure Sharing,HTTP2方法)
4postMessage(HTML5 API)
5其他hack：利用hash成肘、利用window.name - 降域是什么
- 降域是使兩個(gè)不同源的URL轉(zhuǎn)變成同源狀態(tài)。（在iframe狀態(tài)下）
可以通過降域?qū)崿F(xiàn)同源的URL：
child1.a.com 與 a.com
child1.a.com 與 child2.a.com
child1.a.com 與 xxx.child2.a.com
- 通過給當(dāng)前頁面和iframe加上document.domain = a.com進(jìn)行降域處理掀宋。
- jsonp 的原理是什么
- jsonp可以看做是一個(gè)動(dòng)態(tài)的script币呵，jsonp的使用分為兩步
1在當(dāng)前html中申明xxx方法，給目標(biāo)路由發(fā)送一個(gè)callback=xxx的參數(shù)
2返回路由中JS的內(nèi)容陶贼，調(diào)用xxx這個(gè)方法
var script = document.createElement('script');
script.src = 'http://b.com:8080/jsonp?callback=fn';
document.head.appendChild(script);
//document.head.removeChild(script);用于多次使用刪除痕跡
//在當(dāng)前a.com中創(chuàng)建一個(gè)script，給引用b.com，并傳遞一個(gè)callback為fn的參數(shù)。
fn=req.query.callback
res.send(fn + '(' + JSON.stringify(data)+ ')')
//在路由中返回這個(gè)fn(arg),并在a.com下執(zhí)行呛每，arg參數(shù)通過 JSON.stringify(data)轉(zhuǎn)化data這個(gè)json對(duì)象而來。
- jsonp的問題：
1只能進(jìn)行GET請(qǐng)求
2可被注入（callback=alert(1);）惡意代碼
cb = cb.replace(/\(/g, '');
cb = cb.replace(/\)/g, '');
//用正則阻止惡意代碼執(zhí)行
3需要校驗(yàn)身份（Token）
- CORS是什么
- CORS(Cross-Origin Resource Sharing ——跨域資源共享)是HTTP2的方法鳞骤。它允許瀏覽器向跨源服務(wù)器美旧，發(fā)出XMLHttpRequest請(qǐng)求，從而克服了AJAX只能同源使用的限制停做。
- 表達(dá)的意思是：
1b.com 聲明：我允許 a.com 來訪問我
2a.com 中的 JS 發(fā)起對(duì) b.com 的 ajax
XMLHttpRequest.open('get', 'http://b.com:8080/cors', true);
//a.com下向b.com發(fā)送請(qǐng)求
res.header("Access-Control-Allow-Origin", "http://a.com:8080");
// res.header("Access-Control-Allow-Origin", "*");接受源無限制
//在b.com下加上請(qǐng)求頭部
- postMessage是什么
- postMessage是利用了HTML5的API，在a.com下引用b.com的iframe頁面爬舰，使用
window.frames[0].postMessage(data, '*');向b.com下發(fā)送內(nèi)容，而b.comwindow.parent.postMessage(data, '*');向a.com下發(fā)送內(nèi)容少辣。在a.com與b.com下通過綁定message事件來得到data。
window.addEventListener('message', function(event){
console.log(event.data);
})
//當(dāng)前頁面下接受信息后輸出此事件的信息
本博客版權(quán)歸 本人和饑人谷所有弓乙，轉(zhuǎn)載需說明來源
