一好乐、同源策略
1、先來說說什么是源
對(duì)于以下的這段URL
http://user:pass@www.company.com:80/dir/index.html?uid=1#ch1
-
http://協(xié)議名 -
user:pass登錄信息
-www.company.com域名（或ip地址绰沥、服務(wù)器地址）
-80端口號(hào)篱蝇，http協(xié)議默認(rèn)端口號(hào)為80端口，默認(rèn)情況下沒有顯示徽曲，https默認(rèn)端口號(hào)443态兴，ftp默認(rèn)21 -
/dir/index.html帶層次的文件路徑 -
uid=1查詢字符串 -
#ch1片段標(biāo)識(shí)符（hash）
源（origin）就是協(xié)議、域名和端口號(hào)疟位。
以上url中的源就是：http://www.company.com:80
若地址里面的協(xié)議、域名和端口號(hào)均相同則屬于同源喘垂。
以下是相對(duì)于 http://www.a.com/test/index.html 的同源檢測(cè)
- http://www.child.a.com/test/index.html ----失敗甜刻，域名不同
- https://www.a.com/test/index.html ----失敗，協(xié)議不同
- http://www.a.com:8080/test/index.html ----失敗正勒，端口號(hào)不同
2.什么是同源策略得院？
同源策略是瀏覽器的一個(gè)安全功能，不同源的客戶端腳本在沒有明確授權(quán)的情況下章贞，不能讀寫對(duì)方資源祥绞。所以a.com下的js腳本采用ajax讀取b.com里面的文件數(shù)據(jù)是會(huì)報(bào)錯(cuò)的。
-
不受同源策略限制的：
1鸭限、頁(yè)面中的鏈接蜕径，重定向以及表單提交是不會(huì)受到同源策略限制的。
2败京、跨域資源的引入是可以的兜喻。但是js不能讀寫加載的內(nèi)容。如嵌入到頁(yè)面中的<script src="..."></script>赡麦，<img>朴皆，<link>，<iframe>等泛粹。
二遂铡、跨域
1、什么是跨域
受前面所講的瀏覽器同源策略的影響晶姊，不是同源的腳本不能操作其他源下面的對(duì)象扒接。想要操作另一個(gè)源下的對(duì)象是就需要跨域。
2、跨域的實(shí)現(xiàn)形式
-
降域 document.domain
同源策略認(rèn)為域和子域?qū)儆诓煌挠蛑樵觯纾?/p>
child1.a.com 與 a.com超歌，
child1.a.com 與 child2.a.com，
xxx.child1.a.com 與 child1.a.com
兩兩不同源蒂教，可以通過設(shè)置 document.damain='a.com'巍举，瀏覽器就會(huì)認(rèn)為它們都是同一個(gè)源。想要實(shí)現(xiàn)以上任意兩個(gè)頁(yè)面之間的通信凝垛，兩個(gè)頁(yè)面必須都設(shè)置documen.damain='a.com'懊悯。
此方式的特點(diǎn)：
- 只能在父域名與子域名之間使用，且將
xxx.child1.a.com域名設(shè)置為a.com后梦皮，不能再設(shè)置成child1.a.com炭分。 - 存在安全性問題，當(dāng)一個(gè)站點(diǎn)被攻擊后剑肯，另一個(gè)站點(diǎn)會(huì)引起安全漏洞捧毛。
- 這種方法只適用于 Cookie 和 iframe 窗口。
-
JSONP跨域
JSONP和JSON并沒有什么關(guān)系让网！
JSONP的原理：（舉例：a.com/jsonp.html想得到b.com/main.js中的數(shù)據(jù)）在a.com的jsonp.html里創(chuàng)建一個(gè)回調(diào)函數(shù)xxx呀忧，動(dòng)態(tài)添加<script>元素，向服務(wù)器發(fā)送請(qǐng)求溃睹，請(qǐng)求地址后面加上查詢字符串而账，通過callback參數(shù)指定回調(diào)函數(shù)的名字。請(qǐng)求地址為http://b.com/main.js?callback=xxx因篇。在main.js中調(diào)用這個(gè)回調(diào)函數(shù)xxx泞辐，并且以JSON數(shù)據(jù)形式作為參數(shù)傳遞，完成回調(diào)竞滓。我們來看看代碼：
// a.com/jsonp.html中的代碼
function addScriptTag(src) {
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
window.onload = function () {
addScriptTag('http://b.com/main.js?callback=foo');
} //window.onload是為了讓頁(yè)面加載完成后再執(zhí)行
function foo(data) {
console.log(data.name+"歡迎您");
};
//b.com/main.js中的代碼
foo({name:"hl"})
這樣便實(shí)現(xiàn)了跨域的參數(shù)傳遞咐吼。
采用jsonp跨域也存在問題：
- 使用這種方法，只要是個(gè)網(wǎng)站都可以拿到b.com里的數(shù)據(jù)商佑，存在安全性問題汽烦。需要網(wǎng)站雙方商議基礎(chǔ)token的身份驗(yàn)證，這里不詳述莉御。
- 只能是GET撇吞，不能POST。
- 可能被注入惡意代碼礁叔，篡改頁(yè)面內(nèi)容牍颈，可以采用字符串過濾來規(guī)避此問題。
-
CORS
CORS是一個(gè)W3C標(biāo)準(zhǔn)琅关，全稱是"跨域資源共享"（Cross-origin resource sharing）煮岁。
它允許瀏覽器向跨源服務(wù)器讥蔽，發(fā)出XMLHttpRequest請(qǐng)求，從而克服了AJAX只能同源使用的限制画机。
剛才的例子中冶伞，在b.com里面添加響應(yīng)頭聲明允許a.com的訪問，代碼：
Access-Control-Allow-Origin: http://a.com
然后a.com就可以用ajax獲取b.com里的數(shù)據(jù)了步氏。
注意：此方法IE8以下完全不支持响禽，IE8-10部分支持。詳見caniuse-CORS
詳細(xì)內(nèi)容請(qǐng)參考：跨域資源共享 CORS 詳解
-
其它方法
- HTML5的postMessage方法
- window.name
-
location.hash
同源策略以及跨域演示
