基于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'
    }
  },

参考资料

相关推荐
真的想不出名儿36 分钟前
登录前验证码校验实现
java·前端·python
小高00736 分钟前
前端如何优雅地生成唯一标识?——一份跨环境 UUID 工具函数的封装与实战
前端·javascript·vue.js
云舟吖40 分钟前
Playwright的元素定位器
前端
我是日安41 分钟前
从零到一打造 Vue3 响应式系统 Day 24 - Watch:Options
前端·javascript·vue.js
吹晚风吧42 分钟前
什么是跨域?跨域怎么解决?跨域解决的是什么问题?
java·vue.js·js·cors
浅浅的学一下1 小时前
实现在富文本中直接Ctrl+C复制图片并自动上传,并支持HTML格式的图片的复制
前端
wifi歪f1 小时前
🎨 探究Function Calling 和 MCP 的奥秘
前端·ai编程·mcp
BrendanDash1 小时前
React 19.2 已发布,现已上线 npm!
前端·react.js
sheji34161 小时前
【开题答辩全过程】以 Web数据挖掘在电子商务中的应用研究为例,包含答辩的问题和答案
前端·人工智能·数据挖掘
whltaoin1 小时前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型