同源跨域二三事：從同源策略到 JSONP 技術略解

三問同源策略

（一）什麼是同源策略？

同源策略是瀏覽器因安全性須要而誕生的沙盒機制中的其中一個策略。
所謂同源，就是要三同：同協議，同域名，同端口號。其中任意一個不相同，都不能稱之爲同源。非同源網站間 JavaScript 腳本的行爲受到了嚴格的限制，以提供必要的安全性。

（二）同源策略限制了什麼？

JavaScript 不能

1. 獲取非同源網站的 Cookie；
2. 訪問非同源網站的 DOM；
3. 向非同源網站發出 AJAX 請求。

（三）若是沒有同源策略，Web 應用的安全性會受到哪些挑戰？

舉幾個例子來進行說明。
首先，若是沒有同源策略，那麼任意網站均可以獲取對方的 Cookie 值。Cookie 是用來進行會話管理的工具。把 Cookie 比做一個令牌，在用戶拿着令牌，道出名字和密碼驗證經過以後，服務器就記下了令牌的模樣，下次再來，只需出示令牌，服務器便認你是以前那我的。若是 Cookie 不受同源策略的保護，那麼惡意網站就可以奪了你的令牌，到你的後花園中隨意走動，不受限制。
咱們知道有些標籤是不受同源策略的限制的，好比 iframe 標籤，img 標籤，script 標籤等。若是在惡意網站裏嵌入 iframe，設置 src 屬性值爲淘寶網地址，那麼只要你登陸了淘寶，點開了這個網站，那麼 iframe 就帶着你的 Cookie 也登陸了淘寶。此時，若是惡意網站能訪問 iframe 的 DOM，那你的隱私信息就能輕易地被盡收眼底。

須要跨域怎麼辦？

須要跨域怎麼辦（一）——JSONP 的解決方式

由前所述，script 等一衆具備 src 屬性的標籤是不受同源策略的限制的。因此 JSONP 就藉着這個特性被用來進行非同源網站之間的 JSON 信息的共享。
假如 A 網站編寫了一個使用了 JSONP 技術的 API 接口，連接爲 www.a.com/api/get-user-info，當其餘非同源網站 B 須要使用這個接口時，它只須要在 html 中寫下這樣的代碼。

<script>
    function dealWithJSON(json) {
        # 如下省略
    }
</script>
<script src="www.a.com/api/get-user-info?callback=dealWithJSON"></script>

咱們不妨假設 B 須要的 JSON 數據以下。

{
    username: 'test',
    uid: 2233221,
    is_vip: true,
    balance: 1111111
}

A 網站會將這條 JSON 數據放到經過 callback 傳來的函數的參數中，一併返回給 B 網站。此時這個函數就連同參數一塊兒嵌入了 B 網站的 script 標籤中，具體以下。

<!-- 以上省略 -->
<script>
    function dealWithJSON(json) {
        # 如下省略
    }
</script>
<script>
    dealWithJSON(
        {
            username: 'test',
            uid: 2233221,
            is_vip: true,
            balance: 1111111
        }
    );
</script>
<!-- 如下省略 -->

因爲已經提早定義好了處理 JSON 數據的函數，因此 B 網站能夠根據須要處理取出來的數據。這也就實現了跨域資源共享的需求。
然而，這樣的方式雖然在同源策略的限制下實現了跨域資源共享，但也會因爲一些紕漏出現安全性問題：JSON 劫持（此處暫時不表）。

須要跨域怎麼辦（二）——CORS 的解決方式

CORS 與 JSONP 目的相同，但比 JSONP 更強大。JSONP 只支持 GET 請求，而 CORS 支持全部請求。對於 CORS，阮一峯老師的跨域資源共享 CORS 詳解一文已經講得很是清楚透徹，須要進一步瞭解的朋友能夠參看這篇文章，就不在這裏重複造輪子了（逃）。

後記

寫這篇文章的初衷實際上是在學習 Web 安全的時候碰到了這個概念，當時對同源跨域是一頭霧水，感受太過抽象，很差理解。查閱了多篇文章和書籍後纔對這個概念有了一點了解。就如標題裏寫的同樣，本文是略解一二，若是有錯誤不許確之處請向我砸來評論！此致，敬禮（不是）。