同源策略喷鸽、跨域蛉谜、jsonp 未完

問(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&param2=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)源
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末镶蹋,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子淆两,更是在濱河造成了極大的恐慌拂酣,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,378評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件剑勾,死亡現(xiàn)場(chǎng)離奇詭異赵颅,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)饺谬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)叠萍,“玉大人绪商,你說(shuō)我怎么就攤上這事「裼簦” “怎么了独悴?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,702評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵刻炒,是天一觀的道長(zhǎng)自沧。 經(jīng)常有香客問(wèn)我,道長(zhǎng)拇厢,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,259評(píng)論 1 279
  • 正文 為了忘掉前任访敌,我火速辦了婚禮衣盾,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘势决。我一直安慰自己,他們只是感情好叮姑,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布据悔。 她就那樣靜靜地躺著耘沼,像睡著了一般。 火紅的嫁衣襯著肌膚如雪群嗤。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,036評(píng)論 1 285
  • 那天骇径,我揣著相機(jī)與錄音者春,去河邊找鬼。 笑死钱烟,一個(gè)胖子當(dāng)著我的面吹牛嫡丙,可吹牛的內(nèi)容都是我干的读第。 我是一名探鬼主播,決...
    沈念sama閱讀 38,349評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼父泳,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼吴汪!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起浇坐,我...
    開(kāi)封第一講書(shū)人閱讀 36,979評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤近刘,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后觉渴,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,469評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡座韵,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評(píng)論 2 323
  • 正文 我和宋清朗相戀三年踢京,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片黔帕。...
    茶點(diǎn)故事閱讀 38,059評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蹈丸,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出逻杖,到底是詐尸還是另有隱情,我是刑警寧澤闻伶,帶...
    沈念sama閱讀 33,703評(píng)論 4 323
  • 正文 年R本政府宣布管搪,位于F島的核電站铡买,受9級(jí)特大地震影響霎箍,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜漂坏,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望谷徙。 院中可真熱鬧驯绎,春花似錦、人聲如沸剩失。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,262評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)演熟。三九已至,卻和暖如春芒粹,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背化漆。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工获三, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人疙教。 一個(gè)月前我還...
    沈念sama閱讀 45,501評(píng)論 2 354
  • 正文 我出身青樓伞租,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親葵诈。 傳聞我的和親對(duì)象是個(gè)殘疾皇子祟同,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容