跨域之一:同源策略和跨域

本節(jié)內(nèi)容:何為跨域?何為同源策略?

  • 跨域:但是在實(shí)際的場景中奠蹬,又確實(shí)有很多地方需要突破同源策略的限制,也就是我們常說的跨域
  • 同源策略:為了保證用戶信息的安全嗡午,防止惡意網(wǎng)站竊取用戶數(shù)據(jù)囤躁,同源策略做了很嚴(yán)格的限制——只允許本域內(nèi)的腳本讀寫本域內(nèi)的資源

一、何為跨域荔睹?

說到跨域狸演,有必要先了解一下同源策略。

1)同源策略

同源策略(Same origin policy)是由 NetScape 公司在1995年提出的一種安全策略僻他;
同源策略只是一個(gè)約定宵距,提出后被各個(gè)瀏覽器廠商采納,并以各自的方式實(shí)現(xiàn)了同源策略吨拗。
  • 何為同源策略满哪?
  • 同源策略:是瀏覽器最核心也最基本的安全功能婿斥,會(huì)約束瀏覽器的行為;
  • 同源策略會(huì)限制瀏覽器:只允許本域內(nèi)的腳本讀寫本域內(nèi)的資源哨鸭,不允許訪問本域外的資源民宿。

  • 為何需要同源策略?
  • 為保證用戶信息的安全像鸡,防止惡意網(wǎng)站竊取用戶數(shù)據(jù)活鹰,瀏覽器需要實(shí)現(xiàn)嚴(yán)格限制

  • 例如:我剛登陸了某寶網(wǎng),此時(shí)再去登陸 B 網(wǎng)站只估,B 網(wǎng)站就可以使用 JS 獲取到我的某寶賬戶信息志群,然后它做什么都可以了。

  • 如何判斷是否同源蛔钙?
  • 判斷要素有三:協(xié)議赖舟、域名、端口號(hào)夸楣;

  • 三者全部一致才視為同源宾抓,即屬于同一個(gè)域;否則視為非同源豫喧。

  • 限制范圍

在非同源情況下石洗,存在如下受限行為:

  1. 無法共享 cookie, localStorage, indexDB
  2. 無法操作彼此的 dom 元素
  3. 無法發(fā)送 ajax 請求

2)跨域

域(Domain)是Windows網(wǎng)絡(luò)中獨(dú)立運(yùn)行的單位;
域之間相互訪問則需要建立信任關(guān)系紧显,信任關(guān)系是連接在域與域之間的橋梁讲衫;
當(dāng)一個(gè)域與其他域建立了信任關(guān)系后,2個(gè)域之間不但可以按需要相互進(jìn)行管理孵班,還可以跨網(wǎng)分配文件和打印機(jī)等設(shè)備資源涉兽,使不同的域之間實(shí)現(xiàn)網(wǎng)絡(luò)資源的共享與管理.

  • 跨域
  • 跨域
    突破同源策略的限制,在兩個(gè)不同的域之間(非同源頁面)實(shí)現(xiàn)資源交互篙程。
本域(同源)和跨域是一對(duì)枷畏,就像國內(nèi)企業(yè)和跨國企業(yè),這樣更形象理解跨域概念
  • 跨域分類
    1)使用 Ajax 引發(fā)的跨域問題
    當(dāng)調(diào)用 Ajax 時(shí):調(diào)用 Ajax 發(fā)送請求的頁面 所在的域虱饿,和被請求頁面所在的域不一致
    2)類似頁面嵌入 ifream 引起的跨域問題
    當(dāng)操作 ifream 內(nèi)引入的元素時(shí):ifream 所屬頁面的域拥诡,和 ifream 引入頁面的域不一致
自己分的類,為了方便記憶氮发,剛接觸時(shí)還把它們弄混了
但本質(zhì)都一樣渴肉,即:突破同源策略限制,請求域外資源

二爽冕、為何需要跨域仇祭?

  • 在實(shí)際的場景中,確實(shí)有很多地方需要突破同源策略的限制颈畸,也就是我們常說的跨域
  • 如果網(wǎng)站足夠簡單乌奇,一個(gè)網(wǎng)頁搞定嚣艇,好吧這樣確實(shí)不需要跨域,但更多時(shí)候华弓,我們需要它
  • 例如:
  • 我想要制作一個(gè)天氣預(yù)報(bào)軟件食零,就需要獲取氣象局的檢測信息
  • 我想要制作一個(gè)音樂盒,就需要獲取音樂信息……

三寂屏、跨域?qū)崿F(xiàn)方法贰谣?

1. JSONP
2. CORS
3. 降域
4. postMessage

具體的實(shí)現(xiàn)方法,移步到這里迁霎!

1. 跨域之二:JSONP 和 CORS
2. 跨域之三:降域 和 postMessage

本文章著作權(quán)歸饑人谷和本人所有吱抚,轉(zhuǎn)載須說明來源!
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末考廉,一起剝皮案震驚了整個(gè)濱河市秘豹,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌昌粤,老刑警劉巖既绕,帶你破解...
    沈念sama閱讀 219,270評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異涮坐,居然都是意外死亡凄贩,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門袱讹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來疲扎,“玉大人,你說我怎么就攤上這事捷雕〗飞ィ” “怎么了?”我有些...
    開封第一講書人閱讀 165,630評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵救巷,是天一觀的道長壶熏。 經(jīng)常有香客問我,道長征绸,這世上最難降的妖魔是什么久橙? 我笑而不...
    開封第一講書人閱讀 58,906評(píng)論 1 295
  • 正文 為了忘掉前任俄占,我火速辦了婚禮管怠,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘缸榄。我一直安慰自己渤弛,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,928評(píng)論 6 392
  • 文/花漫 我一把揭開白布甚带。 她就那樣靜靜地躺著她肯,像睡著了一般佳头。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上晴氨,一...
    開封第一講書人閱讀 51,718評(píng)論 1 305
  • 那天康嘉,我揣著相機(jī)與錄音,去河邊找鬼籽前。 笑死亭珍,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的枝哄。 我是一名探鬼主播肄梨,決...
    沈念sama閱讀 40,442評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼挠锥!你這毒婦竟也來了众羡?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,345評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤蓖租,失蹤者是張志新(化名)和其女友劉穎粱侣,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蓖宦,經(jīng)...
    沈念sama閱讀 45,802評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡甜害,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,984評(píng)論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了球昨。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片尔店。...
    茶點(diǎn)故事閱讀 40,117評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖主慰,靈堂內(nèi)的尸體忽然破棺而出嚣州,到底是詐尸還是另有隱情,我是刑警寧澤共螺,帶...
    沈念sama閱讀 35,810評(píng)論 5 346
  • 正文 年R本政府宣布该肴,位于F島的核電站,受9級(jí)特大地震影響藐不,放射性物質(zhì)發(fā)生泄漏匀哄。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,462評(píng)論 3 331
  • 文/蒙蒙 一雏蛮、第九天 我趴在偏房一處隱蔽的房頂上張望涎嚼。 院中可真熱鬧,春花似錦挑秉、人聲如沸法梯。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽立哑。三九已至夜惭,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間铛绰,已是汗流浹背诈茧。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評(píng)論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留捂掰,地道東北人若皱。 一個(gè)月前我還...
    沈念sama閱讀 48,377評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像尘颓,于是被迫代替她去往敵國和親走触。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,060評(píng)論 2 355

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

  • 跨域問題是個(gè)老生常談的問題疤苹,在WEB開發(fā)中會(huì)經(jīng)常聽到互广,但是很多時(shí)候的開發(fā)并不涉及跨域問題什么的,所以一般也不會(huì)去深...
    __七把刀__閱讀 2,626評(píng)論 0 7
  • 本文先簡要介紹前端開發(fā)中的瀏覽器同源政策卧土;然后在跨域問題中惫皱,具體介紹跨域ajax請求的應(yīng)用場景與實(shí)現(xiàn)方案。 什么是...
    AlienZHOU閱讀 9,359評(píng)論 4 19
  • 1.什么是同源策略 1.要了解同源策略媳谁,我們必須先知道源即orgin 以百度頁面為例,谷歌瀏覽器打開控制臺(tái):輸入l...
    GarenWang閱讀 1,454評(píng)論 2 8
  • 第一次領(lǐng)略“閑”的旨趣友酱,大概是在一篇叫做《湖心亭看雪》的初中課文里晴音。“……余住西湖缔杉。大雪三日锤躁,湖中人鳥聲俱絕...
    不雕閱讀 477評(píng)論 1 5
  • 找到那個(gè)可以和你攜手走一輩子的人系羞,不易。 昨晚眾望所歸的《翻譯官》落下帷幕霸琴,對(duì)于“加菲”cp最后何去何從想必成了大...
    北有顧執(zhí)閱讀 3,768評(píng)論 0 5