WebGIS加油站

# 网络安全-记录web漏洞修复

# 背景介绍

最近政府部门都在组织网络系统安全检测，我们公司开发的某一个系统前端也被检出了漏洞，需要解决一下

前端使用vue框架开发，使用nginx进行部署

# 漏洞

如图所示总共被扫描出了八个漏洞，其中两个中度危险

image-20220705000341135

# 解决问题

# CORS信任任意来源漏洞

# 危害

  1. 可能造成用户信息被窃取，攻击者可以构造其他站点，通过跨域资源访问的形式，读取用户在本站点上的任意信息；

  2. 攻击者可以通过一连串的跨域资源访问请求，伪造用户的身份私自操作本站点的内容。

# 修复

漏洞未修复前，请求响应如下

image-20220705001123067

这里是由于我nginx配置了允许跨域请求，默认nginx是不允许

错误配置如下

server {
        listen 8071 ;
        listen [::]:8071 ;

         server_name test; # 这里是网站的域名

        location / {
      add_header 'Access-Control-Allow-Origin' $http_origin;
      add_header 'Access-Control-Allow-Credentials' 'true';
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
      add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
      add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
      if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
      }
                root E:/data/vue/zrzy; # /vue/dist/ 打包后的dist目录
                try_files $uri $uri/ @router; # 指向下面的 @router否则会出现 404
                index index.html index.htm;
        }

        # 对应上面的 @router,主要Vue请求并不是真实路径，无法找到文件，需要重定向到 index.html 中，然后交给路由处理
        location @router {
            rewrite ^.*$ /index.html last;
         }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

修改配置如下

server {
        listen 8071 ;
        listen [::]:8071 ;
         server_name zrzyweb; # 这里是网站的域名
        location / {
                root E:/data/vue/zrzy; # /vue/dist/ 打包后的dist目录
                try_files $uri $uri/ @router; # 指向下面的 @router否则会出现 404
                index index.html index.htm;
        }

        # 对应上面的 @router,主要Vue请求并不是真实路径，无法找到文件，需要重定向到 index.html 中，然后交给路由处理
        location @router {
            rewrite ^.*$ /index.html last;
         }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

修改后如下

image-20220705003046490

# SourceMap文件泄露漏洞

# 危害

  1. 可能导致网站源代码泄露
  2. 可能导致敏感信息泄露
  3. 可能导致攻击者得到更多信息，扩大攻击者的攻击面

image-20220705002159882

# 解决

这是因为我们在vue打包的时候，没有关闭SourceMap，一般SourceMap是在开发的时候方便程序员调试。

这里我们修改一下项目中的vue.config.js配置即可，添加 productionSourceMap: false。

module.exports = {
    productionSourceMap: false,
    }
1
2
3

修改后如下，我们打包部署就看不见源码了，都是混淆过的

image-20220705003212285

# Host头注入漏洞

# 危害

Host 头指的是 HTTP Header 中的 Host 项，在开发 WEB 应用时，为了方便的获得网站域名，开发人员可能会直接使用该值带入到应用上下文中，如果该值可以被攻击者控制，且 web server 没有对 host header 进行校验，则在部分攻击场景下可能导致用户信息泄露、XSS 等。

image-20220705002924628

# 解决

在nginx的server中配置拦截策略，指定只有特定host才能访问

  set $flag 0;
    if ( $host = "192.168.1.249"){
       set $flag 1;
    }
    if ( $flag = 0){
       return 403;
    }
1
2
3
4
5
6
7

# HTTP响应头Server 泄露框架信息漏洞

image-20220705003519352

# 危害

  1. HTTP头部信息泄露，通常会导致网站的框架信息、编程语言、Web 容器等信息泄露

  2. 攻击者可以根据敏感信息对网站或服务器发起进一步攻击

# 解决

nginx的http中添加如下配置

 server_tokens off;
1

# 响应头漏洞

# 危害

Web 服务器对于 HTTP 请求的响应头中缺少 detail.header_name，这将导致浏览器提供的安全特性失效，更容易遭受 Web 前端黑客攻击的影响。

image-20220705003637768

# 解决

server中添加

        add_header X-Frame-Options DENY;
        add_header X-Content-Type-Options nosniff;
        add_header X-XSS-Protection 1;
1
2
3

image-20220705004058578

# OPTIONS方法漏洞

昨天（20220722）相关系统在网络安防测试中被监测出OPTIONS方法漏洞，吐槽一句这个漏洞在别人那都是低危漏洞，到“他们”这就变成中危漏洞了。。。，让人有点无语。

# 危害

如下所示

image-20220722152100840

# 解决

这个问题是由于我们的系统框架是前后分离的，前台使用VUE，这样前台请求后台接口时就会出现跨域问题。

浏览器在针对我们系统的这种请求方式“复杂跨域”会发送一个预检请求options。这样在请求是就会发送两次请求，第一次是options请求第二次是真实请求。为此我们后台开放了options请求允许访问，这就是这次漏洞的原因。

解决这个问题并不复杂，首先后台禁用options请求，这时前台的所有接口就会报跨域问题，然后对前台的请求方式进行修改，具体步骤如下：

# 后台禁用options请求

这里我们的后台用java开发，使用spring cloud gateway进行路由管理，我们只需要修改网关的过滤器即可，添加如下代码

    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);

        // 设置你要允许的网站域名，如果全允许则设为 *
        //config.addAllowedOrigin("http://localhost:4200");
        config.addAllowedOrigin("*");

        //自定义可选：Origin, X-Requested-With, Content-Type, Accept, Connection, User-Agent, Cookie,token
        //String allowHeaders = "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With, Authorization";
        config.addAllowedHeader("*");
        config.addExposedHeader("Authorization");

        //以下或者用config.addAllowedMethod("*"); 禁用了options以及put,deleted方法
        // config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        // config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        // config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");

        source.registerCorsConfiguration("/**", config);
        // return new CorsFilter(source);
        final FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        // 设置执行顺序优先级
        bean.setOrder(0);
        return bean;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# vue使用代理

这里我们解决的逻辑就简单了，报错是因为跨域，那我就对后台地址做代理，让它和前台在同一个域下就行

  • 配置vue.config.js，添加proxy代理，代理后台接口
module.exports = {
    productionSourceMap: false,
    devServer: {
        open: true,
        host: '0.0.0.0',
        port: 8081,
        https: false,
        hotOnly: false,
        proxy: {
            '/api': {
                target: 'http://192.168.1.1:8080',//请求地址
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '' //请求地址
                }
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  • 接口使用时配置如下
// 我们通过这个实例去发请求，把需要的配置配置给这个实例来处理
import axios from "axios";

const request = axios.create({
    baseURL: '/api', // 请求的基础路径
    timeout: 30000,
    // headers:{
    //     'Content-Type': 'application/json'
    // },
    // 定义后端返回的原始数据的处理
    // 参数 data 就是后端返回的原始数据（未经处理的 JSON 格式字符串）
    transformResponse: [function (data) {
        return data
    }]
})

// 导出请求方法
export {request}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# NGINX部署配置

上面配置是在开发环境生效的，使用NGINX进行部署的时候需要对后台的接口同样的做一下代理设置

配置如下：

server {
        listen 8204 ;
        listen [::]:8204 ;
        server_name linkageupdate_web; # 这里是网站的域名
                set $flag 0;
        if ( $host = "192.168.1.1"){
           set $flag 1;
        }
        if ( $flag = 0){
           return 403;
        }
        location / {
        if ($allow_cros = 0){
                return 403;
            }
        add_header X-Frame-Options DENY;
        add_header X-Content-Type-Options nosniff;
        add_header X-XSS-Protection 1;
		root D:/code/dist; #  打包后的dist目录
		try_files $uri $uri/ @router; # 指向下面的 @router否则会出现 404
		index index.html index.htm;
        }
     #  添加后台代理
     location /api/ {  
        proxy_set_header Host $host;  
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://192.168.1.1:8080/;
        }

        # 对应上面的 @router,主要Vue请求并不是真实路径，无法找到文件，需要重定向到 index.html 中，然后交给路由处理
        location @router {
            rewrite ^.*$ /index.html last;
         }
         
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
上次更新时间: 2024年2月14日星期三上午10点24分

←