(security): update webpack-dev-server to address cves (#1473)

* (security): update webpack & webpack-dev-server Signed-off-by: Daniel Rowe <[email protected]> * update changelog, fix types Signed-off-by: Daniel Rowe <[email protected]> * revert webpack-cli upgrade Signed-off-by: Daniel Rowe <[email protected]> * address breaking changes with webpack-cli upgrade Signed-off-by: Daniel Rowe <[email protected]> * update changelog Signed-off-by: Daniel Rowe <[email protected]> * revert change to main webpack release Signed-off-by: Daniel Rowe <[email protected]> --------- Signed-off-by: Daniel Rowe <[email protected]>
opensearch-project · Dec 12, 2024 · b2005bd · b2005bd
1 parent 147fd1c
commit b2005bd
Show file tree

Hide file tree

Showing 6 changed files with 819 additions and 572 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,10 @@
 ### Deprecations
 
 ### 🛡 Security
+- Update cross-spawn to address CVE ([#1469](https://github.com/opensearch-project/oui/pull/1469))
+- Update webpack and webpack-dev-server to address CVEs ([#1473](https://github.com/opensearch-project/oui/pull/1473))
+
+## [`1.18.0`](https://github.com/opensearch-project/oui/tree/1.18)
 
 
 ### 📈 Features/Enhancements
@@ -46,7 +50,6 @@
 
 
 ### 🛡 Security
-- Update cross-spawn to address CVE ([#1469](https://github.com/opensearch-project/oui/pull/1469))
 
 
 ## [`1.16.0`](https://github.com/opensearch-project/oui/tree/1.16)

diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "*.scss"
   ],
   "scripts": {
-    "start": "cross-env BABEL_MODULES=false webpack-dev-server --inline --hot --config=src-docs/webpack.config.js",
+    "start": "cross-env BABEL_MODULES=false webpack-dev-server --hot --config=src-docs/webpack.config.js",
     "test-docker": "node ./scripts/test-docker.js",
     "sync-docs": "node ./scripts/docs-sync.js",
     "build-docs": "cross-env BABEL_MODULES=false cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config=src-docs/webpack.config.js",
@@ -50,6 +50,7 @@
     "@babel/cli/chokidar/glob-parent": "^6.0.1",
     "@elastic/charts/**/d3-color": "^3.1.0",
     "@types/jest/**/ansi-regex": "^5.0.1",
+    "@types/ws": "8.5.4",
     "babel-plugin-add-module-exports/chokidar/glob-parent": "^6.0.1",
     "babel-plugin-inline-react-svg/**/ansi-regex": "^5.0.1",
     "babel-plugin-inline-react-svg/svgo/js-yaml": "^3.13.1",
@@ -78,9 +79,6 @@
     "sass-lint/merge": "^2.1.1",
     "start-server-and-test/**/minimist": "^1.2.6",
     "start-server-and-test/wait-on": "^7.1.0",
-    "webpack-dev-server/**/ansi-regex": "^5.0.1",
-    "webpack-dev-server/chokidar/glob-parent": "^6.0.1",
-    "webpack-dev-server/selfsigned": "^2.0.1",
     "webpack/**/chokidar/glob-parent": "^6.0.1",
     "webpack/terser-webpack-plugin/serialize-javascript": "^3.1.0",
     "yo/**/find-versions": "^4.0.0",
@@ -239,8 +237,8 @@
     "typescript": "4.6.4",
     "url-loader": "^4.1.0",
     "webpack": "npm:@amoo-miki/[email protected]",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.15.2",
     "yeoman-generator": "^5.8.0",
     "yo": "^4.3.1"
   },

diff --git a/scripts/compile-charts.js b/scripts/compile-charts.js
@@ -35,12 +35,8 @@ const dtsGenerator = require('dts-generator').default;
 
 function compileChartsBundle() {
   console.log('Building chart theme module...');
-  execSync(
-    'webpack src/themes/charts/themes.ts -o dist/oui_charts_theme.js --output-library-target="commonjs" --config=src/webpack.config.js',
-    {
-      stdio: 'inherit',
-    }
-  );
+  webpackCompile('oui_charts_theme.js');
+
   dtsGenerator({
     prefix: '',
     out: 'dist/oui_charts_theme.d.ts',
@@ -58,12 +54,8 @@ function compileChartsBundle() {
   });
 
   /* OUI -> EUI Aliases */
-  execSync(
-    'webpack src/themes/charts/themes.ts -o dist/eui_charts_theme.js --output-library-target="commonjs" --config=src/webpack.config.js',
-    {
-      stdio: 'inherit',
-    }
-  );
+  webpackCompile('eui_charts_theme.js');
+
   dtsGenerator({
     prefix: '',
     out: 'dist/eui_charts_theme.d.ts',
@@ -84,4 +76,17 @@ function compileChartsBundle() {
   console.log(chalk.green('✔ Finished chart theme module'));
 }
 
+function webpackCompile(outputFilename) {
+  execSync(
+    `webpack ${path.join(__dirname, '../src/themes/charts/themes.ts')} \
+        -o dist \
+        --config=src/webpack.config.js \
+        --env filename=${outputFilename} \
+        --env library-target=commonjs`,
+    {
+      stdio: 'inherit',
+    }
+  );
+}
+
 compileChartsBundle();
diff --git a/src-docs/webpack.config.js b/src-docs/webpack.config.js
@@ -10,6 +10,7 @@
  */
 
 const path = require('path');
+const { ProvidePlugin } = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const babelConfig = require('./.babelrc.js');
@@ -132,11 +133,13 @@ const webpackConfig = {
       failOnError: true,
     }),
 
-    // run TypeScript during webpack build
-    // new ForkTsCheckerWebpackPlugin({
-    //   typescript: { configFile: path.resolve(__dirname, '..', 'tsconfig.json') },
-    //   async: false, // makes errors more visible, but potentially less performant
-    // }),
+    new ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+    }),
+
+    new ProvidePlugin({
+      process: 'process/browser',
+    }),
   ],
 
   devServer: isDevelopment

diff --git a/src/webpack.config.js b/src/webpack.config.js
@@ -60,7 +60,7 @@ const terserPlugin = new TerserPlugin({
   sourceMap: true,
 });
 
-module.exports = {
+module.exports = (env) => ({
   mode: isProduction ? 'production' : 'development',
 
   devtool: isProduction ? 'source-map' : 'cheap-module-source-map',
@@ -73,7 +73,8 @@ module.exports = {
 
   output: {
     path: path.resolve(__dirname, '../dist'),
-    filename: `oui${isProduction ? '.min' : ''}.js`,
+    filename: env.filename || `oui${isProduction ? '.min' : ''}.js`,
+    libraryTarget: env['library-target'] || undefined,
   },
 
   resolve: {
@@ -115,4 +116,4 @@ module.exports = {
     minimizer: [terserPlugin],
     noEmitOnErrors: true,
   },
-};
+});