首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何还原前端代码

如何还原前端代码

原创
作者头像
小生观察室
发布2022-03-13 00:26:01
2.4K0
发布2022-03-13 00:26:01
举报
文章被收录于专栏:小生观察室小生观察室

前言

在渗透测试时,经常会遇到以js.map为后缀的文件

这是jQuery中的一个新功能,支持Source Map

非常多Webpack打包的站点都会存在js.map文件.

通过还原前端代码找到API,间接性获取未授权访问漏洞

什么是Source map

简单说,Source map就是一个信息文件,里面储存着位置信息。转换后的代码的每一个位置,所对应的转换前的位置。

有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码,这无疑给开发者带来了很大方便。

工具介绍

目前大多数人使用比较多的是以下两个

  • restore-source-tree
https://www.npmjs.com/package/restore-source-tree
  • shuji
https://github.com/paazmaya/shuji

这2个项目各有利弊,但并不是今天介绍的主角

今天要介绍的是

  • reverse-sourcemap
https://www.npmjs.com/package/reverse-sourcemap

虽然是几年前开发的项目但对文件和目录的还原与其他两个比较更加优秀,文件和目录都能全部还原出来。

  • restore-source-tree可以还原目录,但一些文件会出现还原不了的情况
  • shuji可以还原文件,但同名的文件会出现忽略且不保存的情况

安装reverse-sourcemap

  • 此处以Windows平台为例

去官网下载适合自己操作系统nodejs

https://nodejs.org/zh-cn/download/

运行并安装,选择Next

同意协议 选择Next

选择安装路径

继续Next

根据自身情况进行选择是否勾选,继续Next,并选择install进行安装

安装完成后执行以下语句,确认环境是否正常

C:\Users\小生观察室>npm -v
8.3.1

环境无异常之后开始安装reverse-sourcemap

C:\Users\小生观察室>npm install --global reverse-sourcemap

added 13 packages, and audited 14 packages in 2s

found 0 vulnerabilities
npm notice
npm notice New minor version of npm available! 8.3.1 -> 8.5.3
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.5.3
npm notice Run npm install -g npm@8.5.3 to update!

确认reverse-sourcemap是否异常

C:\Users\小生观察室>reverse-sourcemap -h
reverse-sourcemap - Reverse engineering JavaScript and CSS sources from sourcemaps
Usage: reverse-sourcemap [options] <file|directory>

  -h, --help               Help and usage instructions
  -V, --version            Version number
  -v, --verbose            Verbose output, will print which file is currently being processed
  -o, --output-dir String  Output directory - default: .
  -M, --match String       Regular expression for matching and filtering files - default: \.map$
  -r, --recursive          Recursively search matching files

Version 1.0.4

还原代码

C:\Users\小生观察室\>reverse-sourcemap -v Root-5712cd11ab11386d4a3e.js.map -o output
reverse-sourcemap - Reverse engineering JavaScript and CSS sources from sourcemaps
Going to process total of 1 files
Outputting to directory: C:\Users\小生观察室\output
Processing file Root-5712cd11ab11386d4a3e.js.map
All sources were included in the sourcemap
Writing to file C:\Users\小生观察室\output\webpack\src\scenes\Root\Root.tsx

还原后的最终效果

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
作者已关闭评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
    • 什么是Source map
    • 工具介绍
    • 安装reverse-sourcemap
    • 还原代码
    相关产品与服务
    网站渗透测试
    网站渗透测试(Website Penetration Test,WPT)是完全模拟黑客可能使用的攻击技术和漏洞发现技术,对目标系统的安全做深入的探测,发现系统最脆弱的环节。渗透测试和黑客入侵最大区别在于渗透测试是经过客户授权,采用可控制、非破坏性质的方法和手段发现目标和网络设备中存在弱点,帮助管理者知道自己网络所面临的问题,同时提供安全加固意见帮助客户提升系统的安全性。腾讯云网站渗透测试由腾讯安全实验室安全专家进行,我们提供黑盒、白盒、灰盒多种测试方案,更全面更深入的发现客户的潜在风险。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档