瀏覽器同源策略及規避方案

 瀏覽器的同源策略的目的是爲了確保用戶的信息安全，防止用戶的數據被竊取。

 每當客戶端向服務器端發送請求時，請求都會攜帶cookie發送給服務器，cookie中包含着用戶信息（這裏又涉及到cookie的知識，cookie的做用有哪些呢？），

 若是沒有同源限制，用戶的信息就能夠被隨便發送到某個服務器。

 

什麼是同源呢？

協議+端口+域名 都相同的頁面就是同源的。

 

瀏覽器的同源策略有哪些限制呢？

 不一樣源之間的頁面有三個限制：

  一、cookie、localStorage、indexDB不能共享

  二、dom不能獲取

  三、ajax請求不能發送

 

何時須要規避同源限制呢？

   不一樣的源的網頁之間須要相互跳轉連接，有時甚至還要傳遞數據。

   好比實際場景中的一個例子，舊項目由於寫的太爛，咱們建了一個新項目準備去重構舊的項目，可是由於如今業務太多，咱們暫時沒有時間將舊項目中的代碼所有遷移到新的項目裏面，咱們不可能再在舊的項目裏面去寫新的需求，因此新的需求咱們要在新的項目裏面作，而後在徹底重構好舊的項目到新的項目裏面以前，咱們都要將新寫的需求的模塊用iframe的方式嵌入到舊項目裏。兩個不一樣的項目的域名和端口都是不同的，因此須要對跨域進行處理。

 

如何規避同源策略呢？

   一、規避cookie不能共享的問題

     cookie只能在同源的網頁中共享，若是二級域名不一樣，一級域名相同，能夠給網頁設置document.domain的值爲這個相同的一級域名，cookie就能夠共享

     （能夠詳細瞭解cookie的特色）

 

  二、規避不能拿到dom

      好比一個頁面中經過iframe嵌入另外一頁面，且這兩個頁面是不一樣源的，那麼若是想在父窗口獲取子窗口中dom，是不能拿到的。

       一級域名相同，二級域名不一樣，能夠經過設置document.domain來解決跨域問題。

       徹底不一樣的源解決跨域窗口通訊問題：

        一、片斷標識符

         將須要跨窗口傳遞的值設置在url的#後面，由於改變url的#的值時，頁面不會刷新。

         在接受數據的子頁面，經過window.onhaschange事件監聽來獲取到數據。

       二、window.name

         不管是否同源，只要是在同一窗口，網頁就能夠讀取到window.name。

         容量大能夠放很長的字符串。

         可是須要監聽子頁面的window.name的變化，影響網頁性能。

       三、postMessage（跨文檔通訊api）

          經過postMessage給指定域的網頁發送消息，接受數據的頁面經過message事件去獲取消息。

          這個方法能夠還能夠跨域訪問localstroge中的數據。

 

    三、Ajax不能跨域請求   

        一、JSONP

            jsonp的本質是利用script標籤去跳轉url，由於script標籤沒有同源的限制，而後在url上帶上一個函數回調參數。數據經過這個函數回調參數來傳遞。

        二、Websocket

            利用websocket來實現通訊，由於websocket協議沒有同源策略的限制。

        三、Cors

            經過跨域資源分享，在服務器端響應頭部設置跨域的範圍。

 

    cors和jsonp的區別是，jsonp只能發get請求，可是cors支持任何類型的請求。

 

 

 

 

 

 

 

參考資料：

同源策略及規避策略：http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

postMessage： https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage