基于webpack的场景解决

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

场景描述

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

技术背景

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

方案解决

  • 配置webpack的devtool字段,根据生产环境和开发环境。
    • 下述为vue.config.js中配置
javascript 复制代码
  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'
    }
  },

参考资料

相关推荐
z_y_j2299704385 分钟前
服务器中更新前端项目
服务器·前端
2301_7976042410 分钟前
d40: vue杂项问题
前端·javascript·vue.js
Mintopia34 分钟前
领域适配 AIGC:垂直行业 Web 应用的微调技术实践
前端·javascript·aigc
Mintopia38 分钟前
Next.js 内置后端能力扩展 —— 重定向与路由保护
前端·javascript·next.js
IT_陈寒1 小时前
Python 3.12 性能暴增50%!这5个新特性让老项目直接起飞
前端·人工智能·后端
excel1 小时前
JavaScript 中的对象池:复用对象的高效方案
前端
excel1 小时前
Vue实例挂载的过程中发生了什么
前端
琹箐1 小时前
Aupload + vuedraggable实现 上传的文件可以拖拽排序
前端·vue.js
前端 贾公子1 小时前
Vue.js props mutating:反模式如何被视为一种良好实践。
前端·javascript·vue.js
Filotimo_7 小时前
2.CSS3.(2).html
前端·css