問答

1.什么是同源策略

同源指相同協(xié)議,相同域名,相同端口號.
在控制臺我們得到以下信息：

location.protocol 協(xié)議
location.hostname 域名
location.port 端口號
http協(xié)議默認(rèn)80端口，https默認(rèn)443端口，ftp協(xié)議默認(rèn)21端口。
同源策略是指：不同源的客戶端腳本（JS）在沒有明確授權(quán)的情況下，不能讀寫對方的資源。
同源政策的目的：為了保證用戶數(shù)據(jù)的安全，防止惡意的網(wǎng)站竊取。同源策略的限制范圍：

• Cookie、LocalStorage 和 IndexDB 無法讀取。
• DOM 無法獲得。
• AJAX 請求不能發(fā)送。

舉例

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

跨域就是突破同源策略的限制。
跨域?qū)崿F(xiàn)方式：
**1.document.domain+iframe‘‘降域’ **
應(yīng)用范圍：這種辦法只能解決主域相同而子域不同，且是iframe形式的跨域；
缺點(diǎn)：安全性不高，當(dāng)一個小站點(diǎn)sss.a.com被攻擊后，所有a.com站點(diǎn)會引起安全漏洞。

2.JSONP
應(yīng)用范圍： 通過script引入，只能進(jìn)行GET請求
存在問題：存在安全性問題，可被注入可執(zhí)行的js代碼（callback=alert(1)
）, 對于這個問題，只能通過外界的字符串過濾來解決，如禁止callback中傳入括號，使用正則去除左右括號，callback=callback.replace(/(/g,"")
，callback=callback.replace(/)/g,"")

3.CORS
給被訪問方設(shè)置Access-Control-Allow-Origin，如在php文件頭部寫入header('Access-Control-Allow-Origin:http://a.com:8080'),表示允許來自源http://a.com:8080的請求。
這是跨域AJAX請求的根本解決方法。相比JSONP只能發(fā)GET請求，CORS允許任何類型的請求。但是IE10及以下IE版本不支持。

4.HTML5 postMessage這是HTML5的新功能，用postMessage支持基于web的實(shí)時消息傳遞。

5.利用iframe和location.hash，原理是利用location.hash來傳值。url中#號及其后面的內(nèi)容就是location.hash,改變hash的值頁面并不會刷新，所以可以利用hash值來進(jìn)行數(shù)據(jù)傳遞。這種方法缺點(diǎn)也很多，諸如數(shù)據(jù)直接暴露在了url中，數(shù)據(jù)容量和類型都有限等。

6.利用window.name主要利用window.name值不隨url改變而改變，只要當(dāng)前頁面沒被關(guān)閉，window.name的值就不會改變。

3.jsonp 的原理是什么

就是利用<script>標(biāo)簽沒有跨域限制的“漏洞”來達(dá)到與第三方通訊的目的。
當(dāng)需要通訊時，本站腳本創(chuàng)建一個<script>元素，地址指向第三方的API網(wǎng)址，形如： <src="http://www.example.net/api?param1=1&param2=2">并提供一個回調(diào)函數(shù)來接收數(shù)據(jù)（函數(shù)名可約定，或通過地址參數(shù)傳遞）。
第三方產(chǎn)生的響應(yīng)為json數(shù)據(jù)的包裝（故稱之為jsonp，即json padding），形如:callback({"name":"hax","gender":"Male"})這樣瀏覽器會調(diào)用callback函數(shù)，并傳遞解析后json對象作為參數(shù)。
本站腳本可在callback函數(shù)里處理所傳入的數(shù)據(jù)。

缺點(diǎn)：
（1）任意網(wǎng)站只要通過jsonp方式就可以跨域訪問目標(biāo)域名下的信息，解決辦法：在跨域請求數(shù)據(jù)時在參數(shù)中加上與目標(biāo)域名約定好的一個token變量，這樣其他網(wǎng)站訪問該域名時，目的網(wǎng)站通過辨認(rèn)這個約定好的信息而決定是否可以被跨域訪問。
（2）不能用post方法獲取數(shù)據(jù)，由于基于src地址引用方式，在地址中附帶參數(shù)信息，因此只能用get方式獲取信息
（3）callback方法由于是根據(jù)用戶需求自己實(shí)現(xiàn)的，可能會被惡意注入腳本，獲取隱私信息。

4.CORS是什么

CORS是跨源資源分享（Cross-Origin Resource Sharing）的縮寫。它是W3C標(biāo)準(zhǔn)，是跨源AJAX請求的根本解決方法。相比JSONP只能發(fā)GET請求，CORS允許任何類型的請求。
CORS需要瀏覽器和服務(wù)器同時支持，只要服務(wù)器實(shí)現(xiàn)了CORS接口，且瀏覽器支持該功能（目前所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10），就可以跨域通信。對于開發(fā)者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。

舉例

• 假設(shè)我們頁面或者應(yīng)用已在 http://www.test1.com 上了，而我們打算從 http://www.test2.com 請求提取數(shù)據(jù)。一般情況下，如果我們直接使用 AJAX 來請求將會失敗。利用 CORS，http://www.test2.com 只需添加一個標(biāo)頭，就可以允許來自 http://www.test1.com 的請求，下圖是我在PHP中的 hander() 設(shè)置，“”號表示允許任何域向我們的服務(wù)端提交請求*：

header("Access-Control-Allow-Origin:*"); //*表示允許任何域向我們的服務(wù)端提交需求
header("Access-Control-Allow-Origin:http://www.test1.com") //這樣就允許來自http://www.test1.com的需求了

通過在HTTP Header中加入擴(kuò)展字段，服務(wù)器在相應(yīng)網(wǎng)頁頭部加入字段表示允許訪問的domain和HTTP method客戶端檢查自己的域是否在允許列表中，決定是否處理響應(yīng)。服務(wù)器端在HTTP的響應(yīng)頭中加入（頁面層次的控制模式）：
Access-Control-Allow-Origin: example.comAccess-Control-Request-Method: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization,Accept, Range, Origin
Access-Control-Expose-Headers: Content-Range
Access-Control-Max-Age: 3600
多個域名之間用逗號分隔，表示對所示域名提供跨域訪問權(quán)限?！?”表示允許所有域名的跨域訪問。

相關(guān)文檔:跨域資源共享 CORS 詳解

練習(xí)

• 本地搭建服務(wù)器，演示同源策略

• 至少使用一種方式解決跨域問題

                   本文版權(quán)歸作者_(dá)Josh和饑人谷所有，轉(zhuǎn)載請注明來源