题目不能超过64个无效字符
《[Chrome] Chrome Devtools – Sources 中的webpack-internal: // 和 webpack:// 目录》
近日有个前端我的项目在测试环境被检测出源码泄露危险,这个我的项目是vue2写的,vue-cli3作为脚手架。
看平安检测的报告,内容截图里,是Chrome Devtools – Sources上面有webpack-internal: //和 webpack://两个目录。在这两个目录下,间接点击文件,能够看到靠近源码的代码。
状况相似于下图
印象里测试环境编译配置没有手动开启sourceMap,编译产物里不应该存在sourceMap文件。起初去查看了下network,也的确没有sourceMap文件(如xxx.js.map之类的文件)呈现。
那么问题就出在webpack-internal: // 和 webpack:// 这两个目录。
本文先讲这两个文件夹是怎么来的。
被webpack打包之后的编译产物js/css文件中存在”sourceURL=webpack-internal:///xxx”字符串和”sourceMappingURL=xxx”字符串
webpack-internal://
缓存资源(这里是localhost) 中的js/css文件中,会有大量的”sourceURL=webpack-internal:///xxx”字符串(这个标识对应source中的 webpack-internal:// 目录)。
webpack://
缓存资源中的js/css文件中,也存在大量的”sourceMappingURL=xxx”字符串(这个标识对应source中的 webpack:// 目录)。
状况解析:
sourceURL和sourceMappingURL都是源代码与编译后代码之间的地位映射信息(dataURL),这些信息开发人员看着没啥用,是给浏览器用的。(.map后缀的文件也有雷同的作用)
浏览器能够利用sourceURL和sourceMappingURL提供的地位映射信息将压缩后的(可读性差的)js/css等文件,转换为可读性高的代码(相似于源码)显示在devtools – Sources下,从而便于开发人员进行debug。
总结:
webpack-internal:// 和webpack:// 目录,是浏览器遍历文件,解析解析dataURL信息(sourceURL和sourceMappingURL)后再逐个生成的。
完结。
同步更新到本人的语雀
https://www.yuque.com/diracke…