什么是同源策略
一個源的定義
如果協(xié)議，端口（如果指定了一個）和域名對于兩個頁面是相同的，則兩個頁面具有相同的源。
同源策略限制從一個源加載的文檔或腳本如何與來自另一個源的資源進(jìn)行交互。這是一個用于隔離潛在惡意文件的關(guān)鍵的安全機(jī)制。
什么是跨域？跨域有幾種實(shí)現(xiàn)形式
出于安全方面考慮，瀏覽器根據(jù)同源策略來限制不同源的頁面之間的交互，雖然這些限制是必要的，但是有時很不方便，合理的用途也受到影響，跨域就是去規(guī)避瀏覽器同源策略的限制來實(shí)現(xiàn)你想要的功能，目前跨域一般使用JSONP與CORS，特殊情況下有降域與postMessage等方法
JSONP 的原理是什么
由于同源策略使得網(wǎng)頁無法訪問與其不同源的網(wǎng)頁的內(nèi)容，但是在web頁面中，js文件的調(diào)用不受同源策略的影響，因此可以在遠(yuǎn)程服務(wù)器上設(shè)法把數(shù)據(jù)裝進(jìn)js格式的文件里，供客戶端調(diào)用和進(jìn)一步處理恰巧我們已經(jīng)知道有一種叫做JSON的純字符數(shù)據(jù)格式可以簡潔的描述復(fù)雜數(shù)據(jù)，更妙的是JSON還被js原生支持，所以在客戶端幾乎可以隨心所欲的處理這種格式的數(shù)據(jù),為了便于客戶端使用數(shù)據(jù)，逐漸形成了一種非正式傳輸協(xié)議，人們把它稱作JSONP，該協(xié)議的一個要點(diǎn)就是允許用戶傳遞一個callback參數(shù)給服務(wù)端，然后服務(wù)端返回?cái)?shù)據(jù)時會將這個callback參數(shù)作為函數(shù)名來包裹住JSON數(shù)據(jù)，這樣客戶端就可以隨意定制自己的函數(shù)來自動處理返回?cái)?shù)據(jù)了。
CORS是什么
CORS是一個W3C標(biāo)準(zhǔn)，全稱是"跨域資源共享"（Cross-origin resource sharing）。
它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest
請求，從而克服了AJAX只能同源使用的限制。
整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對于開發(fā)者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。
因此，實(shí)現(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實(shí)現(xiàn)了CORS接口，就可以跨源通信。（瀏覽器必須IE10以上才支持）
降域
相同父級域名下的兩個子頁面需要相互訪問時使用document.domain = 'xxx.com'(相同的父級域名)即可`
//頁面A
<body>
<div class="main">
<input type="text" placeholder="http://a.jrg.com/a.html">
</div>
<iframe src="http://b.jrg.com/b.html" frameborder="1"></iframe>
<script>
document.querySelector('.main input').addEventListener('input', function () {
window.frames[0].document.querySelector('input').value = this.value
})
document.domain = 'jrg.com'
</script>
</body>
/////////////////////////////////////////////////
<body>//頁面B
<div class="ct">
<input type="text" placeholder="http://b.jrg.com/b.html">
</div>
<script>
document.querySelector('input').addEventListener('input', function () {
window.parent.document.querySelector('input').value = this.value
})
document.domain = 'jrg.com'
</script>
</body>
