同源策略和跨域方法

同源與跨域

通常狀況下，禁止一個域從另外一個域讀取數據，卻可使用某些從其餘域拿到的資源。好比說，容許一個域執行、渲染、應用從其餘域獲取到的腳本、圖片、樣式；一樣，一個域能夠展現從其餘域獲取的內容，好比在frame中顯示html文檔。網絡資源也能夠選擇性的讓其餘域來讀取本身的信息，好比使用Cross-Origin Resource Sharing，這種狀況下訪問權是針對單個域受權的。同源策略的控制者是瀏覽器，瀏覽器能夠控制不一樣域之間的資源的訪問或相互操做，但不控制本身對不一樣域之間的資源的操做和訪問。

同源策略

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

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

不限制內容：

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

限制內容：

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

跨域方法

1. 使用反向代理，避免跨域，經過後端來完成跨域部分
2. JSONP方式，利用js文件的跨域容許，而且js文件請求到了，就會執行該js腳本，如此能夠在前端定義好function callback(data){};這樣去請求後端的js文件，文件的內容包括了須要的數據，可是返回的是一個函數callback(data);這樣就會調用前端腳本寫好的callback方法，把data當作參數使用
3. CORS（Cross Origin Resource Sharing），經過協商HTTP Header讓瀏覽器和服務端進行通訊，來決定請求或者響應是否有效，默認狀況下，瀏覽器發送跨域請求不帶認證信息（好比cookie,證書,代理認證信息等），withCredentials屬性值爲false，後端響應設置Access-Control-Allow-Origin容許該域，或者爲*,若是須要cookie認證信息跨域須要withCredentials=true，同時服務端容許Access-Control-Allow-Credentials:true，同時Access-Control-Allow-Origin 值不能爲*；使用CORS瀏覽器將CORS請求分紅兩類：簡單請求（simple request）和非簡單請求（not-so-simple request），只要同時知足如下兩大條件，就屬於簡單請求。
   1) 請求方法是如下三種方法之一：
   HEAD
   GET
   POST
   （2）HTTP的頭信息不超出如下幾種字段：
   Accept
   Accept-Language
   Content-Language
   Last-Event-ID
   Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

對於非簡單請求、會發起預檢請求Options來確認是否容許跨域，這種方法老的瀏覽器不必定支持。fetch方法在移動端使用較多，也能夠配合CORS來完成跨域。

1. form表單提交，這樣能夠提交數據，可是進行交互有點困難；
2. window.name + iframe的使用，可使用iframe定義一個窗口window，經過後端或者頁面iframe的src頁面的js腳本配合，把數據放在這個window.name上，最大能夠存儲2M的數據，而後主域能夠把這個iframe的src設置爲什麼主域同域的中間頁，而此時iframe的window.name並不會變，這樣主頁就能夠獲取該iframe的window.name來獲取數據。參考連接
3. document.domain能夠完成兩個頂級域名下的子域名之間的通訊
4. postMessage是H5中的window之間的通訊方式。
5. WebSocket能夠隨便玩