DEV Community

Cover image for Automated Sourcemap SourceContent Extraction by URL
Kerschbaumer Stefan
Kerschbaumer Stefan

Posted on

Automated Sourcemap SourceContent Extraction by URL

Today I wrote a nodeJs script called "pack-scraper".

What it does is walking through all script tags within the HTML body fetched from a provided url by the parameter "page" to check if there is any sourceMapUrl provided within any of the loaded Javascript files.

If pack-scraper finds any sourceMapUrls within the javascript files it will clone them to a local folder described by the parameter "outDir" and afterwards extracts the source files from this sourcemap files if available.

so, i.e we could serve a local angular app and execute:
"npm run cli outDir=example page=http://localhost:4200" to basically get the same sourcecode like the project contains if sourcemaps are enabled and the "sourceContent" array isn't empty.

Please note that this is a tool developed for analyzing.

You may wondering what happens with lazy loaded javascript files in Angular applications for example?

Those files are currently not automatically added to extraction, so if you wanna unpack them also you need to click through all routes in a i.e Angular page and finally provide the obtained script list to "additionalScripts" parameter seperated by a comma.

Since this scraper should basically be focused on Angular applications I am anyway planing on implementing a Class to analyze the mainbundle and finally its subbundles so it can extract paths and automate this process.

To get a list of available commands execute "npm run cli help" after cloning and running "npm i"
The sourcecode can be found here: https://github.com/xsip/pack-scraper

Alt Text

Top comments (0)