同源策略與跨域資源共享的糾纏

趙連江發(fā)布于2019-06-27 15:05 / 2788人閱讀

摘要：扯了這么多，自然不是為了吹水，而是要為了引出前端開(kāi)發(fā)的一個(gè)重要的知識(shí)點(diǎn)同源策略什么是同源策略出于保護(hù)用戶(hù)信息安全的目的，現(xiàn)在的瀏覽器都會(huì)實(shí)施同源策略這個(gè)政策，所謂同源策略指的是不同源的客戶(hù)端腳本在沒(méi)有明確授權(quán)情況下，不允許讀寫(xiě)對(duì)方的資源。

導(dǎo)語(yǔ)
你家的小孩帶了他的朋友來(lái)你們的家里玩，你家的小孩如果要在自家屋里拿玩具玩、拿東西吃你自然是不會(huì)阻止，但是如果你家小孩的朋友人品不行，亂拿東西吃、亂翻你家的東西，你自然不允許，拿什么東西要通過(guò)你的允許才行。

扯了這么多，自然不是為了吹水，而是要為了引出前端開(kāi)發(fā)的一個(gè)重要的知識(shí)點(diǎn)——同源策略

什么是同源策略

出于保護(hù)用戶(hù)信息安全的目的，現(xiàn)在的瀏覽器都會(huì)實(shí)施“同源策略”這個(gè)政策，所謂“同源策略”指的是不同源的客戶(hù)端腳本在沒(méi)有明確授權(quán)情況下，不允許讀寫(xiě)對(duì)方的資源。

試想，如果你在淘寶購(gòu)物完后，帶著淘寶的登陸信息又去京東，保不準(zhǔn)京東把你給黑掉，okay這只是開(kāi)個(gè)玩笑~~~

但是，在很多情況下我們又經(jīng)常需要跨域訪(fǎng)問(wèn)資源，比如你要在個(gè)人博客上創(chuàng)建一個(gè)音樂(lè)播放器，但這個(gè)接口如果自己創(chuàng)建的話(huà)性?xún)r(jià)比太低了，這就需要其他源提供一個(gè)可訪(fǎng)問(wèn)的接口給你使用，這里就涉及到突破同源策略的限制的跨域訪(fǎng)問(wèn)

所謂同源：

同協(xié)議：如都是http

同域名：如都是terenyeung.applinzi.com/newapp/carousel.html和terenyeung.applinzi.com/index.html

同端口：如都是80端口

什么是跨域

而所謂的跨域，指的是突破同源策略的限制，本源的客戶(hù)端腳本訪(fǎng)問(wèn)其他源的數(shù)據(jù)

跨域的實(shí)現(xiàn)方式

目前，實(shí)現(xiàn)跨域訪(fǎng)問(wèn)的方法包括：

- JSONP
- Cross-Origin Resource Sharing
- HTML5 postMessage
- 其他Hack
  - 利用hash
  -  利用window.name

這里主要講解常用的JSONP和CORS兩種跨域方法。

JSONP

JSONP的全稱(chēng)是JSON with Padding，

原理

- JSONP是通過(guò)script標(biāo)簽加載數(shù)據(jù)的方式去獲取其他源的數(shù)據(jù)，然后當(dāng)做js代碼來(lái)執(zhí)行；

- 你需要提前在文檔中聲明一個(gè)回調(diào)函數(shù)，該函數(shù)的函數(shù)名通過(guò)GET的方式向后臺(tái)傳參，后臺(tái)解析到函數(shù)名后在原始數(shù)據(jù)上padding這個(gè)函數(shù)名，然后在發(fā)給前端，最終這個(gè)返回前端的字符串將作為js的一部分執(zhí)行

范例解析:

//你現(xiàn)在所在的頁(yè)面是
http://terenyeung.applinzi.com/newapp/task31/jsonp.html
//你現(xiàn)在的需求是想要獲取另一個(gè)源http://teren.applinzi.com/jsonp.php的數(shù)據(jù)

//利用jsonp實(shí)現(xiàn)跨域訪(fǎng)問(wèn)的具體做法是：
//1.在該頁(yè)面添加一個(gè)script標(biāo)簽，當(dāng)加載script的時(shí)候就會(huì)向另一個(gè)源（http://teren.applinzi.com/task31/jsonp.php）發(fā)送GET的請(qǐng)求；
//2.存放在另一個(gè)源的后臺(tái)腳本對(duì)前端發(fā)過(guò)來(lái)的查詢(xún)字符串（帶函數(shù)名）進(jìn)行判斷，如果存在則為后臺(tái)返回的數(shù)據(jù)包裹上帶有該函數(shù)名的字符串，即
if($callback){    
  echo $callback."(".json_encode($data).")";
}else{    
  echo $data;
}

代碼

跨域?qū)崿F(xiàn)方式——JSONP

CORS

CORS的全稱(chēng)是Cross-Origin Resources Sharing，它允許瀏覽器向跨源服務(wù)器，發(fā)出請(qǐng)求，從而克服了AJAX只能同源使用的限制

原理

CORS需要瀏覽器和服務(wù)器同時(shí)支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10；

瀏覽器一旦發(fā)現(xiàn)AJAX請(qǐng)求跨源，就會(huì)自動(dòng)添加一些附加的頭信息——origin字段，告訴跨域的后臺(tái)這次跨域請(qǐng)求是由哪個(gè)源（這里是http://terenyeung.applinzi.com）
發(fā)出的

實(shí)現(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實(shí)現(xiàn)了CORS接口，就可以跨源通信。服務(wù)器根據(jù)前端發(fā)過(guò)來(lái)的跨域的ajax請(qǐng)求的origin字段，決定是否同意這次的跨域訪(fǎng)問(wèn)；
如果后臺(tái)同意的話(huà)，可以在后臺(tái)文檔（以php后臺(tái)為例）中設(shè)置如下：

添加一個(gè)頭：

[注]*為允許所有的源訪(fǎng)問(wèn)

如果被允許另一個(gè)源跨域訪(fǎng)問(wèn)，則返回的頭信息一定包含如下字段：
Access-Control-Allow-Origin: http://terenyeung.applinzi.com
或者
Access-Control-Allow-Origin: *

范例解析

代碼

跨域?qū)崿F(xiàn)方式——CORS

參考資料

阮一峰——瀏覽器同源政策及其規(guī)避方法
阮一峰——跨域資源共享 CORS 詳解
知乎——「每日一題」JSONP 是什么？
饑人谷——同源策略及跨域資源共享

GPU云服務(wù)器云服務(wù)器同源策略跨域資源共享資源跨域跨域共享

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/22187.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

趙連江

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

TMWhost：$31.5/季/1核/2GB內(nèi)存/150GB空間/1TB流量/200Mbps-300

閱讀 1368·2021-09-13 10:25
css-doodle初認(rèn)識(shí)

閱讀 552·2019-08-30 15:53
CSS中幾種常用的選擇器

閱讀 2265·2019-08-30 15:44
《css世界》- 詳細(xì)重點(diǎn)筆記與技巧

閱讀 2026·2019-08-29 17:20
webpack4 系列教程(九): CSS Tree Shaking

閱讀 1594·2019-08-29 16:36
css3水滴效果，地圖標(biāo)記效果

閱讀 1795·2019-08-29 14:10
js放大鏡效果

閱讀 1785·2019-08-29 12:44
數(shù)據(jù)類(lèi)型之字符串篇

閱讀 1166·2019-08-23 14:13

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

同源策略與跨域資源共享的糾纏

原理

范例解析:

代碼

原理

范例解析

代碼

參考資料

相關(guān)文章