基于webpack的场景解决

场景-已部署的项目在源代码面板处有webpack文件夹

场景描述

• 一个老项目测试时发现存在Webpack代码泄漏的安全漏洞，访问已部署的网站，打开源代码面板，可以看到webpack文件夹，内部含有接口文档等敏感信息。

  • 效果如下图。
    

• 现在需要删除该webpack文件夹。

技术背景

• webpack
  • 前端打包工具。
• source-map
  • 源码映射。
    • 记录了编译前后JavaScript代码之间的对应关系。
  • 需求
    • 运行在浏览器的代码是经过打包压缩的，与开发环境代码有区别，比如ES6可能转换为ES5。
      • 调试转换后代码时比较困难，而source-map可以辅助调试，可以将转换后的代码映射到原始的源文件，使得可以在调试工具中看到原始代码。
  • 使用
    • 可通过配置webpack的devtool选项控制source-map的生成。
• devtool配置

方案解决

• 配置webpack的devtool字段，根据生产环境和开发环境。
  • 下述为vue.config.js中配置

  configureWebpack: config => {
    config.resolve.extensions = ['.js', '.vue', '.json']
    if (process.env.NODE_ENV === 'production') {
      // 生产环境禁用source-map
      config.devtool = false
    } else {
      // 开发环境使用source-map（可选）
      config.devtool = 'source-map'
    }
  },

参考资料

• 第五节：Webpack中的Source-map详解及最佳实操配置 - Yaopengfei - 博客园
• https://www.javascriptcn.com/post/67973fad504e4ea9bde4fb9e