摘要：瀏覽器的同源策略瀏覽器所遵守的同源策略是指限制不同源之間執(zhí)行特定操作。這正是同源策略想要規(guī)避的安全隱患。目前為止，你已經(jīng)充分了解同源策略這個主題。

我們之前提到過，AJAX技術(shù)使開發(fā)者能夠?qū)Ｗ⒂诨ヂ?lián)網(wǎng)中數(shù)據(jù)的傳輸，而不再拘泥于數(shù)據(jù)傳輸?shù)?strong>載體。通過AJAX技術(shù)，我們獲取數(shù)據(jù)的方式變得更加靈活，可控和優(yōu)雅。

但是AJAX技術(shù)并不是一把萬能鑰匙，互聯(lián)網(wǎng)中的數(shù)據(jù)隱私和數(shù)據(jù)安全（例如你的銀行賬號和密碼）也非常重要，為了保護(hù)某些用戶數(shù)據(jù)的隱私與安全，瀏覽器使用“同源策略”限制了AJAX技術(shù)獲取數(shù)據(jù)的范圍和能力。但在一些合理的場景中，我們又不得不想辦法繞過同源策略，實現(xiàn)跨域請求資源。因此“跨域技術(shù)”一直成為開發(fā)者們經(jīng)久不衰的討論話題。

在“跨域獲取資源”這一主題中，我們將圍繞“同源策略”和“跨域”兩大主題展開，不但講述它們是什么，更說明了為什么要這么做。相信你在讀完該主題下的兩篇文章后，一定會對這兩大主題有一個清晰，系統(tǒng)的認(rèn)識。

需要提前聲明的是，本主題下的文章并不會像眾多相同主題的文章一樣羅列出所有的跨域技術(shù)，而只會撿最主流的四種進(jìn)行講解。因為我并不打算寫“教你如何跨域”這樣類型的文章。

讓我們開始吧。

整個互聯(lián)網(wǎng)世界的數(shù)據(jù)要么存儲在服務(wù)端（即服務(wù)器，如數(shù)據(jù)庫，硬盤等）中，要么存儲在客戶端（即瀏覽器，如cookie，LocalStorage，sessionStorage）中?；ヂ?lián)網(wǎng)數(shù)據(jù)的傳輸實際上就是客戶端與服務(wù)端之間的交互。

而所謂的數(shù)據(jù)隱私與安全保護(hù)，說白了就是數(shù)據(jù)擁有者對數(shù)據(jù)索取者發(fā)出警告：“不是你的你別動”。

搞清了這個原則，我們就很容易明白，如果你在客戶端，并且想要獲取服務(wù)端數(shù)據(jù)，你首先需要通過服務(wù)器端的驗證，證明你有權(quán)限獲取數(shù)據(jù)（例如“登錄”），而如果你在服務(wù)端，想要獲取客戶端的某些數(shù)據(jù)，你同樣需要客戶端通過某些方式驗證你有資格獲取相應(yīng)的數(shù)據(jù)資源。

那么上面提到的“某些方式”是什么呢？其中最重要的就是我們今天的主題之一 -- 瀏覽器的“同源策略”。

瀏覽器所遵守的“同源策略”是指：限制不同源之間執(zhí)行特定操作。這涉及到兩個問題：什么是“源”？，以及“特定操作”是指什么？

讓我們停下來解釋一下這個概念：

一個源由協(xié)議，域名和端口三部分組成，這三者任一一個不同都會被瀏覽器識別為不同的源；

上文所提到的特定操作是指：

讀取 Cookie，LocalStorage 和 IndexDB；

獲取 DOM 元素；

發(fā)送 AJAX 請求；

在搞清了同源策略的概念之后，讓我們看看瀏覽器是出于怎樣的考慮，一直堅守著同源策略：

因為不同的源，大多數(shù)情況下就意味著它們在互聯(lián)網(wǎng)中歸屬于不同的站點（或是被用作不同的用途）。也就是說它們是不同的項目，有不同的文件根目錄，那么它們的數(shù)據(jù)也不應(yīng)該共享也就理所應(yīng)當(dāng)了，否則數(shù)據(jù)的隱私和安全也無從談起。不過請注意，我上面所說的話是基于“不同源就彼此不相干”的假設(shè)，這其實存在一些問題，我們之后會提到。

這個需要我們假設(shè)，如果我們想做一些“壞事”，并且瀏覽器允許我們執(zhí)行這些“特定操作”，我們作為“壞人”能做什么：

首先，由于很多網(wǎng)站使用瀏覽器存儲用戶的用戶名和密碼，那么我們便可以在A域中（我們在服務(wù)器上托管的網(wǎng)站）讀取任意來訪用戶的所有Cookie信息（沒有同源策略的保護(hù)，該用戶所有網(wǎng)站的Cookie記錄都是透明的），我們就可以利用這些Cookie信息偽裝成來訪用戶做任何事，而在現(xiàn)實世界，出于同源政策的保護(hù)，我們只能訪問用戶該域下的Cookie信息，也就是說，我們只能訪問我們自己設(shè)置的Cookie信息。

其次，如果我們能夠獲取不同域下的DOM元素，我們就可以通過