Recover javascript source code from uglifyjs source map

Question

I am reverse engineering one magical script. I have an uglified source code and source map generated by uglifyjs.

Does anybody know any straightforward way how to achieve at least partly readable source code from that? I have found some obscure ways including conversions through multiple languages, but I hope something better exists.

Thank you!

Truth

I'm not aware of a tool that will reverse this off the top of my head. However if you load up the file in an HTML page in Chrome and open the dev tools it should be able to display the source code. If the obfuscated code doesn't have a reference to the source map you may need to add it yourself. – Bordiuk

If you have an "obscure way" and you only need to do this once, why don't you just do that? – Probative

How did you get the source map, without having run uglify yourself on the original source? Surely the original author would not provide it, having signalled their intentions by uglification. – Probative

Answer 1

There is an npm library called maximize that purports to do this, but I couldn't get it to work. I rewrote it as unsourcemap but I am not a Node JS developer, so I'm sure it's awful. Anyway, it was a pretty trivial application of the source-map npm package.

Once you go through all the rigamarole of installing node-js and nvm and whatnot, you can clone that repo and say:

npm install . -g
unsourcemap path/to/packed.js path/to/packed.js.map path/to/output-dir/

I don't want to maintain this thing, so if someone wants to improve it, please just fork it and point people to that. :-)

Enjoyable

SyntaxError: Unexpected token '(', "(()=>{var "... is not valid JSON – Bridgers

Answer 2

If the project is bundled using webpack / browserify, you can use Debundle package to do reverse engineering. Imho, the result will be either good or bad depending on some project.

And because it de-transpiles JS only (the uglifying webpack pipeline), so if you're using Vue SFC, the Debundle cannot produces your original .vue file, it's JS file instead.

Anw, in case of reading source code, if your web page doesn't hide the source map files, you can use Chrome DevTool > Source pannel to read the beautiful source easily:

Hassock

Answer 3

Check this simple NodeJS implementation: It takes the compiled file with embedded source map and parses it. It's easy to modify and feed only the map file.

const fs = require('fs');
const { SourceMapConsumer } = require("source-map");

fs.readFile('./example.js', 'utf8' , (err, data) => {
  if (err) return console.error(err);

  const sourceMapData = data.split('//# sourceMappingURL=data:application/json;base64,')[1];
  let buff = new Buffer.from(sourceMapData, 'base64');
  let rawSourceMap = buff.toString('ascii');

  const parsed = SourceMapConsumer(rawSourceMap);

  fs.writeFile('example.ts', parsed.sourcesContent, function (err) {
    if (err) return console.log(err);
  });
});

Robenarobenia

Just wanted to note, this is an npm package: npmjs.com/package/source-map – Playful

Answer 4

There are a few tools out that that can help with this. I've used http://www.cleancss.com/javascript-beautify/ and http://jsbeautifier.org/ before and had great results. If you do a quick search in Google for a JavaScript Beautifier, you will find lots of similar results. Hope this helps!

Blast

Thank you! But I know these tools pretty well. I need to obtain original variables names to get this code readable. – Truth