标题不能超过64个有效字符《[Chrome] Chrome Devtools - Sources 中的webpack-internal: // 和 webpack:// 目录》最近在测试环境中检测到一个前端项目存在源码风险代码泄露。本项目是vue2编写的，使用vue-cli3作为脚手架。查看安全检测报告，在内容截图中，ChromeDevtools-Sources下有两个目录：webpack-internal://和webpack://。在这两个目录下，直接点击文件就可以看到贴近源码的代码。情况类似下图，测试环境的编译配置没有手动启用sourceMap，编译后的产品中应该不存在sourceMap文件。后来上网查了一下，确实没有sourceMap文件（比如xxx.js.map）。那么问题出在webpack-internal://和webpack://这两个目录。本文先说说这两个文件夹是怎么来的。webpack打包的编译后的js/css文件中webpack-internal://缓存资源（这里是localhost）中有"sourceURL=webpack-internal:///xxx"字符串和"sourceMappingURL=xxx"字符串在js/css中文件中，会有大量的“sourceURL=webpack-internal:///xxx”字符串（这个标识对应源码中的webpack-internal://目录）。webpack://缓存资源中的js/css文件中也有大量的“sourceMappingURL=xxx”字符串（这个标识对应source中的webpack://目录）。情况分析：sourceURL和sourceMappingURL是源代码和编译代码之间的位置映射信息（dataURL）。开发人员认为这些信息毫无用处，而且是针对浏览器的。（.map后缀的文件也有同样的作用）浏览器可以利用sourceURL和sourceMappingURL提供的位置映射信息，将压缩后（可读性差）的js/css等文件转换成可读性高的代码（类似于Sourcecode)显示在devtools-Sources下，方便开发者调试。总结：webpack-internal://和webpack://目录是浏览器遍历文件，解析dataURL信息（sourceURL和sourceMappingURL）后，一一生成的。结尾。同步更新到你的语雀https://www.yuque.com/diracke...
