解决Webpack Sourcemap 信息泄露漏洞

前情提要:
项目发布现场上线之后,扫描出一个Webpack Sourcemap信息泄露漏洞,网上搜索的方法都是需要修改webpack的配置文件,但是项目比较简单,是直接使用npm run build 来执行构建打包并没有webpack.config文件
在这里插入图片描述

现象

在这里插入图片描述

解决方案

1.找到项目的vue.config.js文件
2.添加如下配置

module.exports = {
    productionSourceMap: false,
}

npm run build打包

在这里插入图片描述

Webpack在构建过程中通常会创建Source Maps[^1],这是一种映射机制,用于调试时将编译后的代码(通常是.min.js这样的生产环境版本)与源代码关联起来。然而,当Source Map文件未妥善管理时,可能会导致安全风险,比如暴露敏感信息。 如果你遇到Webpack Source Map未能成功关联的情况,可能原因有: 1. **配置错误**:确保Webpack配置正确,是否启用了source map生成,以及输出路径设置正确。检查webpack.config.js中的output.sourceMap属性设置。 ```javascript module.exports = { // ... output: { filename: '[name].[chunkhash].js', path: path.resolve(__dirname, 'dist'), sourceMap: true, // 或者你想启用的source map类型,如 'inline-source-map' 或 'file' }, // ... }; ``` 2. **浏览器支持**:某些旧版浏览器不支持自动加载Source Map,需手动添加`<script>`标签来引入.map文件。 ```html <script src="app.js" integrity="sha384-/..." crossorigin="anonymous"></script> <script async src="app.js.map" integrity="sha384-/..."></script> ``` 3. **文件权限**:确保打包后的.js.map文件可访问,避免服务器防火墙限制或目录权限问题。 4. **泄露检测**:若怀疑存在泄露,使用反向Source Map工具(如reverse-sourcemap)检查是否存在异常。 ```bash reverse-sourcemap your-built-file.js > source-code.txt ``` 如果上述排查后还是无法成功关联,可能是Webpack配置存在问题或网络/文件系统问题,建议检查相关的日志和错误信息以获取更准确的解决方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值