同源与跨域

同源与跨域

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是共享的。