WAF跨域配置

为了保证web业务的安全性，在业务之前增加了WAF反向代理，由WAF回源到真实的业务server。此时真实server的前面是WAF。WAF作为反向代理客户端的请求首先到WAF，如果真实server业务里有跨域场景，而WAF没有满足相应的跨域配置，就会影响到业务导致部分功能不可用。

 

什么是跨域Cross-Origin Resource Sharing？

跨域是浏览器行为，不是waf也不是业务server问题。

CORS跨域资源共享是一个系统，它由一系列传输的http头组成，这些http头决定浏览器是否阻止前端代码获取跨域请求的响应。

同源安全策略默认阻止“跨域”获取资源。但是 CORS 给了web服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。

跨域资源共享CORS是一种机制，它使用指定的 http头来告诉浏览器让运行在一个 origin上的Web应用被准许访问来自不同源服务器上的指定的资源。

当一个资源从与该资源本身所在的服务器不同的域、协议、端口请求一个资源时，资源会发起一个跨域http请求。

1、浏览器访问前端服务页面访问路径test.com/static/html/test.html。
2、上面访问的静态资源中，存在Ajax异步请求访问一个第三方接口test666.com
3、这就是跨域限制！如果第三接口务允许源test.com做跨域访问。

 

第三方接口设置跨域：

response.addHeader("Access-Control-Allow-Origin", "*"); //*代表所有来源都可以跨域
response.addHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,DELETE");//可以跨域请求的方法
response.addHeader("Access-Control-Allow-Headers", "test,test666");//跨域请求时要带上必要的请求头

在客户端访问业务，请求到WAF并且访问的业务存在请求第三方接口，第三方接口又设置了跨域，WAF要满足第三方接口跨域要求，带上所要求的请求头等信息，才能实现跨域访问。

 

vue设置跨域问题：

当第三方接口前端设置axios.defaults.withCredentials = true时，要求在test.com/static/html/test.html静态页面请求test666.com时要求在请求头里带上cookie，Access-Control-Allow-Origin不能为 " * ",必须是你的test.com源地址。

也可以不配置Access-Control-Allow-Origin，设置Access-Control-Allow-Credentials为true来解决。

 

如果第三方接口设置axios.defaults.withCredentials = true，WAF端add_header设置Access-Control-Allow-Origin为*。就会报下面错误

Access to XMLHttpRequest at 'http://test666.com/data?test=666' from origin 'http://test.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

 

解决办法就是WAF add_header不配置Access-Control-Allow-Origin *，设置Access-Control-Allow-Credentials为true来解决。