网络原理4.跨域资源共享,跨域问题解决方案

1. 什么是跨域

• 跨域是由于浏览器的同源策略造成的
• 域名(或者IP),端口,协议只要有一个不同,便是跨域

1.1 同源策略

限制浏览器请求接口域名(或者IP),端口,协议都相同

• iframe同源:禁止对不同源的页面DOM进行操作
• XmlHttpRequest同源,禁止ajax跨域

2. 为什么浏览器限制跨域

为了限制浏览器的行为,防止CSRF(Cross Site Request Forgery 跨域请求伪造)攻击

CSRF攻击原理

1. 登录受信任网站A,并在本地生成Cookie
2. 在没有退出A的情况下,访问恶意网站
3. 恶意网站发起一个访问A站点的ajax请求
4. 允许跨域的话,恶意网站的请求就可以获取到A站点的Cookie,从而请求成功

3. CORS:Cross-origin Resource Sharing(跨资源共享)

跨资源共享标准新增了一组HTTP首部,允许服务器指定哪些站点可以跨域访问服务器资源

1. Access-Control-Allow-Origin
   • 指示请求的资源能共享给哪些域
2. Access-Control-Allow-Credentials
   • 是否允许发送Cookie,默认情况下,CORS请求中不携带Cookie
3. Access-Control-Allow-Headers
   • 用在对预检请求的响应中，指示实际的请求中可以使用哪些 HTTP 头。
4. Access-Control-Allow-Methods
   • 指定对预检请求的响应中，哪些HTTP方法允许访问请求的资源。
5. Access-Control-Expose-Headers
   • 指示哪些 HTTP 头的名称能在响应中列出
6. Access-Control-Max-Age
   • 指示预请求的结果能被缓存多久
7. Access-Control-Request-Headers
   • 用于发起一个预检请求,告知服务器正式请求会使用那些 HTTP 头
8. Access-Control-Request-Method
   • 用于发起一个预请求,告知服务器正式请求会使用哪一种 HTTP 请求方法
9. Origin
   • 指示获取资源的请求是从什么域发起的

4. 预检请求(prelight request)

对于那些可能产生问题的HTTP请求,浏览器首先使用OPTIONS方法发起一个预检请求,检测浏览器所支持的请求方法和浏览器是否支持跨域, 服务器允许之后,才会发起真正的HTTP请求

4.1 简单请求

简单请求

• 请求方法是GET,HEAD,POST
• CROS安全的首部集合:
  • Accept
  • Accept-Language
  • Content-Language
  • DRP
  • DownLink
  • Save-Data
  • Viewport-Width
  • Width
  • Content-Type(取值范围: text/plain, multipart/form-data, application/x-www-form-urlencoded)
• 请求中任意的XMLHttpRequestUpload对象均没有注册任何事件监听器
• XMLHttpRequestUpload对象可以使用XMLHttpRequest.upload属性访问
• 请求中没有使用ReadableStream对象

4.2 预检请求

预检请求

• 请求方法使用了PUT, DELETE,CONNECT, OPTIONS, TRACE, PATCH
• 使用了CROS安全的首部集合之外的其他首部字段
• Content-Type没有使用CROS限制的集合
• 请求中的XMLHttpRequestUpload对象注册了任意多个事件监听器
• 请求中使用了ReadableStream对象

4.3 预检请求的作用

1. 检测服务器是否支持所请求的方法
2. 检测浏览器是否跨域

5. 跨域问题的解决

5.1 使用jsonp

5.2 服务器端解决

• 所有的OPTIONS都允许访问
• 设置Access-Control-Allow-Origin,Access-Control-Allow-Methods,Access-Control-Allow-Credentials,Access-Control-Allow-Headers等响应头
• 浏览器端,ajax请求,添加两个参数
  • crossDomain: true,
  • xhrFields: { withCredentials: true },

5.3 Spring为例解决跨域问题

• 方案1: 在Controller加上@CrossOrigin注解
• 方案2: 自定义一个拦截器或者过滤器,实现以下代码

String method = request.getMethod(); 
if ("OPTIONS".equals(method.toUpperCase())) { 
    response.setHeader("Access-Control-Allow-Headers", "*"); 
    response.setHeader("Access-Control-Allow-Methods", "*"); 
    response.setStatus(200); 
    response.setContentType("text/plain;charset=utf-8"); 
    response.setCharacterEncoding("utf-8"); 
    return true; 
} 
response.setHeader("Access-Control-Allow-Origin", "*"); 

//如果使用了SpringSecurity
//还需要在SpringSecurity的配置中加上以下代码
antMatchers(HttpMethod.OPTIONS).permitAll();