浏览器同源策略及规避方案

 浏览器的同源策略的目的是为了确保用户的信息安全，防止用户的数据被窃取。

 每当客户端向服务器端发送请求时，请求都会携带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