同源与跨域

同源与跨域

  1. 同源处理、跨域相关
  • 同源策略是浏览器为了安全性实施的策略;所谓同源是指URL的协议、域名、端口号都相同;浏览器的同源策略限制了来自不同源的'document'或脚本,对当前'document'读取或设置某些属性。

  • 通过XHR实现Ajax通信的一个主要限制,来源于跨域安全策略。默认情况下,XHR对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。

  • 实现跨域请求的解决方案可能会有所差异,但它们的目标是类似的。首先,就是要确保不会在请求和响应中携带cookie,因为cookie被窃取是主要的安全隐患。其次,就是要确保未经授权无法访问相应的资源。

  • Ajax跨域技术:JSONP、Proxy、CORS、Cookie同源策略

  • JSONP:<script>标签可以加载跨域的JavaScript脚本,并且被加载的脚本和当前文档属于同一个域,因此在文档中可以调用/访问脚本中的数据和函数。如果JavaScript脚本中的数据是动态生成的,那么只要在文档中动态创建<script>标签就可以实现和服务端的数据交互。JSONP就是利用<script>标签的跨域能力实现跨域数据访问,请求动态生成的JavaScript脚本同时带一个callback函数名作为参数。JSONP只支持GET请求

  • Proxy:把访问其他域的请求替换为本域的请求;本域的请求是服务器的动态脚本负责转发的实际请求。

  • CORS:通过在HTTP Header 中添加扩展字段,服务器在相应网页头部加入字段表示允许访问domain和HTTP method,客户端检查自己的域是否在允许列表中,决定是否处理响应。
    服务端在HTTP的响应头中加入:

      Access-Control-Allow-Origin: example.com //多个域名用逗号隔开,*表示允许所有
      Access-Control-Request-Method: GET, POST
      Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin
      Access-Control-Expose-Headers: Content-Range
      Access-Control-Max-Age: 3600
    

客户端:1、发送OPTIONS请求,请求Access-Control信息。如果自己的域名在允许的访问列表中,则发送真正的请求,否则放弃请求发送。
2、直接发送请求,然后检查response的Access-Control信息,如果自己的域名在允许的访问列表中,则读取response body,否则放弃。

  • Cookie同源策略:Cookie同源只关注域名、忽略协议和端口,所以https://localhost:8080/http://localhost:8081/的Cookie是共享的。
posted @ 2018-03-22 19:10  YFIFE  阅读(192)  评论(0编辑  收藏  举报