前端面試之同源和跨域的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)前端面試之同源和跨域的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

什么是同源策略

同源策略是用來(lái)限制從一個(gè)源加載的文檔或者腳本如何與來(lái)自另一個(gè)源的資源進(jìn)行交互，是一種用于隔離潛在的惡意文件的關(guān)鍵的安全機(jī)制。

何謂同源

如果協(xié)議、域名和端口對(duì)于兩個(gè)頁(yè)面來(lái)說(shuō)是相同的，則這兩個(gè)頁(yè)面就是同源的。比如：http://www.hyuhan.com/index.html 這個(gè)網(wǎng)站，協(xié)議是http，域名是www.hyuhan.com，端口是80(默認(rèn)端口)，它的同源情況如下：

• http://www.hyuhan.com/other.html：同源

• http://hyuhan.com/other.html：不同源（域名不同）

• https://www.hyuhan.com/other.html：不同源（協(xié)議不同）

• http://www.hyuhan.com:81/other.html：不同源（端口不同）

同源策略是為了保護(hù)用戶信息的安全，受到同源策略限制的主要有以下幾種行為：

1. Cookie、LocalStorage和IndexDB無(wú)法讀取

2. DOM無(wú)法操作

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

如何進(jìn)行跨域訪問(wèn)

怎么跨域進(jìn)行AJAX請(qǐng)求

主要由三種方法可以繞過(guò)同源策略的限制，來(lái)進(jìn)行跨域的AJAX請(qǐng)求。

JSONP

JSONP是客戶端與服務(wù)端跨域通信的常用的方法。利用可以跨域的<script&bt;元素，向服務(wù)器請(qǐng)求json數(shù)據(jù)，服務(wù)端收到請(qǐng)求后，將數(shù)據(jù)放在一個(gè)回調(diào)函數(shù)中傳回來(lái)。實(shí)現(xiàn)如下：

window.onload = function() {
    var script = document.createElement('script');
    script.src = "http://example.com/callback=test";
    document.appendChild(script);
}
function test(res) {
    console.log(res);
}

src的callback參數(shù)是用來(lái)設(shè)置后端需要調(diào)用的回調(diào)函數(shù)的名字的，服務(wù)器返回的數(shù)據(jù)如下：

test({
    "name": "小明",
    "age": 24
    })

這樣，前端就能跨域讀取后端的數(shù)據(jù)了。但是jsopn只能發(fā)生get請(qǐng)求，不能發(fā)送post請(qǐng)求。

WebSocket

WebSocket是一種基于TCP的新的網(wǎng)絡(luò)協(xié)議，它不實(shí)行同源策略，只要服務(wù)器支持，就可以進(jìn)行跨域訪問(wèn)。而且WebSocket并不限于以Ajax方式通信，因?yàn)锳jax技術(shù)需要客戶端發(fā)起請(qǐng)求，而WebSocket服務(wù)器和客戶端可以彼此相互推送信息。

CORS

CORS是Access-Control-Allow-Origin（跨域資源共享）的縮寫，它是一個(gè)W3C的標(biāo)準(zhǔn)。CORS需要瀏覽器和服務(wù)器同時(shí)支持，目前基本所有的瀏覽器都支持該功能。服務(wù)器端對(duì)于CORS的支持，主要就是通過(guò)設(shè)置Access-Control-Allow-Origin來(lái)進(jìn)行的。如果瀏覽器檢測(cè)到相應(yīng)的設(shè)置，就可以允許Ajax進(jìn)行跨域的訪問(wèn)。

document.domain

Cookie是服務(wù)器寫入瀏覽器的信息，安全起見(jiàn)，只有同源的網(wǎng)頁(yè)才能共享。但是，如果兩個(gè)網(wǎng)頁(yè)的一級(jí)域名相同，但是耳機(jī)域名不同的話，可以通過(guò)設(shè)置document.domain來(lái)共享Cookie。

比如，一個(gè)網(wǎng)頁(yè)域名是http://w1.example.com/a.html ，另一個(gè)網(wǎng)頁(yè)域名是http://w2.example.com/b.html ，只要給們?cè)O(shè)置相同的document.domain，這兩個(gè)網(wǎng)頁(yè)就可以共享Cookie。

postMessage API

postMessage()方法允許來(lái)自不同源的腳本采用異步方式進(jìn)行有限的通信，可以實(shí)現(xiàn)跨文檔、多窗口、跨域消息傳遞。用postMessage()函數(shù)傳遞消息，目標(biāo)頁(yè)面監(jiān)聽(tīng)window的message事件接收消息。利用postMessage，我們可以跨域讀取LocalStorage和IndexDB還有DOM數(shù)據(jù)。

window.name

瀏覽器窗口有window.name的屬性，該屬性規(guī)定無(wú)論是否同源，只要在一個(gè)窗口里，前一個(gè)網(wǎng)頁(yè)設(shè)置了這個(gè)屬性，后一個(gè)網(wǎng)頁(yè)就可以讀取它。即在一個(gè)窗口(window)的生命周期內(nèi),窗口載入的所有的頁(yè)面都是共享一個(gè)window.name的，每個(gè)頁(yè)面對(duì)window.name都有讀寫的權(quán)限，window.name是持久存在一個(gè)窗口載入過(guò)的所有頁(yè)面中的。顯然，這是可以實(shí)現(xiàn)跨域訪問(wèn)的。

關(guān)于“前端面試之同源和跨域的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。