Generate 'reverse sourcemap' from unminified output, that can be used directly with the original minified bundle

[0xdevalias]

Another sourcemap related idea I had (which probably deserves it's own issue) is that it would be cool to be able to 'retroactively generate a sourcemap) for a webapp, based on the unminified output from wakaru; such that we could than take that sourcemap, and apply it to the original minified web app source for debugging the live app.

Originally posted by @0xdevalias in #34 (comment)

[pionxzh]

I can see the value of this. But jscodeshift does not support sourcemap, so we could not do anything about this.

[j4k0xb]

I experimented with this a while ago.
Here's a script to reverse it (babel/webcrack can generate sourcemaps of the transformations):
https://gist.github.com/j4k0xb/0d76d103db9696b515ce9c51c45b76b8

reverse-sourcemap.mp4

With some changes it should also be possible to make it work for modules of an unpacked bundles.

if there are sourcemaps available for that original module, then we could potentially extract the original function/variable/etc names from the names field of the sourcemap, and use them in a sort of 'smart-rename with sourcemap' type way.
Originally posted by @0xdevalias in #34 (comment)

Then you might as well get the original source code ^^ https://github.com/Anthonyzou/Sourcemap-Unpack

[0xdevalias]

But jscodeshift does not support sourcemap, so we could not do anything about this.

@pionxzh Oh wow.. really? recast definitely does, so I'm surprised jscodeshift doesn't!

• https://github.com/benjamn/recast#source-maps

This was the only issue I could find mentioning it, and while it was 'closed as completed', it didn't really suggest that it actually was implemented anywhere:

• [Request] sourcemap support facebook/jscodeshift#322

It also seems that @babel/generator has support for them:

• https://babeljs.io/docs/babel-generator

But I'm not sure if jscodeshift uses that when babel is used as the parser. This was the only issue I found related to @babel/parser and sourcemaps:

• parse() with inputSourceMap option babel/babel#11960
  • @babel/parser: read inputSourceMap babel/babel#12471

---

Then you might as well get the original source code ^^ Anthonyzou/Sourcemap-Unpack

@j4k0xb I was more thinking in the case of a common library such as React, bundled into the web app I'm reversing. I could go and manually look at React's source code/etc because it's open source. If the sourcemaps contain the full source I could also extract them from there.

But I'm sort of less interested in getting the original source code of the (likely open source anyway) bundled module, as I am in being able to identify all of the bits related to that lib and 'reduce the noise' in the rest of the code I'm actually trying to look at; while also enriching the 'downstream app' with proper names for any functions/etc exported from that common lib that might have been mangled in minification process.

[pionxzh]

I also saw that issue and assumed it's closed as wont fix. I have left a comment in facebook/jscodeshift#322 to check its status. But I'm afraid that there are still lebab, prettier running in the middle, and they don't support sourcemap.

lebab's rule can be re-implemented back into wakaru. prettier can be altered with other tools. Just sharing the information here first.

[pionxzh]

I just checked the implementation in jscodeshift, and it seems like it might be possible to generate the sourcemap via recast. jscodeshift is simply manipulating the recast node, so recast should be able to do its work.

But this would be low-priority for me; PRs are welcome if anyone is interested.
PR can ignore the part that I mentioned about lebab and prettier.

[0xdevalias]

But I'm afraid that there are still lebab, prettier running in the middle, and they don't support sourcemap.

@pionxzh It looks like at least part of lebab is also built on top of recast, so should hopefully be able to leverage it's sourcemap support that way:

• https://github.com/lebab/lebab/blob/master/src/Transformer.js#L1
• https://github.com/lebab/lebab/blob/master/src/transform/destructParam.js#L2

---

I just checked the implementation in jscodeshift, and it seems like it might be possible to generate the sourcemap via recast

@pionxzh Exciting!

---

But this would be low-priority for me; PRs are welcome if anyone is interested.
PR can ignore the part that I mentioned about lebab and prettier.

@pionxzh nods, totally understandable

[0xdevalias]

See also:

• Instead of rewriting the source, what about creating a sourcemap? jehna/humanify#182