同源策略以及繞過此限制的方法

同源策略

源：由協議【https、http】+域名【a.com】+端口【80、443】組成，（ie中略有不一樣），同源策略是瀏覽器的核心安全策略，目的是未來自不一樣源的資源進行隔離，並控制不一樣源資源間的通訊，從而減小安全威脅，加強安全性。

跨域中的一些限制以及不限制內容以下：

不限制內容：

• 腳本文件 js
• 圖片資源
• 樣式資源css
• iframe展現其餘的的資源
• a連接訪問其餘資源
• 多媒體等資源
• form表單提交

限制內容：

• 跨域的方法【get、post能夠】
• 跨域請求頭不能夠添加自定義頭部
• 本地文件系統讀寫
• iframe能夠訪問iframe總體，不能訪問內容
• cookie的限制，使用CORS須要withCredentials=true才能夠帶上cookie

========================================================

1、同源策略

一、何爲同源？

所謂"同源"指的兩個網頁url的三個部分是相同的：

http://www.example.com：80/dir/page.html

協議相同
域名相同
端口相同
二、同源策略

同源策略是Web應用程序安全模型中的一個重要概念,它由 Netscape 公司在1995年引入瀏覽器。該策略最初是爲保護DOM的訪問而設計的，Web瀏覽器容許第一個Web頁面中包含的腳本訪問第二個Web頁面中的數據，但前提是兩個Web頁面具備相同的origin。後來進行了擴展，此策略可防止一個頁面上的惡意腳本經過該頁面的DOM訪問另外一個網頁上的敏感數據。這一機制對於普遍依賴HTTP cookie來維護通過身份驗證的用戶會話的現代Web應用程序具備特別的意義，由於服務器基於HTTP cookie信息來顯示敏感信息或採起狀態更改操做。必須在客戶端保持無關站點提供的內容之間的嚴格分離，以防止數據機密性或完整性丟失。

同源策略主要應用於從腳本訪問數據；經過相應的HTML標記嵌入跨源的資源，如圖像、CSS和腳本不受限制

三、實現

由於它是一個重要的安全基石，全部現代瀏覽器都實現某種形式的同源策略，這些策略不須要與精確的規範相匹配，但一般被擴展爲與其餘Web技術（如Microsoft Silverlight、Adobe Flash或Adobe Acrobat或M）定義大體兼容的安全邊界。

四、同源策略的限制

（1） Cookie、LocalStorage 和 IndexDB 沒法讀取

（2） DOM 沒法得到

（3） AJAX 請求不能發送

 

2、繞過同源策略限制的方法

一、document.domain屬性

Cookie 是服務器寫入瀏覽器的一小段信息，只有同源的網頁才能共享。可是，兩個網頁一級域名相同，只是二級域名不一樣，瀏覽器容許經過設置document.domain共享 Cookie。

1.一、經過JS設置document.domain屬性：

<script type="text/javascript">
document.domain = 'example.com';
</script>

1.二、服務器也能夠在設置Cookie的時候，指定Cookie的所屬域名爲一級域名，好比.example.com。
Set-Cookie: key=value; domain=.example.com; path=/
這樣的話，二級域名和三級域名不用作任何設置，均可以讀取這個Cookie。

 

二、片斷識別符（fragment identifier）

片斷標識符（fragment identifier）指的是，URL的#號後面的部分，好比http://example.com/x.html#fragment的#fragment

當fragment變化的時候，會觸發window.onhashchange事件，能夠經過修改片斷標識符的值，來在兩個頁面之間傳遞數據

父窗口能夠把信息，寫入子窗口的片斷標識符。

var src = originURL + '#' + data;
document.getElementById('myIFrame').src = src;
子窗口經過監聽hashchange事件獲得通知。

window.onhashchange = checkMessage;

function checkMessage() {
  var message = window.location.hash;
  // ...
}
一樣的，子窗口也能夠改變父窗口的片斷標識符：
parent.location.href= target + "#" + hash;

三、window.name
四、跨文檔通訊API（Cross-document messaging）

五、JSONP

六、CORS(Cross-Origin Resource Sharing)

七、WebSockets

 

3、JSONP和CORS兩種跨域方式的對比：

3.一、JSONP

　　JSONP是利用瀏覽器對script的資源引用沒有同源限制，經過動態插入一個script標籤，當資源加載到頁面後會當即執行的原理實現跨域的。JSONP是一種非正式傳輸協議，該協議的一個要點就是容許用戶傳遞一個callback或者開始就定義一個回調方法，參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。
　　JSONP只支持GET請求而不支持POST等其它類型的HTTP請求,它只支持跨域HTTP請求這種狀況，不能解決不一樣域的兩個頁面之間如何進行JavaScript調用的問題，JSONP的優點在於支持老式瀏覽器，弊端也比較明顯：須要客戶端和服務端定製進行開發，服務端返回的數據不能是標準的Json數據，而是callback包裹的數據。

3.二、CORS

　　CORS是現代瀏覽器支持跨域資源請求的一種方式，當使用XMLHttpRequest發送請求時，瀏覽器發現該請求不符合同源策略，會給該請求加一個請求頭：Origin，後臺進行一系列處理，若是肯定接受請求則在返回結果中加入一個響應頭：Access-Control-Allow-Origin;瀏覽器判斷該相應頭中是否包含Origin的值，若是有則瀏覽器會處理響應，咱們就能夠拿到響應數據，若是不包含瀏覽器直接駁回，這時咱們沒法拿到響應數據。　　CORS支持全部的瀏覽器請求類型，承載的請求數據量更大，開放更簡潔，服務端只須要將處理後的數據直接返回，不須要再特殊處理。