同源策略與JS跨域（JSONP , CORS）

Shisui 發(fā)布于2019-08-21 15:52 / 2916人閱讀

摘要：由此可以看出，同源策略確實(shí)是必不可少的，那么它會(huì)帶來哪些限制呢和無法讀取。由于瀏覽器的同源策略，在網(wǎng)頁(yè)端出現(xiàn)了這個(gè)跨域的問題，然而我們發(fā)現(xiàn)，所有的屬性并沒有受到相關(guān)的限制，比如等。

本文按照政治問答題必備套路分為以下3個(gè)部分：

為什么要跨域？

跨域是什么？

如何實(shí)現(xiàn)跨域？

Section1、為什么要跨域？

自古以來（1995年起），為了用戶的信息安全，瀏覽器就引入了同源策略。那么同源策略是如何保證用戶的信息安全的呢？

栗子1：如果沒有同源策略，你打開了你的銀行賬戶頁(yè)面A，又打開了另一個(gè)不相關(guān)的頁(yè)面B，這時(shí)候如果B是惡意網(wǎng)站，B可以通過Javascript輕松訪問和修改A頁(yè)面中的內(nèi)容。

栗子2：現(xiàn)在我們廣泛的使用cookie來維護(hù)用戶的登錄狀態(tài)，而如果沒有同源策略，這些cookie信息就會(huì)泄露，其他網(wǎng)站就可以冒充這個(gè)登錄用戶。

由此可以看出，同源策略確實(shí)是必不可少的，那么它會(huì)帶來哪些限制呢？

1、Cookie、LocalStorage和IndexDB無法讀取。
2、DOM無法獲得。
3、AJAX請(qǐng)求不能發(fā)送。

有時(shí)候我們需要突破上述限制，就需要用跨域的方法來解決。

Section2、跨域是什么？

什么叫做不同的域？比如：

http://www.a.com:8000/a.js
協(xié)議（http）、域名（www.a.com）、端口（8000）三者中有一個(gè)不同就叫不同的域。

跨域就是不同的域間相互訪問時(shí)使用某些方法來突破上述限制。

【注意：協(xié)議或者端口的不同，只能通過后臺(tái)來解決?！?/p> Section3、怎么跨域？ 一、解決Section1中提到的1、2兩點(diǎn)限制：

1.Cookie、LocalStorage和IndexDB無法讀取。
2.DOM無法獲得。

方法1、通過document.domain跨子域

【適用范圍：（1）兩個(gè)域只是子域不同；（2）只適用于iframe窗口與父窗口之間互相獲取cookie和DOM節(jié)點(diǎn)，不能突破LocalStorage和IndexDB的限制?！?/p>

當(dāng)兩個(gè)不同的域只是子域不同時(shí)，可以通過把document.domain設(shè)置為他們共同的父域來解決。

栗子：

A: http://www.example.com/a.html
B: http://example.com/b.html
當(dāng)A、B想要獲取對(duì)方的cookie或者DOM節(jié)點(diǎn)時(shí)，可以設(shè)置:

document.domain="example.com";

來解決。

這時(shí)A網(wǎng)頁(yè)通過腳本設(shè)置:

document.cookie = "testA=hello";

B網(wǎng)頁(yè)就可以拿到這個(gè)cookie：

var aCookie = document.cookie;

方法2、通過window.name跨域

【適用范圍：（1）可以是兩個(gè)完全不同源的域；（2）同一個(gè)窗口內(nèi)：即同一個(gè)標(biāo)簽頁(yè)內(nèi)先后打開的窗口?！?/p>

pre-condition：

window.name屬性有個(gè)特征：即在一個(gè)窗口(window)的生命周期內(nèi),窗口載入的所有的頁(yè)面都是共享一個(gè)window.name的，每個(gè)頁(yè)面對(duì)window.name都有讀寫的權(quán)限，window.name是持久存在一個(gè)窗口載入過的所有頁(yè)面中的。

基于這個(gè)思想，我們可以在某個(gè)頁(yè)面設(shè)置好 window.name 的值，然后在本標(biāo)簽頁(yè)內(nèi)跳轉(zhuǎn)到另外一個(gè)域下的頁(yè)面。在這個(gè)頁(yè)面中就可以獲取到我們剛剛設(shè)置的 window.name 了。

結(jié)合iframe還有更高級(jí)的用法：

父窗口先打開一個(gè)與自己不同源的子窗口，在這個(gè)子窗口里設(shè)置：

window.name = data;

然后讓子窗口跳轉(zhuǎn)到一個(gè)與父窗口同域的網(wǎng)址：

location="http://www.parent.com/a.html";

這時(shí)，因?yàn)橥虿⑶彝淮翱趙indow.name是不變的，所以父窗口可以獲取到子窗口下的window.name。

var data = document.getElementById("myFrame").contentWindow.name;

優(yōu)點(diǎn)：window.name容量很大，可以放置非常長(zhǎng)的字符串；缺點(diǎn)：必須監(jiān)聽子窗口window.name屬性的變化，影響網(wǎng)頁(yè)性能。

方法3、使用HTML5的window.postMessage跨域

window.postMessage(message,targetOrigin) 方法是html5新引進(jìn)的特性，可以使用它來向其它的window對(duì)象發(fā)送消息，無論這個(gè)window對(duì)象是屬于同源或不同源，目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經(jīng)支持window.postMessage方法。

otherWindow.postMessage(message, targetOrigin);

otherWindow:接受消息頁(yè)面的window的引用?？梢允琼?yè)面中iframe的contentWindow屬性；window.open的返回值；通過name或下標(biāo)從window.frames取到的值。
message:所要發(fā)送的數(shù)據(jù)，string類型。
targetOrigin:用于限制otherWindow，*表示不做限制。

栗子1：

在父頁(yè)面中嵌入子頁(yè)面，通過postMessage發(fā)送數(shù)據(jù)。
parent.com/index.html中的代碼：

在子頁(yè)面中通過message事件監(jiān)聽父頁(yè)面發(fā)送來的消息并顯示。
child.com/index.html中的代碼：

栗子2：

假設(shè)在a.html里嵌套個(gè)

在這兩個(gè)頁(yè)面里互相通信

a.html

window.onload = function() {
    window.addEventListener("message", function(e) {
        alert(e.data);
    });

    window.frames[0].postMessage("b data", "http://www.child.com/b.html");
}

b.html

window.onload = function() {
    window.addEventListener("message", function(e) {
        alert(e.data);
    });
    window.parent.postMessage("a data", "http://www.parent.com/a.html");
}

這樣打開a頁(yè)面，首先監(jiān)聽到了b.html通過postMessage傳來的消息，就先彈出 a data，然后a通過postMessage傳遞消息給子頁(yè)面b.html，這時(shí)會(huì)彈出 b data。

二、解決第3點(diǎn)限制：

3）AJAX請(qǐng)求不能發(fā)送。

方法4、通過JSONP跨域

【適用范圍：（1）可以是兩個(gè)完全不同源的域；（2）只支持HTTP請(qǐng)求中的GET方式；（3）老式瀏覽器全部支持；（4）需要服務(wù)端支持】

JSONP(JSON with Padding)是資料格式JSON的一種使用模式，可以讓網(wǎng)頁(yè)從別的網(wǎng)域要資料。

由于瀏覽器的同源策略，在網(wǎng)頁(yè)端出現(xiàn)了這個(gè)“跨域”的問題，然而我們發(fā)現(xiàn)，所有的 src 屬性并沒有受到相關(guān)的限制，比如 img / script 等。

JSONP 的原理就要從 script 說起。script 可以引用其他域的腳本文件，比如這樣：

a.html
...


...

b.js
callback({url: "http://www.rccoder.net"})

這就類似于JSONP的原理了。

JSONP的基本思想是：先在網(wǎng)頁(yè)上添加一個(gè)script標(biāo)簽，設(shè)置這個(gè)script標(biāo)簽的src屬性用于向服務(wù)器請(qǐng)求JSON數(shù)據(jù) ，需要注意的是，src屬性的查詢字符串一定要加一個(gè)callback參數(shù)，用來指定回調(diào)函數(shù)的名字。而這個(gè)函數(shù)是在資源加載之前就已經(jīng)在前端定義好的，這個(gè)函數(shù)接受一個(gè)參數(shù)并利用這個(gè)參數(shù)做一些事情。向服務(wù)器請(qǐng)求后，服務(wù)器會(huì)將JSON數(shù)據(jù)放在一個(gè)指定名字的回調(diào)函數(shù)里作為其參數(shù)傳回來。這時(shí)，因?yàn)楹瘮?shù)已經(jīng)在前端定義好了，所以會(huì)直接調(diào)用。

一個(gè)栗子：

function addScriptTag(src) {
    var script = document.createElement("script");
    script.setAttribute("type","text/javascript");
    script.src = src;
    document.body.appendChild(script);
}

window.onload = function () {
    addScriptTag("http://example.com/ip?callback=foo");//請(qǐng)求服務(wù)器數(shù)據(jù)并規(guī)定回調(diào)函數(shù)為foo
}

function foo(data) {
    console.log("Your public IP address is: " + data.ip);
};

向服務(wù)器example.com請(qǐng)求數(shù)據(jù)，這時(shí)服務(wù)器會(huì)先生成JSON數(shù)據(jù)，這里是{"ip": "8.8.8.8"}，然后以JS語(yǔ)法的方式生成一個(gè)函數(shù)，函數(shù)名就是傳遞上來的callback參數(shù)的值，最后將數(shù)據(jù)放在函數(shù)的參數(shù)中返回：

foo({
    "ip": "8.8.8.8"
});

客戶端解析script標(biāo)簽，執(zhí)行返回的JS代碼，調(diào)用函數(shù)。

方法5、通過CORS跨域

【適用范圍：（1）可以是兩個(gè)完全不同源的域；（2）支持所有類型的HTTP請(qǐng)求；（3）被絕大多數(shù)現(xiàn)代瀏覽器支持，老式瀏覽器不支持；（4）需要服務(wù)端支持】

對(duì)于前端開發(fā)者來說，跨域的CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。因此，實(shí)現(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實(shí)現(xiàn)了CORS接口，就可以跨源通信。

瀏覽器將CORS請(qǐng)求分成兩類：簡(jiǎn)單請(qǐng)求（simple request）和非簡(jiǎn)單請(qǐng)求（not-so-simple request）。

只要同時(shí)滿足以下兩大條件，就屬于簡(jiǎn)單請(qǐng)求。

（1) 請(qǐng)求方法是以下三種方法之一：
HEAD
GET
POST
（2）HTTP的頭信息不超出以下幾種字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三個(gè)值application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同時(shí)滿足上面兩個(gè)條件，就屬于非簡(jiǎn)單請(qǐng)求。
瀏覽器對(duì)這兩種請(qǐng)求的處理，是不一樣的。

簡(jiǎn)單請(qǐng)求：

下面是一次跨源AJAX請(qǐng)求，瀏覽器發(fā)現(xiàn)它是簡(jiǎn)單請(qǐng)求，就會(huì)直接在頭信息中加一個(gè)origin字段：

GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

服務(wù)器收到這條請(qǐng)求，如果這個(gè)origin指定的源在許可范圍內(nèi)，那么服務(wù)器返回的頭信息中會(huì)包含Access-Control-Allow-Origin字段，值與origin的值相同，以及其他幾個(gè)相關(guān)字段：

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar

Access-Control-Allow-Origin: 該字段是必須的。要么與origin相同，要么為*
Access-Control-Allow-Credentials: 該字段可選。設(shè)為true表示服務(wù)器允許發(fā)送cookie
Access-Control-Expose-Headers: 該字段可選。CORS請(qǐng)求時(shí)，XMLHttpRequest對(duì)象的getResponseHeader()方法只能拿到6個(gè)基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必須在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader("FooBar")可以返回FooBar字段的值。

想要發(fā)送cookie，這里還有兩點(diǎn)需要額外注意：

1）開發(fā)者必須在AJAX請(qǐng)求中打開withCredentials屬性。

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

否則即使服務(wù)器允許，客戶端也不會(huì)發(fā)送。

2）Access-Control-Allow-Origin不能設(shè)為星號(hào)，必須指定明確的、與請(qǐng)求網(wǎng)頁(yè)一致的域名。同時(shí)，Cookie依然遵循同源政策，只有用服務(wù)器域名設(shè)置的Cookie才會(huì)上傳，其他域名的Cookie并不會(huì)上傳，且（跨源）原網(wǎng)頁(yè)代碼中的document.cookie也無法讀取服務(wù)器域名下的Cookie。

非簡(jiǎn)單請(qǐng)求：

1.預(yù)檢請(qǐng)求：

非簡(jiǎn)單請(qǐng)求會(huì)在正式通信前加一次預(yù)檢（preflight）請(qǐng)求。作用是瀏覽器先詢問服務(wù)器當(dāng)前網(wǎng)頁(yè)所在域名是否在服務(wù)器的許可名單中，以及可以使用哪些HTTP方法以及頭信息字段。只有得到肯定答復(fù)，瀏覽器才會(huì)發(fā)送XMLHttpRequest，否則報(bào)錯(cuò)。

一個(gè)栗子：

var url = "http://api.alice.com/cors";
var xhr = new XMLHttpRequest();
xhr.open("PUT", url, true);
xhr.setRequestHeader("X-Custom-Header", "value");
xhr.send();

HTTP請(qǐng)求方法為PUT，并發(fā)送一個(gè)自定義頭信息"X-Custom-Header"，瀏覽器發(fā)現(xiàn)這是一個(gè)非簡(jiǎn)單請(qǐng)求，就會(huì)自動(dòng)發(fā)送一個(gè)預(yù)檢請(qǐng)求，預(yù)檢請(qǐng)求的HTTP頭信息如下：

OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

請(qǐng)求方法是OPTIONS，表示這個(gè)請(qǐng)求是用來詢問的，頭信息中的關(guān)鍵信息有3個(gè)：

（1）表示請(qǐng)求來自哪個(gè)源

Origin: http://api.bob.com

（2）列出瀏覽器的CORS請(qǐng)求會(huì)用到哪些HTTP方法

Access-Control-Request-Method: PUT

（3）指定瀏覽器CORS請(qǐng)求會(huì)額外發(fā)送的頭信息字段

Access-Control-Request-Headers: X-Custom-Header

2.預(yù)檢請(qǐng)求的回應(yīng)（有兩種情況：A允許、B不允許）

A.服務(wù)器允許這次跨域請(qǐng)求

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

服務(wù)器返回中要注意的字段：

（1）服務(wù)器同意的跨域請(qǐng)求源：

Access-Control-Allow-Origin: http://api.bob.com

（2）服務(wù)器支持的所有跨域請(qǐng)求的方法：

 Access-Control-Allow-Methods: GET, POST, PUT

（3）表明服務(wù)器支持的所有頭信息字段：

Access-Control-Allow-Headers: X-Custom-Header

（4）指定本次預(yù)檢請(qǐng)求的有效期，單位為秒，即允許請(qǐng)求該條回應(yīng)在有效期之前都不用再發(fā)送預(yù)檢請(qǐng)求：

Access-Control-Max-Age: 1728000

B.服務(wù)器不允許這次跨域請(qǐng)求
即origin指定的源不在許可范圍內(nèi)，服務(wù)器會(huì)返回一個(gè)正常的HTTP回應(yīng)。但是頭信息中沒有包含Access-Control-Allow-Origin字段，就知道出錯(cuò)了，從而拋出一個(gè)錯(cuò)誤，被XMLHttpRequest的onerror回調(diào)函數(shù)捕獲。但是要注意的是，這種HTTP回應(yīng)的狀態(tài)碼很有可能是200，所以無法通過狀態(tài)碼識(shí)別這種錯(cuò)誤。

3.正式請(qǐng)求
過了預(yù)檢請(qǐng)求，非簡(jiǎn)單請(qǐng)求的正式請(qǐng)求就與簡(jiǎn)單請(qǐng)求一樣了。

參考資料

《Javascript高級(jí)程序設(shè)計(jì)》 P582

《Javascript權(quán)威指南》 P668 22.3 跨域消息傳遞

http://www.ruanyifeng.com/blo...

https://segmentfault.com/a/11...

http://www.cnblogs.com/rainma...

GPU云服務(wù)器云服務(wù)器同源策略 jsonp 跨域 jsonp 跨域亂碼 jsonp跨域請(qǐng)求

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

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

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

登陸后可評(píng)論

0條評(píng)論

Shisui

男|高級(jí)講師

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

TA的文章

tensorflow2

閱讀 840·2023-04-26 00:13
云測(cè)速在線測(cè)速工具 – 騰訊云、阿里云等ping、節(jié)點(diǎn)、地域測(cè)試等測(cè)速

閱讀 2886·2021-11-23 10:08
#推薦# contabo：€4.99/月/8g內(nèi)存/4核/300gSSD/不限流量+快照+Windo

閱讀 2463·2021-09-01 10:41
《HelloGitHub》第 65 期

閱讀 2127·2021-08-27 16:25
Nextcloud個(gè)人云存儲(chǔ)絕佳選擇：一鍵自動(dòng)安裝方法和云盤使用體驗(yàn)

閱讀 4221·2021-07-30 15:14
CSS 提示工具(Tooltip)

閱讀 2375·2019-08-30 15:54
Are you sure you understand the responsive layout？

閱讀 873·2019-08-29 16:22
漫畫：程序員的“情人”節(jié)應(yīng)該這樣度過

閱讀 2754·2019-08-26 12:13

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

同源策略與JS跨域（JSONP , CORS）

相關(guān)文章

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

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

瀏覽器同源策略，及跨域解決方案

**同源策略與CORS跨域**

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

0條評(píng)論

Shisui

男|高級(jí)講師

TA的文章

tensorflow2

云測(cè)速在線測(cè)速工具 – 騰訊云、阿里云等ping、節(jié)點(diǎn)、地域測(cè)試等測(cè)速

#推薦# contabo：€4.99/月/8g內(nèi)存/4核/300gSSD/不限流量+快照+Windo

《HelloGitHub》第 65 期

Nextcloud個(gè)人云存儲(chǔ)絕佳選擇：一鍵自動(dòng)安裝方法和云盤使用體驗(yàn)

CSS 提示工具(Tooltip)

Are you sure you understand the responsive layout？

漫畫：程序員的“情人”節(jié)應(yīng)該這樣度過

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

同源策略與JS跨域（JSONP , CORS）

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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