摘要：瀏覽器同源策略什么是瀏覽器同源策略同源策略是瀏覽器安全的基礎。同源策略限制從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這里我們做一下簡要的總結受到瀏覽器同源策略的限制，頁面的無法被頁面的訪問和操作。不受同源策略的限制。

“同源策略”（Same Origin Policy）是瀏覽器安全的基礎。

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

在判斷兩個頁面的url是否具有相同的源之前，我們先來看一下一個url（統一資源定位符）的基本組成部分。

對于一個url，它的基本組成部分是：協議 :// 域名（或者是ip） : 端口（如果指定了） / 路徑。

那么下面我們來舉個例子：

對于http://www.example.com/static來說，協議就是http，它的域名是www.example.com，它的路徑是static，這里的端口號省略了（默認為80）。

值得一提的是，在這個域名下面，example.com是主域名，而www.example.com是子域名，同樣的a.example.com也是一個與前面所述不同的另一個子域名。并且，上面這三個域名互不相同。

這里不再展開贅述，相關知識請查閱與計算機網絡有關的知識。

那如何判斷頁面是否具有相同的源呢？

如果協議，端口（如果指定了）和域名對于兩個頁面是相同的，則兩個頁面具有相同的源。

也就是說，判斷同源的三要素是：協議、端口、域名。

需要注意的是，如果是一個域名二級域名，比如上面提到的www.example.com，它與另外一個二級域名a.example.com，雖然他們的主域相同，但是子域不同，于是這兩個就不是同一個域名，所以也不能說是同源。三級域名依次類推...

下表給出了相對http://store.company.com/dir/page.html同源檢測的示例：

說到同源策略，必不可少的就是Cookie這個東西了。

而講到Cookie，跟它關聯在一起的又有Session。

對于這兩者，這里不做大篇幅的介紹，具體去傳送門查閱。

這里我們做一下簡要的總結：

Cookie受到瀏覽器同源策略的限制，A頁面的Cookie無法被B頁面的Cookie訪問和操作。

Cookie最大存儲容量一般為4KB，由服務器生成，在HTTP報文首部設置Set-Cookie可以指定生成Cookie的內容和生命周期，如果由瀏覽器生成則在關掉瀏覽器后失效。

Cookie存儲在瀏覽器端，由于每次發送HTTP請求默認會把Cookie附到HTTP首部上去，所以Cookie主要用來身份認證，而不用來存儲其他信息，防止HTTP報文過大。

Session存儲在服務器，主要與Cookie配合使用完成身份認證和狀態保持的功能。只有Cookie或只有Session都無法完成身份認證和狀態保持的功能。

最后，對Cookie和Session實現的身份認證和狀態保持功能做一個舉例。

假設現在有一個學生信息管理系統，此時數據庫已經有學生的相關信息。（賬號、密碼、個人信息等等）
然后當學生登錄這個系統，通過POST請求把用戶的賬戶密碼發送到后臺服務器。當后臺服務器接收到這些參數的時候，會跟數據庫保存的記錄進行匹配。
一旦匹配成功，也就是用戶的賬號密碼都正確的情況下，這個時候后臺服務器會在Session中記錄一個值，可以是用戶名或者其他能夠唯一標識用戶的字段。
當把這個值保存在Session中后，后臺服務器會返回響應告知客戶端登錄成功，可以進行后續的操作。此時，后臺服務器會在HTTP響應報文中添加一個字段Set-Cookie，它的值是當前Session的SessionID，（這個SessionID是指向我們當前的那個Session的，在Node的Express中express-session會封裝好這個過程）當然還會設置Cookie的其他屬性，比如說過期時間Expires等等。
當瀏覽器接收到這個HTTP響應報文的時候，就會在本地設置一個Cookie，它的過期時間由響應報文中Set-Cookie中的Expires字段的值決定，如果為空，則關閉瀏覽器（即會話結束時）后失效。
之后，每次向后臺服務器發送請求的時候，瀏覽器默認會把這個Cookie加在HTTP請求報文的Cookie中。這樣，每次后臺服務器接收到請求的時候，會根據Cookie中的SessionID去找到我們的Session。
假如這個SessionID映射得到Session，那么這個時候說明瀏覽器是已經登錄過了。于是，就可以進行后續的一些相關的操作。
另外，值得一提的是，Session機制決定了當前客戶只會獲取到自己的Session，而不會獲取到別人的Session。各客戶的Session也彼此獨立，互不可見。也就是說，當多個客戶端執行程序時，服務器會保存多個客戶端的Session。獲取Session的時候也不需要聲明獲取誰的Session。

這就是Cookie和Session做狀態保持和身份驗證的一個具體的例子。

說到同源限制，還有一個不得不提的就是iframe。

iframe可以在父頁面中嵌入一個子頁面，在日常開發中一旦使用，避免不了的就要涉及到不同的iframe頁面進行通信的問題，可能是獲得其他iframe的DOM，或者是獲取其他iframe上的全局變量或方法等等。

同源下的iframe，也就是iframe中的src屬性的URL符合同源的條件，那么通過iframe的contentDocument和contentWindow獲取其他iframe的DOM或者全局變量、方法都是很簡單的事情。

那如果是非同源的兩個iframe，單純的通過變量訪問的方式就受到同源限制了。

為了解決這個問題，HTML5引入了一個新的API：postMessage，主要就是用來解決存在跨域問題的iframe頁面之間通信的問題。

下面簡單的舉一個例子，假如現在有兩個不同的頁面，A頁面的url是http://localhost:4002/parent.html，B頁面的url的是http://localhost:4003/child.html，現在我把B頁面用iframe嵌在A頁面下面，代碼（精簡）是這樣子的。現在我要實現的是向子頁面B傳遞一個消息：

A頁面代碼：

    
A頁面
    
    

B頁面代碼：

    
B頁面
    

結果如圖：

postMessage接受兩個參數，一個是要傳送的data，另外一個是目標窗口的源，如果想傳給任何窗口，可以設置成*。
目標頁面接收信息的時候，使用的是window.addEventListener("message", function() {})。

當然也有不受同源限制的情況存在，主要有以下列舉的：

script標簽允許跨域嵌入腳本，稍后介紹的JSONP就是利用這個“漏洞”來實現。

img標簽、link標簽、@font-face不受跨域影響。

video和audio嵌入的資源。

iframe載入的任何資源。（不是iframe之間的通信）