关于前端:Chrome-DevtoolsSources-中的webpackinternal-和-webpack-目录

题目不能超过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…

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据