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

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

什么是同源策略

同源策略是用來限制從一個源加載的文檔或者腳本如何與來自另一個源的資源進行交互，是一種用于隔離潛在的惡意文件的關鍵的安全機制。

何謂同源

如果協議、域名和端口對于兩個頁面來說是相同的，則這兩個頁面就是同源的。比如：http://www.hyuhan.com/index.html 這個網站，協議是http，域名是www.hyuhan.com，端口是80(默認端口)，它的同源情況如下：

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

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

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

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

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

1. Cookie、LocalStorage和IndexDB無法讀取

2. DOM無法操作

3. AJAX請求不能發送

如何進行跨域訪問

怎么跨域進行AJAX請求

主要由三種方法可以繞過同源策略的限制，來進行跨域的AJAX請求。

JSONP

JSONP是客戶端與服務端跨域通信的常用的方法。利用可以跨域的<script&bt;元素，向服務器請求json數據，服務端收到請求后，將數據放在一個回調函數中傳回來。實現如下：

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參數是用來設置后端需要調用的回調函數的名字的，服務器返回的數據如下：

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

這樣，前端就能跨域讀取后端的數據了。但是jsopn只能發生get請求，不能發送post請求。

WebSocket

WebSocket是一種基于TCP的新的網絡協議，它不實行同源策略，只要服務器支持，就可以進行跨域訪問。而且WebSocket并不限于以Ajax方式通信，因為Ajax技術需要客戶端發起請求，而WebSocket服務器和客戶端可以彼此相互推送信息。

CORS

CORS是Access-Control-Allow-Origin（跨域資源共享）的縮寫，它是一個W3C的標準。CORS需要瀏覽器和服務器同時支持，目前基本所有的瀏覽器都支持該功能。服務器端對于CORS的支持，主要就是通過設置Access-Control-Allow-Origin來進行的。如果瀏覽器檢測到相應的設置，就可以允許Ajax進行跨域的訪問。

document.domain

Cookie是服務器寫入瀏覽器的信息，安全起見，只有同源的網頁才能共享。但是，如果兩個網頁的一級域名相同，但是耳機域名不同的話，可以通過設置document.domain來共享Cookie。

比如，一個網頁域名是http://w1.example.com/a.html ，另一個網頁域名是http://w2.example.com/b.html ，只要給們設置相同的document.domain，這兩個網頁就可以共享Cookie。

postMessage API

postMessage()方法允許來自不同源的腳本采用異步方式進行有限的通信，可以實現跨文檔、多窗口、跨域消息傳遞。用postMessage()函數傳遞消息，目標頁面監聽window的message事件接收消息。利用postMessage，我們可以跨域讀取LocalStorage和IndexDB還有DOM數據。

window.name

瀏覽器窗口有window.name的屬性，該屬性規定無論是否同源，只要在一個窗口里，前一個網頁設置了這個屬性，后一個網頁就可以讀取它。即在一個窗口(window)的生命周期內,窗口載入的所有的頁面都是共享一個window.name的，每個頁面對window.name都有讀寫的權限，window.name是持久存在一個窗口載入過的所有頁面中的。顯然，這是可以實現跨域訪問的。

關于“前端面試之同源和跨域的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。