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