一、問(wèn)答題

1. 什么是同源策略

（1）含義：1995年，同源政策由 Netscape 公司引入瀏覽器。目前，所有瀏覽器都實(shí)行這個(gè)政策。
最初，它的含義是指，A網(wǎng)頁(yè)設(shè)置的 Cookie，B網(wǎng)頁(yè)不能打開，除非這兩個(gè)網(wǎng)頁(yè)“同源”。所謂“同源”指的是”三個(gè)相同“。

1.協(xié)議相同
2.域名相同
3.端口相同

（2）目的：同源政策的目的，是為了保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)。
（3）限制范圍：隨著互聯(lián)網(wǎng)的發(fā)展，“同源政策”越來(lái)越嚴(yán)格。目前，如果非同源，共有三種行為受到限制。

1.Cookie、LocalStorage 和 IndexedDB 無(wú)法讀取。
2.DOM 無(wú)法獲得。
3.AJAX 請(qǐng)求不能發(fā)送。

2. 什么是跨域？跨域有幾種實(shí)現(xiàn)形式

（1）神馬是跨域（Cross Domain）?
說(shuō)白點(diǎn)就是post、get的url不是你當(dāng)前的網(wǎng)站，域名不同。例如在aaa.com/a.html里面，表單的提交action是bbb.com/b.html。
不僅如此，www.aaa.com和aaa.com之間也屬于跨域，因?yàn)?a target="_blank" rel="nofollow">www.aaa.com是二級(jí)域名，aaa.com是根域名。
JavaScript出于安全方面的考慮，是不允許跨域調(diào)用其他頁(yè)面的對(duì)象的（同源策略 Same-Origin Policy）。

![Uploading 20111112120822363_491068.gif . . .]

20111112120822363.gif

關(guān)于JavaScript能否跨域通信的詳細(xì)說(shuō)明，見下表：
http://www.a.com/a.js訪問(wèn)以下URL的結(jié)果

（2）跨域的實(shí)現(xiàn)形式

• JSONP：JSONP (JSON with Padding)是一個(gè)簡(jiǎn)單高效的跨域方式，html中的script標(biāo)簽可以加載并執(zhí)行其他域的JavaScript，于是我們可以通過(guò)script標(biāo)記來(lái)動(dòng)態(tài)加載其他域的資源。例如我要從域A的頁(yè)面pageA加載域B的數(shù)據(jù)，那么在域B的頁(yè)面pageB中我以JavaScript的形式聲明pageA需要的數(shù)據(jù)，然后在pageA中用script標(biāo)簽把pageB加載進(jìn)來(lái)，那么pageB中的腳本就會(huì)得以執(zhí)行。JSONP在此基礎(chǔ)上加入了回調(diào)函數(shù)，pageB加載完之后會(huì)執(zhí)行pageA中定義的函數(shù)，所需要的數(shù)據(jù)會(huì)以參數(shù)的形式傳遞給該函數(shù)。JSONP易于實(shí)現(xiàn)，但是也會(huì)存在一些安全隱患，如果第三方的腳本隨意地執(zhí)行，那么它就可以篡改頁(yè)面內(nèi)容，截獲敏感數(shù)據(jù)。但是在受信任的雙方傳遞數(shù)據(jù)，JSONP是非常合適的選擇。

• window.name：window對(duì)象的name屬性是一個(gè)很特別的屬性，當(dāng)該window的location變化，然后重新加載，它的name屬性可以依然保持不變。那么我們可以在頁(yè)面A中用iframe加載其他域的頁(yè)面B，而頁(yè)面B中用JavaScript把需要傳遞的數(shù)據(jù)賦值給window.name，iframe加載完成之后，頁(yè)面A修改iframe的地址，將其變成同域的一個(gè)地址，然后就可以讀出window.name的值了。這個(gè)方式非常適合單向的數(shù)據(jù)請(qǐng)求，而且協(xié)議簡(jiǎn)單、安全。不會(huì)像JSONP那樣不做限制地執(zhí)行外部腳本。

• document.domain：通過(guò)修改document的domain屬性，我們可以在域和子域或者不同的子域之間通信。同域策略認(rèn)為域和子域隸屬于不同的域，比如www.a.com和sub.a.com是不同的域，這時(shí)，我們無(wú)法在www.a.com下的頁(yè)面中調(diào)用sub.a.com中定義的JavaScript方法。但是當(dāng)我們把它們document的domain屬性都修改為a.com，瀏覽器就會(huì)認(rèn)為它們處于同一個(gè)域下，那么我們就可以互相調(diào)用對(duì)方的method來(lái)通信了。

• window.postMessage：window.postMessage是html5定義的一個(gè)很新的方法，這個(gè)方法可以很方便地跨window通信。由于它是一個(gè)很新的方法，所以在很舊和比較舊的瀏覽器中都無(wú)法使用。

• CORS：CORS需要瀏覽器和服務(wù)器同時(shí)支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。
  整個(gè)CORS通信過(guò)程，都是瀏覽器自動(dòng)完成，不需要用戶參與。對(duì)于開發(fā)者來(lái)說(shuō)，CORS通信與同源的AJAX通信沒(méi)有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請(qǐng)求跨源，就會(huì)自動(dòng)添加一些附加的頭信息，有時(shí)還會(huì)多出一次附加的請(qǐng)求，但用戶不會(huì)有感覺(jué)。
  因此，實(shí)現(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實(shí)現(xiàn)了CORS接口，就可以跨源通信。

3. jsonp 的原理是什么

• 原理：
  1、瀏覽器的同源策略把跨域請(qǐng)求都禁止了；
  2、HTML的<script>標(biāo)簽是例外，可以突破同源策略從其他來(lái)源獲取數(shù)據(jù)；
  3、由上可得，我們可以通過(guò)動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽引入jsonp文件，然后通過(guò)一系列JS操作獲取數(shù)據(jù)。

• JSONP所存在的問(wèn)題：

  • 使用遠(yuǎn)程網(wǎng)站的script標(biāo)簽時(shí)，若遠(yuǎn)程網(wǎng)站的script標(biāo)簽本身存在著漏洞，則引入的網(wǎng)站也會(huì)被影響，跨域的網(wǎng)站需要相互驗(yàn)證，并設(shè)置token。來(lái)保證安全性。
  • 基于script標(biāo)簽的資源能能get數(shù)據(jù)，不能post數(shù)據(jù)，也就是說(shuō)，只能讀，不具有寫的功能。
  • callback可能被注入一些惡意字符，可采用正則過(guò)濾的方式來(lái)消除這種錯(cuò)誤。

4. CORS是什么

它的全稱叫做Cross-Origin Resource Sharing，也就是跨域資源共享的意思，它是一種W3C規(guī)范，允許從瀏覽器的跨域通信。通過(guò)建立XMLHttpRequest對(duì)象的header，CORS允許開發(fā)者使用相同的習(xí)慣作為跨域請(qǐng)求工作。Chrome、Firefox、Opera和Safari都是用XMLHttpRequest2中的對(duì)象，而IE則使用類似的XDomainRequest。
具體使用方法：在要被請(qǐng)求的文件中聲明header(“Access-Control-Allow-Origin: example.org”)即可
在IE10及以下，CORS都具有兼容性問(wèn)題。

二、實(shí)操題

1.降域

11.png

12.png

2.CORS

在http://www.a.wayne.com:8080/loadmore.html 中加載 'http://www.b.wayne.com:8080/loadMore.php'

cors.png

在php文件加了header("Access-Control-Allow-Origin: http://www.a.wayne.com:8080");

微信截圖_20161027175329.png

3.JSONP

a.wayne.com:8080/demo2.html 中加載 b.wayne.com:8080/data.js

jsonp1.png

jsonp2.png

jsonp3.png

版權(quán)聲明：本教程版權(quán)歸饑人谷和作者（我）所有，轉(zhuǎn)載須說(shuō)明來(lái)源。