惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

GbyAI
GbyAI
J
Java Code Geeks
雷峰网
雷峰网
WordPress大学
WordPress大学
宝玉的分享
宝玉的分享
云风的 BLOG
云风的 BLOG
V
Visual Studio Blog
V
Vulnerabilities – Threatpost
S
Securelist
The Hacker News
The Hacker News
The Register - Security
The Register - Security
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Help Net Security
Help Net Security
G
Google Developers Blog
Hugging Face - Blog
Hugging Face - Blog
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
M
MIT News - Artificial intelligence
AI
AI
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
The GitHub Blog
The GitHub Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Schneier on Security
Schneier on Security
N
Netflix TechBlog - Medium
T
The Blog of Author Tim Ferriss
Google DeepMind News
Google DeepMind News
Hacker News - Newest:
Hacker News - Newest: "LLM"
H
Hacker News: Front Page
博客园 - 司徒正美
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
B
Blog
Microsoft Azure Blog
Microsoft Azure Blog
大猫的无限游戏
大猫的无限游戏
Security Latest
Security Latest
Engineering at Meta
Engineering at Meta
N
News and Events Feed by Topic
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
酷 壳 – CoolShell
酷 壳 – CoolShell
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
T
Threat Research - Cisco Blogs
U
Unit 42
V
V2EX
V2EX - 技术
V2EX - 技术
L
LINUX DO - 最新话题
aimingoo的专栏
aimingoo的专栏
Microsoft Security Blog
Microsoft Security Blog
Recorded Future
Recorded Future
P
Privacy & Cybersecurity Law Blog
美团技术团队
小众软件
小众软件
F
Fortinet All Blogs

百里飞洋

【Art Design】一款精美的前端后台模板,出色的 Vite + TypeScript + Element Plus 的 Vue3 后台管理解决方案 坏消息,被DDoS攻击了;好消息,只被打了2分钟。 【开箱验机】只花 6277 拿下 i7-14650HX/RTX4060 笔记本?机械革命 耀世16Pro 安全下车! 我也中招了!大量简中博客站点被镜像,并翻译成了繁体中文 【GitHub】基于Actions和Pages实现项目的自动构建与部署 【Hexo博客】配置RSS插件,生成 Atom1.0 或 RSS2.0 摘要文件 【业务实践】探索 Excel 表数据的导入和导出功能的完整实现方案 【狄仁杰探案】修复Node.js后端图片上传接口漏洞 【浅谈】关于B站博主“食贫道”发布充电视频《迷失东京》后所引发的热议 【Hexo博客】添加友链朋友圈,纵览好友最新文章 【阿里云】对象存储 OSS 产品评测 【前端】常用加解密技术与使用方法 【蓝桥杯】第14届 Web 应用开发省赛真题解析 【蓝桥杯】第13届 Web 应用开发省赛真题解析
【webpack】如何解决Vue打包项目在浏览器开发者工具中显示源代码
百里飞洋 Barry-Flynn · 2023-11-11 · via 百里飞洋

AI总结:本篇博客主要讲述了作者在使用webpack打包Vue项目时,如何解决在浏览器开发者工具中显示源代码的问题。作者以诙谐幽默的语言,生动形象地描述了他在开发过程中遇到的问题和解决问题的过程,引人入胜,让人哭笑不得。作者首先发现了问题,然后通过控制台查看源代码,发现项目名和所有组件源码都被显示出来了。这让作者感到非常震惊,因为这直接暴露了源码,对于企业来说,这是一个非常大的安全隐患。因此,作者决定解决这个问题,以保护源代码的安全。

发现问题

最近在开发一个网站,怎么看怎么别扭,就是那种说不出的丑陋。于是我把字体从 微软雅黑 全站换成了华为的鸿蒙字体 HarmonyOS_Regular,啊~瞬间舒服了,果然是设计不够字体来凑。(其实苹果的苹方字体 PingFang SC 也不错,但是我只找到了鸿蒙字体的在线引用链接,好像是 B 站的在线资源哈哈)

正当我在控制台开心地把玩字体相关的 CSS,为我做的这个“英明神武”的决策沾沾自喜之时,将 Chrome 的开发者工具的面板切换到源代码/来源之后傻眼了:卧槽!怎么项目名和所有组件源码都显示出来了?而且各种入口文件、API接口文件的注释等等全部都毫无保留地能随意查看?!

2023-130 (1)

这是什么天大的玩笑,这与把别人内裤扒了有什么区别?还把别人裸照扔到大街上让人观赏,苍天呐,大地啊!

好了,言归正传,这件事绝对不容小觑,这已经不是安全隐患了,这是直接把源码甩别人脸上了,要是在企业里的话,竞争对手脸上都得乐开花。

分析问题

问题重大,话不宜迟,我开始思考为什么会显示源码。

这时我想到了 vue-cli 打包后,会在生成 js 文件的同时,生成很多同名的 .js.map 的文件,这种后缀的文件通常比其对应的 .js 文件体积大,好像是用来作为什么映射原的。

2023-130 (2)

经过求证[1-3],这个 .js.map 文件确实是涉嫌此案件的“罪魁祸首”!

什么是SourceMap?[4]

简单来说,Sourcemap 就是一个信息文件,它里面存储着代码转换前后的对应位置信息,也就是转换压缩后的代码所对应的转换前的源代码位置,是源代码和生产代码的映射, Sourcemap 解决了在打包过程中,代码经过压缩,去空格以及 babel 编译转化后,由于代码之间差异性过大,debug 困难的问题

大家的项目在开发完进行build后,在打包文件夹里除了有js,css,图片等资源,一定还见过 .js.map文件,这种就是sourcemap文件

比如一个经过 webpack 打包生成的 85.2018f4f0.js 文件,在它的最后一行可以看到如下记录:

1

它是什么?它是记录映射转换过后的代码和源代码之间的关系的同名 .js.map 啊,这样浏览器就可以顺藤摸瓜还原出 85.2018f4f0.js 文件打包前的样子了。

解决问题

那既然揪出了内鬼是 webpack 在通风报信,下面就需要好好“惩治”一下它这种行为了,咱们一起把它阉了!

首先要了解你的 vue-cli 脚手架的版本,在 CMD 中输入命令 vue -V ,注意 V 是大写,用于输出 version number:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Usage: vue <command> [options]

Options:
-V, --version output the version number
-h, --help display help for command

Commands:
create [options] <app-name> create a new project powered by vue-cli-service
add [options] <plugin> [pluginOptions] install a plugin and invoke its generator in an already created project
invoke [options] <plugin> [pluginOptions] invoke the generator of a plugin in an already created project
inspect [options] [paths...] inspect the webpack config in a project with vue-cli-service
serve alias of "npm run serve" in the current project
build alias of "npm run build" in the current project
ui [options] start and open the vue-cli ui
init [options] <template> <app-name> generate a project from a remote template (legacy API, requires
@vue/cli-init)
config [options] [value] inspect and modify the config
outdated [options] (experimental) check for outdated vue cli service / plugins
upgrade [options] [plugin-name] (experimental) upgrade vue cli service / plugins
migrate [options] [plugin-name] (experimental) run migrator for an already-installed cli plugin
info print debugging information about your environment
help [command] display help for command

Run vue <command> --help for detailed usage of given command.

比如我的 vue 脚手架版本号是:

1
2
E:\vue2_demo\dist\js>vue -V
@vue/cli 5.0.4

根据官网 Vue CLI 配置参考 所言,需要在配置文件 vue.config.js 中将 productionSourceMap 的值设置为 false,这样就可以不再生成生产环境的 source map,还可以加速生产环境的构建,也就是加快打包速度。参考代码如下(适用于Vue-cli3及以上版本):

1
2
3
4
5
6
7
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath: './',

productionSourceMap: false,
})

OK,现在再进行项目的打包 npm run build 重新生成 dist 目录,可以看到 dist/js 目录下已经不再生成 .js.map 文件了:

2023-130 (3)

部署到服务器后打开控制台,也看不到项目源码了:

2023-130 (4)

大功告成!如果还有问题的话,估计是你的 vue 脚手架版本太老了,好像 Vue-cli2 要修改配置的话需要这样添加 vue.config.js 配置:

1
2
3
4
5
module.exports = {
bulid: {
productionSourceMap: false
}
}

危机总结

总之吧,以前没注意过这种事情,或者以前以为只有本地开发的时候才能在控制台看见 webpack 打包前的源码。这次的发现也可能减少了一次未来可能发生的源码泄露事件,也算是因祸得福吧。

但是我可想吐槽一句为什么 SourceMap 这个玩意儿生产环境的默认配置不是关闭的呢,这太危险了吧!


【参考内容】

[1] vue项目控制台调试时显示源码的解决方法

[2] 解决Vue项目F12查看源代码问题

[3] 如何通过浏览器的开发者工具查看经过webpack打包后的Vue组件的源码?

[4] 聊一聊SourceMap - 知乎

[5] Vue-cli4x项目优化实践(关闭productionSourceMap)

[6] Vue CLI 配置参考(productionSourceMap)

[7] 记一次Vue源码泄露

[8] 前端源码泄露

[9] Sourcemap安全问题

[10] 挖洞思路:前端源码泄露漏洞并用source map文件还原