前端打包编译时代来临对漏洞挖掘的影响

一、什么是webpack

webpack用于编译JavaScript模块。关注javascript技术的同学一定知道，在CommonJS和ES6中，为了支持模块化，而引入了export/require/import这类东西，模块化可以降低开发的复杂度，用于支撑前端的复杂功能，但是模块化后，也带来了许多问题，比如老版本的浏览器不支持ES6/JSX语法，开发和线上不能保持一致，这就为WebPack类的自动化代码转换工具的出现提供了需求。

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss，TypeScript等)，并将其转换和打包为合适的格式供浏览器使用。按照官网的说法，webpack可以打包一切资源/图片/样式/依赖等等，webpack默认只支持js模块打包，对于其他文件就需要用loader解析器，比如在vue中，直观的效果就是使用webpack可以将使用的vue，css，图片等打包成一个js。

二、在漏洞挖掘过程中分析前端代码的重要性

随着前后端分离架构的大众化 ，越来越多的开发团队采用这种开发模式。前后端的交互越来越多是通过API完成，而不再依赖页面刷新，众多的后端的框架也把自己定位成一个API框架，如thinkphp5等。通过分析前端js代码，找到前后端交互的接口，对接口进行测试变得越来越重要，比如在某些没权限的场景下，我们无法完整显示页面，可以通过分析前端js中的ajax接口进行测试。

这里我就拿几个案例说说：

• 某次挖漏洞过程中，登陆后显示账号没有权限，页面显示403 forbiden，f12 sources 发现前端使用VUE框架，分析源码对一ajax接口进行测试发现存在越权。
• 某次挖漏洞过程中，通过分析前端js代码，发现存在一段代码，代码逻辑是在debugMode下，会setCookie，尝试使用该Cookie，成功进入后台并且是管理员权限。

三、VUE/REACT开发场景

在VUE/REACT开发场景下 ，前端开发会引入如模块化等诸多新特性，前端开发不再是几个简单的js文件，开发完成后会通过webpack等打包工具打包生成部署使用的js文件，但是如果我们直接分析该编译的js，很难看懂。比如我这个demo：

https://blog.donot.me/assets/demo/index.html，页面下的app.bundle.js反正我是看不懂写的是啥，这个js文件就是webpack打包后的结果，但是由于我是开启了source-map调试模式，如果你是用chrome浏览器打开的，打开devtools-sources，应该可以看到一个webpack://，这个就是chrome对source-map调试的支持，点开src目录下就可以看到js代码源文件。

四、webpack的几种调试模式

webpack目前支持很多种调试模式，每种模式的区别是编译后的代码和源码的映射方式不同，具体的体现是源码通过什么方式呈现，有的模式会生产一个.map文件，有的模式会通过注释，有的模式会使用DataUrl的方式。

webpack不仅支持这8种，而且它们还是可以任意组合上面的eval、inline、hidden关键字，就如文档所说，你可以设置souremap选项为cheap-module-inline-source-map。这里为啥要搞这么多模式我也不懂，nodejs作者也表示自己看不懂，但是作为一个研究安全问题的同学来说，我可以不关心具体使用了哪种模式，任何一种开启了source-map的情况下，chrome开发者工具会帮我们处理好，而我们只需要通过开发者工具下的webpack://查看即可。

五、前端也需要逆向工程

上面提到，在开启了source-map的情况下，可以直接分析原始代码，那如果没有开启，该怎么处理呢，除了webpack打包工具外，相信你还听过WebAssembly，WebAssembly是一个主要为了解决js的性能问题而诞生的，其运作方式与java类似，将高级语言编译成字节码然后在WebAssembly虚拟机中运行，支持编译成WebAssembly字节码的语言有AssemblyScript/C/C++/Rust/Golang等，有了WebAssembly，我们的浏览器将会同时加载和运行两种类型的代码——JavaScript和WebAssembly，这两种代码可以通过WebAssembly所提供的js api实现互相调用，可以认为WebAssembly模块是一个“高性能的JS函数” ，比如大家可能遇到需要在前端进行md5等加密签名功能的实现，就很适合使用WebAssembly来完成，这里很重要的问题是WebAssembly不是用来取代Javascript的。这里有一个简单的demo可以感受一下WebAssembly代码结构是什么样的WebAssembly_test_demo：

回到本节的主题，当前端使用Webpack打包，还很不幸未开启Source-map的情况下，以及WebAssembly场景下，当我们需要深入分析代码时，需要使用反编译工具，针对webpack打包，笔者发现了一个反编译工具，

https://www.npmjs.com/package/debundle，但是经过测试，反编译webpack打包的项目效果并不好，笔者并未成功反编译成功自己的demo项目，目前在这方面开源工具还是比较缺少的状态。如果有同学使用该工具比较成功的反编译了webpack打包项目欢迎交流。针对WebAssembly有比较成熟的工具包WABT工具包用于反编译，除了该工具包外，也有使用IDA插件进行反编译的方法FLARE脚本系列：使用idawasm IDA Pro插件逆向WebAssembly(Wasm)模块，由于 篇幅和主题限制，本文不再具体介绍这些工具的使用，感兴趣的读者可以自行尝试。

六、总结

随着前端开发的不断演进，越来越多的开发技术/开发框架诞生，了解他才能更好的去hack it。