浏览器只允许请求当前域的资源,而对其他域的资源表示不信任。那怎么才算跨域呢?
- 请求协议
http,https
的不同 - 域
domain
的不同 - 端口
port
的不同
好好好,大概就是这么回事啦,下面我们讲2种中规中矩的办法:CORS
,JSONP
document.domain,window.name,web sockets就先别闹了,腰不好 : )
2、CORS
这是W3C的标准,全称是"跨域资源共享"(Cross-origin resource sharing)。我们先来看看整个流程
在此之前,需要知道简单请求
复杂请求
这两个小朋友
1.简单请求:
1): 请求方式只能是:head
,get
,post
2): 请求头允许的字段:Accept
,Accept-Language
,Content-Language
,Last-Event-ID
Content-Type
:application/x-www-form-urlencoded、multipart/form-data、text/plain 三选一
2.复杂请求:除了简单请求的其他情况
请求头origin字段为当前域
服务器:诶,你是谁,我来看看你的origin,嗯嗯,可以,符合我的要求,放行!顺便告诉你,老夫的规矩!
其中,最重要的就是Access-Control-Allow-Origin
,标识允许哪个域的请求。当然,如果服务器不通过,根本没有这个字段,接着触发XHR
的onerror
,再接着你就看到浏览器的提示xxx的服务器没有响应Access-Control-Allow-Origin字段
//指定允许其他域名访问
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法(*,指定域,动态设置),3是因为*不允许携带认证头和cookies
//是否允许后续请求携带认证信息(cookies),该值只能是true,否则不返回
'Access-Control-Allow-Credentials:true'
上面第一行说到的Access-Control-Allow-Origin
有多种设置方法:
- 设置
*
是最简单粗暴的,但是服务器出于安全考虑,肯定不会这么干,而且,如果是*的话,游览器将不会发送cookies
,即使你的XHR
设置了withCredentials
- 指定域,如上图中的
http://172.20.0.206
,一般的系统中间都有一个nginx
,所以推荐这种 - 动态设置为请求域,多人协作时,多个前端对接一个后台,这样很方便
withCredentials
:表示XHR
是否接收cookies和发送cookies,也就是说如果该值是false,响应头的Set-Cookie
,浏览器也不会理,并且即使有目标站点的cookies,浏览器也不会发送。
复杂请求:
最常见的情况,当我们使用put
和delete
请求时,浏览器会先发送option
(预检)请求,不过有时候,你会发现并没有,这是后面我们会讲到缓存。
预检请求
与简单请求不同的是,option请求多了2个字段:Access-Control-Request-Method
:该次请求的请求方式Access-Control-Request-Headers
:该次请求的自定义请求头字段
服务器检查通过后,做出响应:
//指定允许其他域名访问
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法(*,指定域,动态设置),3是因为*不允许携带认证头和cookies
//是否允许后续请求携带认证信息(cookies),该值只能是true,否则不返回
'Access-Control-Allow-Credentials:true'
//预检结果缓存时间,也就是上面说到的缓存啦
'Access-Control-Max-Age: 1800'
//允许的请求类型
'Access-Control-Allow-Methods:GET,POST,PUT,POST'
//允许的请求头字段
'Access-Control-Allow-Headers:x-requested-with,content-type'
这里有个注意点:Access-Control-Request-Method
,Access-Control-Request-Headers
返回的是满足服务器要求的所有请求方式,请求头,不限于该次请求.
问题所在:
1. 避免将Access-Control-Allow-Origin设置为null和*
2. 禁止直接反射HTTP请求头中的Origin字段值。对请求头Origin值做严格过滤、校验。具体来说,可以使用“全等于”判断,或使用严格的正则(如:^https://domain\.qq\$)进行判断。
设置 Access-Control-Allow-Origin 有多种方式,这里写两种
一. 微服务中整合springSecurity,
1.编写过滤器
package com.wf.config;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.core.Ordered;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;
import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@Order(Ordered.HIGHEST_PRECEDENCE)
@Component
@Slf4j
public class CORSFilter implements Filter {
@Value("${allow.origin.regex}") //apollo配置 ,允许跨域访问的主体
private String originRegex;
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest request, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", originRegex);
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
response.setHeader("Access-Control-Allow-Credentials", "true");
chain.doFilter(request, response);
}
public void destroy() {}
}
2.添加过滤器
package com.wf.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity security) throws Exception {
security.csrf().disable();
security.headers().frameOptions().disable();
//加入过滤器
security.addFilterBefore(new CORSFilter(), UsernamePasswordAuthenticationFilter.class);
}
}
2. nginx 配置
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers "X-Requested-With";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
}
如果同时配置服务器过滤器与nginx ,则会看到页面错误:
The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed
看上面错误提示,contains multiple values "*" 意思就是设置了2次跨域,但是只有一个是允许的,移除其中的任意一个就好了。如果服务器设置了允许跨域,使用Nginx代理里面就不需要了(或者就不用使用Nginx了)
更多推荐
跨域漏洞Response header配置 Access-Control-Allow-Origin
发布评论