1.同源策略
是指瀏覽器普遍默認(rèn)的一種安全策略锰悼；
例如：
一個惡意網(wǎng)站的頁面通過iframe嵌入了銀行的登錄頁面（二者不同源），如果沒有同源限制悼泌，惡意網(wǎng)頁上的javascript腳本就可以在用戶登錄銀行的時候獲取用戶名和密碼松捉。
- 同源：
即是指URL具有相同的協(xié)議、域名馆里、端口隘世；可以理解為當(dāng)前域名下的腳本，只能讀寫當(dāng)前域名下的數(shù)據(jù)資源鸠踪，而無法獲取其他資源丙者；
2.跨域以及跨域有幾種實(shí)現(xiàn)形式
通過一些方法，突破同源策略的限制
實(shí)現(xiàn)方式包括
- 降域
(當(dāng)域名有相同后綴時可使用营密，使用不多械媒，容易產(chǎn)生安全問題，一個子頁面收到攻擊，所有數(shù)據(jù)都存在泄漏的風(fēng)險）
在當(dāng)前域名及調(diào)用數(shù)據(jù)內(nèi)部都添加
document.domain=XXXX...
XXX只能設(shè)置為當(dāng)前域名的上一級~上N級域名纷捞、
可以繼續(xù)向下修改痢虹，不能向上進(jìn)行修改
- JSONP
- CORS
3.JSONP的原理
在當(dāng)前域創(chuàng)建一個函數(shù)XXX，創(chuàng)建一個動態(tài)script標(biāo)簽主儡，并將想要調(diào)用數(shù)據(jù)的域名設(shè)置為script的src值奖唯，且需要添加一個參數(shù)值callback=xxx，與之前創(chuàng)建的函數(shù)糜值，聲明一致丰捷。這樣獲取到了需要的數(shù)據(jù)，并且在當(dāng)前域執(zhí)行xxx（data）寂汇；
<script>
window.newfun=function(data ){ //當(dāng)前域聲明一個函數(shù)
alert（）
}
<script>
var script=document.createElement('script'); //創(chuàng)建一個動態(tài)script標(biāo)簽
script.src='//abc.com/ac.js?callback=newfun' //向服務(wù)器請求callback數(shù)據(jù)
document.body.appendChild('script'); //添加到頁面
<script>
</script>
//后臺服務(wù)器寫法
var callback=this.query.newfun;
this.body=callback+'(data)';
- 缺點(diǎn)：
如果a.com可以訪問b.com病往，那么完全可以讓c.com也訪問b.com，解決方法有要么用正則過濾掉不應(yīng)該出現(xiàn)的字符串骄瓣，要么約定好一套數(shù)據(jù)停巷，比如cookies來互相匹配
不能用post只能get
4.CORS
Cross Origin Rescource Sharing 跨域資源共享
在調(diào)用數(shù)據(jù)文檔內(nèi)加入響應(yīng)頭，在當(dāng)前域名直接用ajax調(diào)用即可
this.set('Access-Control-Allow-Origin','當(dāng)前域名')
缺點(diǎn)是IE8,9兼容存在問題
本地模擬同源策略
首先找到系統(tǒng)的hosts文件（windows系統(tǒng)的路徑 C:\Windows\System32\drivers\etc）默認(rèn)情況下累贤，只有l(wèi)ocalhost指向本地IP 127.0.0.1叠穆，在hosts文件中我們可以為其添加多個域名
模擬同源策略
- JSONP
window.newfun=function(data){
alert(data);}
var script=document.createElement('script');
script.type='text/javascript';
script.src='//b.com/task31/data.php?callback=newfun';
document.body.appendChild(script);
</script>
//后臺
newfun('我是數(shù)據(jù)');
JSONP
- CORS
$.ajax({
url:'//b.com/task31/data.php',
type:'get',
datatype:'json',
// jsonp:'callback',
success:function(data){
console.log(data);
},
error:function(){
console.log('there is problem');
}
})
//后臺
<?php
header('Access-Control-Allow-Origin:http://a.com');
$data='i am data';
echo json_encode($data);
?>
CORS
