需求来源:
1、不想让用户在客户端看到源码。
2、应对安全扫描,给客户交付的项目.map被扫描出风险,确保交付。
在Web开发中,通常会使用Source Map文件(.map文件)来将压缩后的JavaScript或CSS代码映射回原始的开发代码,以方便调试和代码审查。但有时候我们不希望将.map文件暴露给最终用户,可以通过一些方法在前端上进行过滤:
- 服务器端配置:可以在服务器端进行配置,阻止 .map 文件被请求到客户端。可以通过在服务器配置文件中添加规则,例如使用nginx或Apache服务器,设置禁止访问 .map 文件。
- 构建工具配置:在项目构建时,可以在构建工具(如Webpack、Gulp等)中设置,不生成 .map 文件或将 .map 文件输出到特定的目录,而不暴露在公开的静态文件目录中。
- CDN 配置:如果你使用 CDN 来托管静态资源文件,可以在 CDN 上设置规则,不允许 .map 文件被暴露出来。
- 压缩打包工具配置:如果使用工具将代码压缩和打包,比如 UglifyJS、Terser 等,可以在配置中禁用生成 .map 文件。
- 删除或移除 .map 文件:在部署到生产环境之前,可以手动删除或移除 .map 文件,从而避免 .map 文件被公开访问。
通过以上方法,可以有效地过滤前端 .map 文件,确保敏感信息的安全性,同时保持代码的调试和审查功能。
如果你使用微前端开发,应用较多,或者是陈年老项目,不想重新打包,建议使用nginx 过滤实现。
将下面代码放置server 监听下面。
location ~* .+(js.map)$ {deny all;
}
例如:
server {listen 7777;server_name localhost;#charset koi8-r;#access_log logs/host.access.log main;location ~* .+(js.map)$ {deny all;}location ~ /(microapps|container|.project|project) {alias html/gab/$uri;}location / {# if ( $request_uri ~* .+(js.map)$ ) {# return 403;# }try_files $uri $uri/ index.html;root html/gab/;index index.html index.htm;}
}```