跨域之三:降域 和 postMessage

本節(jié)內(nèi)容:實(shí)現(xiàn)跨域常用的兩種方式 —— 降域 和 postMessage

零:跨域報(bào)錯(cuò)展示

在非同源情況下贺嫂,操作 ifream 引入的元素時(shí)彭沼,瀏覽器會(huì)阻止這一操作,并且報(bào)錯(cuò)如下:


跨域報(bào)錯(cuò) —— ifream
  • 本節(jié)會(huì)做演練持灰,所以首先修改 hosts 文件絮缅,本節(jié)演練 hosts 文件增添內(nèi)容為:
127.0.0.1 localhost
127.0.0.1 a.yang.com
127.0.0.1 b.yang.com
127.0.0.1 yang.com
127.0.0.1 a.com
127.0.0.1 b.com

一、降域

  • 何為降域荠锭?

降域仍是解決跨域問(wèn)題的一種方案旱眯,通過(guò)雙向設(shè)置 document.domain 的值,解決主域名下的跨域問(wèn)題证九。

  • 降域的原理
  • 比如删豺,有兩個(gè)二級(jí)域名:a.yang.com 和 b.yang.com,可通過(guò)設(shè)定 document.domain 的值為主域名:yang.com 的方式愧怜,突破瀏覽器的同源策略限制呀页,來(lái)獲取和操作對(duì)方的元素

  • 這就好比,小 A 和小 B拥坛,手里拿著城主的令牌赔桌,通過(guò)哨卡時(shí)才能暢行無(wú)阻,否則哨卡不讓過(guò)

  • 這也就決定了渴逻,降域具有很大的局限性疾党,適用范圍較小,適合在同一主域名下使用惨奕;需要有降的空間雪位,方可使用降域方式

  • 降域的使用
  • A 頁(yè)面域?yàn)椋篴.yang.com

  • B 頁(yè)面域?yàn)椋篵.yang.com

  • A 和 B 兩頁(yè)面都需加入該行代碼:document.domain = 'yang.com'; ,‘yang.com 是 a.yang.com 和 b.yang.com 的主域名

  • 降域演練

自己動(dòng)手梨撞,豐衣足食雹洗。我來(lái)手動(dòng)演練一番。

  • 演練說(shuō)明
    1)頁(yè)面的說(shuō)明:
    A 頁(yè)面的域?yàn)?a.yang.com卧波;A 頁(yè)面擁有兩個(gè)元素 input 輸入框时肿、ifream,ifream引入 B 頁(yè)面資源港粱;
    B 頁(yè)面的域?yàn)?b.yang.com螃成;B 頁(yè)面擁有一個(gè)元素 input 輸入框
    2)實(shí)現(xiàn)的功能:在任意 input 輸入框中輸入值時(shí),另外一個(gè) input 輸入框同步顯示輸入的值

  • 搭建 web 服務(wù)器的工具:server-mock
    A 頁(yè)面代碼 a.yang.com

var input = document.querySelector('.main input');
input.addEventListener('input', function () {
        console.log('window:' + this.value);
        window.frames[0].document.querySelector('input').value = this.value;
});
document.domain = 'yang.com';

B 頁(yè)面代碼 b.yang.com

    var input = document.querySelector('input');
    input.addEventListener('input', function () {
        console.log('iframe:'+ this.value);
        window.parent.document.querySelector('input').value = this.value;
    });
    document.domain = 'yang.com';

1)同源情況下:window.frames[0].document.querySelector('input') 可取到 ifream 中的 input 元素
2)非同源情況下:因?yàn)橥床呗缘南拗撇槠海瑹o(wú)法取到相應(yīng)元素寸宏,會(huì)報(bào)錯(cuò)

二、postMessage

因?yàn)榻涤虻木窒扌员容^大偿曙,只能使用到有降域空間的域名上氮凝,那么當(dāng)兩個(gè)主域名完全不同時(shí),應(yīng)該如何處理呢望忆?來(lái)看看新方法 postMessage罩阵。

  • postMessage 原理
  • postMessage 是 HTML5 中新增方法竿秆,可實(shí)現(xiàn)跨域通信;

  • postMessage 并不是向服務(wù)器讀寫資源稿壁,只是向外發(fā)送消息而已幽钢;可以把它當(dāng)做使用手機(jī)發(fā)送短信消息,僅此而已常摧。

  • 也就是:A 頁(yè)面向 B 頁(yè)面發(fā)送了一條消息,B 頁(yè)面會(huì)接受到該消息威创,如果 B 頁(yè)面需要該消息落午,則監(jiān)聽 message;否則無(wú)需關(guān)心該消息

  • postMessage 的使用
  • 發(fā)送方:為目標(biāo)元素添加事件處理程序肚豺,監(jiān)聽事件類型

  • 接收方:為 window 添加事件處理程序溃斋,事件類型為 messag

  • postMessage 的演練

自己動(dòng)手,豐衣足食吸申。我來(lái)手動(dòng)演練一番梗劫。

  • 演練說(shuō)明
    1)頁(yè)面的說(shuō)明:
    A 頁(yè)面的域?yàn)?a.com;A 頁(yè)面擁有兩個(gè)元素 input 輸入框截碴、ifream梳侨,ifream引入 B 頁(yè)面資源;
    B 頁(yè)面的域?yàn)?b.com日丹;B 頁(yè)面擁有一個(gè)元素 input 輸入框
    2)實(shí)現(xiàn)的功能:在任意 input 輸入框中輸入值時(shí)走哺,另外一個(gè) input 輸入框同步顯示輸入的值

  • 搭建 web 服務(wù)器的工具:server-mock
    A 頁(yè)面代碼 a.com

        var input = document.querySelector('.main input');
        input.addEventListener('input', function () {
            console.log('window:' + this.value);
            window.frames[0].postMessage(this.value, '*');
        });

        window.addEventListener('message', function (e) {
            console.log('window:'+ e.data);
            input.value = e.data;
        })

B 頁(yè)面代碼 b.com

    var input = document.querySelector('input');
    input.addEventListener('input', function () {
        console.log('iframe:'+ this.value);
        window.parent.postMessage(this.value, 'http://a.com:8080');
    });

    window.addEventListener('message', function (e) {
        console.log('ifream:'+ e.data);
        input.value = e.data;
    })
  • postMessage 的注意點(diǎn)
  • 這樣就解除了降域的限制,可以將 postMessage 應(yīng)用到各個(gè)不同的域之間哲虾,實(shí)現(xiàn)跨域訪問(wèn)丙躏。該方式比較安全,因?yàn)閷?duì)方并不能直接操控我方資源束凑,僅僅是發(fā)了一條消息晒旅,相當(dāng)于指令,而最終操作權(quán)限仍在自己手中
  • 雖然解決了降域的限制汪诉,但是:postMessage 是 window 的一個(gè)方法废恋,話句話說(shuō):它的弱點(diǎn)是只能向 window 窗口發(fā)送消息。所以使用時(shí)至少要有一個(gè) window 才行扒寄,postMessage 不可以向其他域名發(fā)送消息拴签。

最后:降域和 postMessage 都是小眾的降域方式,并不是經(jīng)常使用旗们,若有需求可按需選擇

本文章著作權(quán)歸饑人谷和本人所有蚓哩,轉(zhuǎn)載須說(shuō)明來(lái)源!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末上渴,一起剝皮案震驚了整個(gè)濱河市岸梨,隨后出現(xiàn)的幾起案子喜颁,更是在濱河造成了極大的恐慌,老刑警劉巖曹阔,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件半开,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡赃份,警方通過(guò)查閱死者的電腦和手機(jī)寂拆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)抓韩,“玉大人纠永,你說(shuō)我怎么就攤上這事≮怂” “怎么了尝江?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)英上。 經(jīng)常有香客問(wèn)我炭序,道長(zhǎng),這世上最難降的妖魔是什么苍日? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任惭聂,我火速辦了婚禮,結(jié)果婚禮上相恃,老公的妹妹穿的比我還像新娘彼妻。我一直安慰自己,他們只是感情好豆茫,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布侨歉。 她就那樣靜靜地躺著,像睡著了一般揩魂。 火紅的嫁衣襯著肌膚如雪幽邓。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天火脉,我揣著相機(jī)與錄音牵舵,去河邊找鬼。 笑死倦挂,一個(gè)胖子當(dāng)著我的面吹牛畸颅,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播方援,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼没炒,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了犯戏?” 一聲冷哼從身側(cè)響起送火,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤拳话,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后种吸,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體弃衍,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年坚俗,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了镜盯。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡猖败,死狀恐怖速缆,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情辙浑,我是刑警寧澤激涤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布拟糕,位于F島的核電站判呕,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏送滞。R本人自食惡果不足惜侠草,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望犁嗅。 院中可真熱鬧边涕,春花似錦、人聲如沸褂微。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)宠蚂。三九已至式撼,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間求厕,已是汗流浹背著隆。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留呀癣,地道東北人美浦。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像项栏,于是被迫代替她去往敵國(guó)和親浦辨。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

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

  • 題目1: 什么是同源策略 瀏覽器出于安全考慮沼沈,只允許與本域下的接口交互荤牍。不同源的客戶端腳本在沒(méi)有明確授權(quán)的情況下案腺,...
    saintkl閱讀 236評(píng)論 0 0
  • 1. 跨域和同源 首先來(lái)看摘自MDN上對(duì)于跨域,較為標(biāo)準(zhǔn)的解釋: 當(dāng)一個(gè)資源從與該資源本身所在的服務(wù)器不同的域或端...
    曉風(fēng)殘?jiān)?994閱讀 220評(píng)論 0 0
  • 本文著作權(quán)歸饑人谷_Lyndon和饑人谷所有康吵,轉(zhuǎn)載請(qǐng)注明出處劈榨。 這是一篇對(duì)于跨域的總結(jié),將涵蓋跨域的四種方法: j...
    HungerLyndon閱讀 14,636評(píng)論 7 25
  • 這座安靜的小院 隱居在一所學(xué)校后面 平時(shí)緊閉的木門 會(huì)被溫暖的陽(yáng)光打開 請(qǐng)出深居簡(jiǎn)出的主人 你會(huì)常郴耷叮看見 一位瘦骨...
    金指尖的花園閱讀 335評(píng)論 1 8
  • 在最深的夢(mèng)里 有記憶最深的你 我以為你的聲音 會(huì)變成碎片 伴我度過(guò)整個(gè)冬天 我以為最寒冷的夜里 北風(fēng)吹落的雪花 會(huì)...
    青木佳葉閱讀 438評(píng)論 0 1