問(wèn)答
1.什么是同源策略
同源指相同協(xié)議
,相同域名
,相同端口號(hào)
.
在控制臺(tái)我們得到以下信息:
location.protocol 協(xié)議
location.hostname 域名
location.port 端口號(hào)
http協(xié)議默認(rèn)80端口晚树,https默認(rèn)443端口姻采,ftp協(xié)議默認(rèn)21端口。
同源策略是指:不同源的客戶端腳本(JS)在沒(méi)有明確授權(quán)的情況下爵憎,不能讀寫(xiě)對(duì)方的資源慨亲。
同源政策的目的:為了保證用戶數(shù)據(jù)的安全,防止惡意的網(wǎng)站竊取宝鼓。同源策略的限制范圍:
- Cookie刑棵、LocalStorage 和 IndexDB 無(wú)法讀取。
- DOM 無(wú)法獲得愚铡。
- AJAX 請(qǐng)求不能發(fā)送蛉签。
2.什么是跨域?跨域有幾種實(shí)現(xiàn)形式
跨域就是突破同源策略的限制沥寥。
跨域?qū)崿F(xiàn)方式:
**1.document.domain+iframe‘‘降域’ **
應(yīng)用范圍:這種辦法只能解決主域相同而子域不同碍舍,且是iframe形式的跨域;
缺點(diǎn):安全性不高邑雅,當(dāng)一個(gè)小站點(diǎn)sss.a.com
被攻擊后片橡,所有a.com
站點(diǎn)會(huì)引起安全漏洞。
2.JSONP
應(yīng)用范圍: 通過(guò)script引入淮野,只能進(jìn)行GET請(qǐng)求
存在問(wèn)題:存在安全性問(wèn)題捧书,可被注入可執(zhí)行的js代碼(callback=alert(1)
), 對(duì)于這個(gè)問(wèn)題,只能通過(guò)外界的字符串過(guò)濾來(lái)解決骤星,如禁止callback中傳入括號(hào)经瓷,使用正則去除左右括號(hào),callback=callback.replace(/(/g,"")
妈踊,callback=callback.replace(/)/g,"")
3.CORS
給被訪問(wèn)方設(shè)置Access-Control-Allow-Origin了嚎,如在php文件頭部寫(xiě)入header('Access-Control-Allow-Origin:http://a.com:8080'
),表示允許來(lái)自源http://a.com:8080
的請(qǐng)求。
這是跨域AJAX請(qǐng)求的根本解決方法。相比JSONP只能發(fā)GET請(qǐng)求歪泳,CORS允許任何類型的請(qǐng)求萝勤。但是IE10及以下IE版本不支持。
4.HTML5 postMessage這是HTML5的新功能呐伞,用postMessage支持基于web的實(shí)時(shí)消息傳遞敌卓。
5.利用iframe和location.hash,原理是利用location.hash來(lái)傳值伶氢。url中#號(hào)及其后面的內(nèi)容就是location.hash,改變hash的值頁(yè)面并不會(huì)刷新趟径,所以可以利用hash值來(lái)進(jìn)行數(shù)據(jù)傳遞。這種方法缺點(diǎn)也很多癣防,諸如數(shù)據(jù)直接暴露在了url中蜗巧,數(shù)據(jù)容量和類型都有限等。
6.利用window.name主要利用window.name值不隨url改變而改變蕾盯,只要當(dāng)前頁(yè)面沒(méi)被關(guān)閉幕屹,window.name的值就不會(huì)改變。
3.jsonp 的原理是什么
就是利用<script>標(biāo)簽沒(méi)有跨域限制的“漏洞”來(lái)達(dá)到與第三方通訊的目的级遭。
當(dāng)需要通訊時(shí)望拖,本站腳本創(chuàng)建一個(gè)<script>元素,地址指向第三方的API網(wǎng)址挫鸽,形如: <src="http://www.example.net/api?param1=1¶m2=2">
并提供一個(gè)回調(diào)函數(shù)來(lái)接收數(shù)據(jù)(函數(shù)名可約定说敏,或通過(guò)地址參數(shù)傳遞)。
第三方產(chǎn)生的響應(yīng)為json數(shù)據(jù)的包裝(故稱之為jsonp丢郊,即json padding)盔沫,形如:callback({"name":"hax","gender":"Male"})
這樣瀏覽器會(huì)調(diào)用callback函數(shù),并傳遞解析后json對(duì)象作為參數(shù)蚂夕。
本站腳本可在callback函數(shù)里處理所傳入的數(shù)據(jù)迅诬。
缺點(diǎn):
(1)任意網(wǎng)站只要通過(guò)jsonp方式就可以跨域訪問(wèn)目標(biāo)域名下的信息,解決辦法:在跨域請(qǐng)求數(shù)據(jù)時(shí)在參數(shù)中加上與目標(biāo)域名約定好的一個(gè)token變量婿牍,這樣其他網(wǎng)站訪問(wèn)該域名時(shí)侈贷,目的網(wǎng)站通過(guò)辨認(rèn)這個(gè)約定好的信息而決定是否可以被跨域訪問(wèn)。
(2)不能用post方法獲取數(shù)據(jù)等脂,由于基于src地址引用方式俏蛮,在地址中附帶參數(shù)信息,因此只能用get方式獲取信息
(3)callback方法由于是根據(jù)用戶需求自己實(shí)現(xiàn)的上遥,可能會(huì)被惡意注入腳本搏屑,獲取隱私信息。
4.CORS是什么
CORS是跨源資源分享(Cross-Origin Resource Sharing)的縮寫(xiě)辣恋。它是W3C標(biāo)準(zhǔn)亮垫,是跨源AJAX請(qǐng)求的根本解決方法伟骨。相比JSONP只能發(fā)GET請(qǐng)求,CORS允許任何類型的請(qǐng)求携狭。
CORS需要瀏覽器和服務(wù)器同時(shí)支持继蜡,只要服務(wù)器實(shí)現(xiàn)了CORS接口,且瀏覽器支持該功能(目前所有瀏覽器都支持該功能逛腿,IE瀏覽器不能低于IE10),就可以跨域通信单默。對(duì)于開(kāi)發(fā)者來(lái)說(shuō),CORS通信與同源的AJAX通信沒(méi)有差別雕凹,代碼完全一樣殴俱。瀏覽器一旦發(fā)現(xiàn)AJAX請(qǐng)求跨源,就會(huì)自動(dòng)添加一些附加的頭信息枚抵,有時(shí)還會(huì)多出一次附加的請(qǐng)求明场,但用戶不會(huì)有感覺(jué)汽摹。
舉例
- 假設(shè)我們頁(yè)面或者應(yīng)用已在 http://www.test1.com 上了苦锨,而我們打算從 http://www.test2.com 請(qǐng)求提取數(shù)據(jù)。一般情況下拉庶,如果我們直接使用 AJAX 來(lái)請(qǐng)求將會(huì)失敗秃励。利用 CORS氏仗,http://www.test2.com 只需添加一個(gè)標(biāo)頭夺鲜,就可以允許來(lái)自 http://www.test1.com 的請(qǐng)求,下圖是我在PHP中的 hander() 設(shè)置慷蠕,“”號(hào)表示允許任何域向我們的服務(wù)端提交請(qǐng)求*:
header("Access-Control-Allow-Origin:*"); //*表示允許任何域向我們的服務(wù)端提交需求
header("Access-Control-Allow-Origin:http://www.test1.com") //這樣就允許來(lái)自http://www.test1.com的需求了
通過(guò)在HTTP Header中加入擴(kuò)展字段食呻,服務(wù)器在相應(yīng)網(wǎng)頁(yè)頭部加入字段表示允許訪問(wèn)的domain和HTTP method客戶端檢查自己的域是否在允許列表中澎现,決定是否處理響應(yīng)每辟。服務(wù)器端在HTTP的響應(yīng)頭中加入(頁(yè)面層次的控制模式):
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
多個(gè)域名之間用逗號(hào)分隔,表示對(duì)所示域名提供跨域訪問(wèn)權(quán)限影兽。”*”表示允許所有域名的跨域訪問(wèn)讹开。
相關(guān)文檔:跨域資源共享 CORS 詳解
練習(xí)
- 本地搭建服務(wù)器捐名,演示同源策略
- 至少使用一種方式解決跨域問(wèn)題
本文版權(quán)歸作者_(dá)Josh和饑人谷所有旦万,轉(zhuǎn)載請(qǐng)注明來(lái)源