看到一篇 Source Map 泄露前端源码的文章，刚好最近水了个篇相关的文章发在内网，就也贴出来分享下吧。

---

0x00 前言

对 Web 安全有些了解的小伙伴可能知道 XSS 是现在最容易出现的漏洞，而它也是我们日常工作中遇到的最多的漏洞。“上古时代”我们用原生 JavaScript 或者 jQuery 写页面时要是忘了过滤用户输入，或是用错了转义函数，就会出现恼人的 XSS。不过现在前端技术百花齐放，Vue、React、Angular 等前端框架都默认帮助开发者转义了有潜在危险的数据，只要按照规范编码，一般是不会有 XSS 问题的。

那么用了这些现代前端框架，我们是否就能高枕无忧了呢？其实不然，前端框架的错误配置有时会产生更严重的后果。下面以安全研究人员的角度分析一下曾经遇到过的例子。

0x01 例子

这是一个对管理后台进行安全测试的任务，没有测试账号，没有说明文档，就一个登陆按钮，调用了 OpenID 进行权限验证。初一看感觉无从下手，不过打开 Chrome 的 DevTools，在 Sources 里发现了有趣的东西 —— backend.js。

仔细查看后发现这个 JS 文件里包含了所有后台操作的 API，试了几个提示无权访问。不过这么多 API 或许有漏网之鱼？于是用正则提取出全部的 API 链接，写脚本遍历访问一遍，幸运的是有部分 API 没有权限校验。

最后对这些可以未授权访问的 API 进行分析，收获颇丰：

产品信息泄露：

返回数据 Content-type 为 text/html 导致的 XSS：

根据 API 构造参数发现 SQL 注入：

看到这里或许有人会问，这种 JS 文件导致的内部 API 泄露以前不用前端框架的时候也有吧？确实这种问题很早之前就出现过，但是不用前端框架的时候我们可以根据权限按需加载 JS 文件，现在的情况却是很多使用现代前端框架的网站经常一股脑地把所有 JS 都加载了，为什么呢？

0x02 打包

为了方便管理静态资源，优化前端工作流程，现代前端框架都会使用一些构建工具，如 Grunt、Gulp、Webpack 等。以 Webpack 为例，它是一个模块打包器。根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

使用这些构建工具就意味着不特别处理的话，JS 文件就会被全部打包在一起，如果没有删除 Source Map，用浏览器自带的开发者工具就能轻松看到：

一旦出现这种问题，只需全局搜索发送网络请求的函数，如 $http、get()、post()、request() 等，很快就可以找到内部的 API。

0x03 危害

综上所述，不当的打包配置和权限控制可能存在的危害有：

• 后台敏感功能、逻辑泄露
• API 权限控制不当造成信息泄露
• API 权限控制不当造成越权操作
• SQL 注入
• XSS 等

0x04 解决办法

• 线上环境删除 Source Map
• 前端工程打包时配置按需加载
• 对于既有用户界面又有后台管理界面的应用，不要做成一个 SPA
• RESTful 接口权限验证，使用 JWT

0x05 参考

> - 谈谈我是如何获得知乎的前端源码的
> - AngularJS Security – Defend your single page application
> - AngularJS Security Guide
> - Angular都打包一个JS，还有安全性可言吗？
> - Webpack 按需加载