refs：https://www.cnblogs.com/gyrgyr/p/10571616.html

Definition: 一種安全機制，用於限制不同源的 document 或 script 相互訪問

Target：目標是限制 scripts：如果不加這個限制，那麼惡意網頁下的 scripts 將能夠獲取別的網頁下的 Cookie 等，然後在本地網頁開啟瞭一個 iframe，登錄後進行惡意性操作，但是同源策略的存在，先不說 Cookie 等私密信息獲取不到，即使開起瞭 iframe 也將和惡意 script 不同源

Example：惡意釣魚網站，引入第三方郵件服務後，因為不同源，一次你不能用腳本訪問或操作其數據

Origin

什麼是同源的呢，它將由 URL 決定，他的 協議（http, https），端口號（80,8080），主機名（baidu.com, http://sina.com) 都要一致才能視為同源

與 http://store.company.com/dir/page.html 相比

Tips：IE 瀏覽器的同源策略是不考慮端口的

Cookie Same-Origin Policy

Cookie 隻有同源網頁才能共享（Protocol，Port，host）

DOM Same-Origin Policy

DOM，文檔對象模型，Document Object Model：在網頁上組織頁面或文檔的對象被組織在一個樹形結構中，用來表示文檔中對象的標準模型即為 DOM

1、<script>, <img>, <iframe>, <link> 的跨域請求，不受同源策略的約束，但不能通過 ajax 來獲取

2、引入外部 script 文件後，該文件的源為當前頁面（誰引入的 JS 那麼 JS 就屬於哪個域）

3、script 不能隨意跨域操作其它頁面的 DOM

4、script 不能獲取 <script>, <img>, <iframe>, <link> 跨域請求得到的內容（可以獲取一些不涉及用戶隱私的公共信息）

5、<iframe> 父子頁面（點擊進入的下一頁面）交互受同源策略約束

Ajax Same-Origin Policy

Tips：阻止的是跨域資源的獲取，而不是阻止跨域的請求；跨域請求可以正常發出，但是瀏覽器阻止腳本獲取返回的內容。

Web Storage Same-Origin Policy

克服 Cookie 的限制：如果你的數據不需要服務端處理，隻需要存儲在客戶端即可，但是也存在同源訪問的限制

Target：1、提供一種在 Cookie 之外存儲會話數據的途徑；2、提供一種存儲大量可以跨會話存在的數據的機制

localStorage：與站點源（origin）綁定，關閉瀏覽器後仍然有效

sessionStorage：綁定當前瀏覽器端口，瀏覽器會話結束後清理

腳本型 URL 的同源策略

偽 URL 的源如何判定？

Tips：在腳本型 URL 加載的頁面裡，以父頁面的上下文權限執行相應的腳本代碼——與父頁面同源

Cross Origin

Server Proxy

同源策略的作用域是瀏覽器，因此可以利用服務器實現跨域通信，即使用第三方服務器獲取目標信息在返回給自己（也就是我們常說的代理服務器）

React Scaffolding 中在 package.json 追加如下配置，當用 ajax 請求瞭本地不存在的資源，將會轉發給目標代理（但是不支持配置多個代理）