Fix security vulnerability: Remove uglifyjs, use terser plugin (#327)

* Remove uglifyjs, use terser plugin

* fix css-loader config
This commit is contained in:
Mikhail Mikheev 2019-12-09 16:19:30 +04:00 committed by GitHub
parent 70fadd51ee
commit 8382907b80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 1767 additions and 1729 deletions

View File

@ -134,6 +134,7 @@ module.exports = {
loader: 'file-loader', loader: 'file-loader',
options: { options: {
name: 'img/[hash].[ext]', name: 'img/[hash].[ext]',
esModule: false
}, },
}, },
], ],

View File

@ -1,43 +1,44 @@
/*eslint-disable*/ /*eslint-disable*/
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
const autoprefixer = require('autoprefixer') .BundleAnalyzerPlugin
const cssmixins = require('postcss-mixins') const autoprefixer = require("autoprefixer")
const cssvars = require('postcss-simple-vars') const cssmixins = require("postcss-mixins")
const webpack = require('webpack') const cssvars = require("postcss-simple-vars")
const webpack = require("webpack")
const UglifyJSPlugin = require('uglifyjs-webpack-plugin') const TerserPlugin = require("terser-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin') const HtmlWebpackPlugin = require("html-webpack-plugin")
const ExtractTextPlugin = require('extract-text-webpack-plugin') const ExtractTextPlugin = require("extract-text-webpack-plugin")
const ManifestPlugin = require('webpack-manifest-plugin') const ManifestPlugin = require("webpack-manifest-plugin")
const MiniCssExtractPlugin = require('mini-css-extract-plugin') const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin') const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const url = require('url') const url = require("url")
const paths = require('./paths') const paths = require("./paths")
const getClientEnvironment = require('./env') const getClientEnvironment = require("./env")
const cssvariables = require(`${paths.appSrc}/theme/variables`) const cssvariables = require(`${paths.appSrc}/theme/variables`)
const postcssPlugins = [ const postcssPlugins = [
autoprefixer({ autoprefixer({
overrideBrowserslist: [ overrideBrowserslist: [
'>1%', ">1%",
'last 4 versions', "last 4 versions",
'Firefox ESR', "Firefox ESR",
'not ie < 9', // React doesn't support IE8 anyway "not ie < 9" // React doesn't support IE8 anyway
], ]
}), }),
cssmixins, cssmixins,
cssvars({ cssvars({
variables() { variables() {
return Object.assign({}, cssvariables) return Object.assign({}, cssvariables)
}, },
silent: true, silent: true
}), })
] ]
function ensureSlash(path, needsSlash) { function ensureSlash(path, needsSlash) {
const hasSlash = path.endsWith('/') const hasSlash = path.endsWith("/")
if (hasSlash && !needsSlash) { if (hasSlash && !needsSlash) {
return path.substr(path, path.length - 1) return path.substr(path, path.length - 1)
} else if (!hasSlash && needsSlash) { } else if (!hasSlash && needsSlash) {
@ -53,7 +54,7 @@ function ensureSlash(path, needsSlash) {
// like /todos/42/static/js/bundle.7289d.js. We have to know the root. // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
const homepagePath = require(paths.appPackageJson).homepage const homepagePath = require(paths.appPackageJson).homepage
// var homepagePathname = homepagePath ? url.parse(homepagePath).pathname : '/'; // var homepagePathname = homepagePath ? url.parse(homepagePath).pathname : '/';
const homepagePathname = '/' const homepagePathname = "/"
// Webpack uses `publicPath` to determine where the app is being served from. // Webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path. // It requires a trailing slash, or the file assets will get an incorrect path.
const publicPath = ensureSlash(homepagePathname, true) const publicPath = ensureSlash(homepagePathname, true)
@ -66,20 +67,20 @@ const env = getClientEnvironment(publicUrl)
// Assert this just to be safe. // Assert this just to be safe.
// Development builds of React are slow and not intended for production. // Development builds of React are slow and not intended for production.
if (env['process.env'].NODE_ENV !== '"production"') { if (env["process.env"].NODE_ENV !== '"production"') {
throw new Error('Production builds must have NODE_ENV=production.') throw new Error("Production builds must have NODE_ENV=production.")
} }
// This is the production configuration. // This is the production configuration.
// It compiles slowly and is focused on producing a fast and minimal bundle. // It compiles slowly and is focused on producing a fast and minimal bundle.
// The development configuration is different and lives in a separate file. // The development configuration is different and lives in a separate file.
module.exports = { module.exports = {
mode: 'production', mode: "production",
// Don't attempt to continue if there are any errors. // Don't attempt to continue if there are any errors.
bail: true, bail: true,
optimization: { optimization: {
splitChunks: { splitChunks: {
chunks: 'all', chunks: "all"
/* https://stackoverflow.com/questions/48985780/webpack-4-create-vendor-chunk /* https://stackoverflow.com/questions/48985780/webpack-4-create-vendor-chunk
cacheGroups: { cacheGroups: {
vendor: { vendor: {
@ -92,31 +93,55 @@ module.exports = {
}, },
*/ */
}, },
minimizer: [new OptimizeCSSAssetsPlugin({})], minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
parse: {
ecma: 8
},
compress: {
ecma: 5,
warnings: false,
comparisons: false,
inline: 2,
},
mangle: {
safari10: true
},
output: {
ecma: 5,
comments: false,
ascii_only: true
}
}
}),
new OptimizeCSSAssetsPlugin({})
]
}, },
entry: [require.resolve('./polyfills'), paths.appIndexJs], entry: [require.resolve("./polyfills"), paths.appIndexJs],
output: { output: {
// The build folder. // The build folder.
path: paths.appBuild, path: paths.appBuild,
// Generated JS file names (with nested folders). // Generated JS file names (with nested folders).
// There will be one main bundle, and one file per asynchronous chunk. // There will be one main bundle, and one file per asynchronous chunk.
// We don't currently advertise code splitting but Webpack supports it. // We don't currently advertise code splitting but Webpack supports it.
filename: 'static/js/[name].[chunkhash:8].js', filename: "static/js/[name].[chunkhash:8].js",
chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js', chunkFilename: "static/js/[name].[chunkhash:8].chunk.js",
// We inferred the "public path" (such as / or /my-project) from homepage. // We inferred the "public path" (such as / or /my-project) from homepage.
publicPath, publicPath
}, },
resolve: { resolve: {
modules: [paths.appSrc, 'node_modules', paths.appContracts], modules: [paths.appSrc, "node_modules", paths.appContracts],
// These are the reasonable defaults supported by the Node ecosystem. // These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support // We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see: // some tools, although we do not recommend using it, see:
// https://github.com/facebookincubator/create-react-app/issues/290 // https://github.com/facebookincubator/create-react-app/issues/290
extensions: ['.js', '.json', '.jsx'], extensions: [".js", ".json", ".jsx"],
alias: { alias: {
'~': paths.appSrc, "~": paths.appSrc,
'#': paths.appContracts, "#": paths.appContracts
}, }
}, },
module: { module: {
@ -125,43 +150,44 @@ module.exports = {
test: /\.(js|jsx)$/, test: /\.(js|jsx)$/,
include: paths.appSrc, include: paths.appSrc,
use: { use: {
loader: 'babel-loader', loader: "babel-loader"
}, }
}, },
{ {
test: /\.(scss|css)$/, test: /\.(scss|css)$/,
use: [ use: [
MiniCssExtractPlugin.loader, MiniCssExtractPlugin.loader,
{ {
loader: 'css-loader', loader: "css-loader",
options: { options: {
importLoaders: 1, importLoaders: 1,
modules: true, modules: true
}, }
}, },
{ {
loader: 'postcss-loader', loader: "postcss-loader",
options: { options: {
sourceMap: true, sourceMap: true,
plugins: postcssPlugins, plugins: postcssPlugins
}, }
}, }
], ]
}, },
{ test: /\.(woff|woff2)$/, loader: 'url-loader?limit=100000' }, { test: /\.(woff|woff2)$/, loader: "url-loader?limit=100000" },
{ {
test: /\.(jpe?g|png|svg)$/i, test: /\.(jpe?g|png|svg)$/i,
exclude: /node_modules/, exclude: /node_modules/,
use: [ use: [
{ {
loader: 'file-loader', loader: "file-loader",
options: { options: {
name: 'img/[hash].[ext]', name: "img/[hash].[ext]",
}, esModule: false
}, }
], }
}, ]
], }
]
}, },
plugins: [ plugins: [
// Generates an `index.html` file with the <script> injected. // Generates an `index.html` file with the <script> injected.
@ -178,8 +204,8 @@ module.exports = {
keepClosingSlash: true, keepClosingSlash: true,
minifyJS: true, minifyJS: true,
minifyCSS: true, minifyCSS: true,
minifyURLs: true, minifyURLs: true
}, }
}), }),
// Makes some environment variables available to the JS code, for example: // Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`. // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
@ -187,22 +213,22 @@ module.exports = {
// Otherwise React will be compiled in the very slow development mode. // Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env), new webpack.DefinePlugin(env),
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: 'static/css/[name].[hash:8].css', filename: "static/css/[name].[hash:8].css",
allChunks: 'static/css/[id].[hash:8].css', allChunks: "static/css/[id].[hash:8].css"
}), }),
// Generate a manifest file which contains a mapping of all asset filenames // Generate a manifest file which contains a mapping of all asset filenames
// to their corresponding output file so that tools can pick it up without // to their corresponding output file so that tools can pick it up without
// having to parse `index.html`. // having to parse `index.html`.
new ManifestPlugin({ new ManifestPlugin({
fileName: 'asset-manifest.json', fileName: "asset-manifest.json"
}), })
// new BundleAnalyzerPlugin() // new BundleAnalyzerPlugin()
], ],
// Some libraries import Node modules but don't use them in the browser. // Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works. // Tell Webpack to provide empty mocks for them so importing them works.
node: { node: {
fs: 'empty', fs: "empty",
net: 'empty', net: "empty",
tls: 'empty', tls: "empty"
}, }
} }

View File

@ -33,11 +33,11 @@
"dependencies": { "dependencies": {
"@gnosis.pm/safe-contracts": "1.0.0", "@gnosis.pm/safe-contracts": "1.0.0",
"@gnosis.pm/util-contracts": "2.0.4", "@gnosis.pm/util-contracts": "2.0.4",
"@material-ui/core": "4.7.0", "@material-ui/core": "4.7.2",
"@material-ui/icons": "4.5.1", "@material-ui/icons": "4.5.1",
"@portis/web3": "^2.0.0-beta.45", "@portis/web3": "^2.0.0-beta.45",
"@testing-library/jest-dom": "4.2.4", "@testing-library/jest-dom": "4.2.4",
"@toruslabs/torus-embed": "0.2.6", "@toruslabs/torus-embed": "0.2.9",
"@walletconnect/web3-provider": "^1.0.0-beta.37", "@walletconnect/web3-provider": "^1.0.0-beta.37",
"@welldone-software/why-did-you-render": "3.3.9", "@welldone-software/why-did-you-render": "3.3.9",
"axios": "0.19.0", "axios": "0.19.0",
@ -59,6 +59,7 @@
"react-dom": "16.12.0", "react-dom": "16.12.0",
"react-final-form": "6.3.3", "react-final-form": "6.3.3",
"react-final-form-listeners": "^1.0.2", "react-final-form-listeners": "^1.0.2",
"react-ga": "^2.7.0",
"react-hot-loader": "4.12.18", "react-hot-loader": "4.12.18",
"react-qr-reader": "^2.2.1", "react-qr-reader": "^2.2.1",
"react-redux": "7.1.3", "react-redux": "7.1.3",
@ -71,12 +72,11 @@
"reselect": "^4.0.0", "reselect": "^4.0.0",
"squarelink": "^1.1.3", "squarelink": "^1.1.3",
"web3": "1.2.4", "web3": "1.2.4",
"web3connect": "^1.0.0-beta.23", "web3connect": "^1.0.0-beta.23"
"react-ga": "^2.7.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "7.7.4", "@babel/cli": "7.7.5",
"@babel/core": "7.7.4", "@babel/core": "7.7.5",
"@babel/plugin-proposal-class-properties": "7.7.4", "@babel/plugin-proposal-class-properties": "7.7.4",
"@babel/plugin-proposal-decorators": "7.7.4", "@babel/plugin-proposal-decorators": "7.7.4",
"@babel/plugin-proposal-do-expressions": "7.7.4", "@babel/plugin-proposal-do-expressions": "7.7.4",
@ -88,7 +88,7 @@
"@babel/plugin-proposal-logical-assignment-operators": "7.7.4", "@babel/plugin-proposal-logical-assignment-operators": "7.7.4",
"@babel/plugin-proposal-nullish-coalescing-operator": "7.7.4", "@babel/plugin-proposal-nullish-coalescing-operator": "7.7.4",
"@babel/plugin-proposal-numeric-separator": "7.7.4", "@babel/plugin-proposal-numeric-separator": "7.7.4",
"@babel/plugin-proposal-optional-chaining": "7.7.4", "@babel/plugin-proposal-optional-chaining": "7.7.5",
"@babel/plugin-proposal-pipeline-operator": "7.7.4", "@babel/plugin-proposal-pipeline-operator": "7.7.4",
"@babel/plugin-proposal-throw-expressions": "7.7.4", "@babel/plugin-proposal-throw-expressions": "7.7.4",
"@babel/plugin-syntax-dynamic-import": "7.7.4", "@babel/plugin-syntax-dynamic-import": "7.7.4",
@ -96,16 +96,16 @@
"@babel/plugin-transform-member-expression-literals": "7.7.4", "@babel/plugin-transform-member-expression-literals": "7.7.4",
"@babel/plugin-transform-property-literals": "7.7.4", "@babel/plugin-transform-property-literals": "7.7.4",
"@babel/polyfill": "7.7.0", "@babel/polyfill": "7.7.0",
"@babel/preset-env": "7.7.4", "@babel/preset-env": "7.7.6",
"@babel/preset-flow": "7.7.4", "@babel/preset-flow": "7.7.4",
"@babel/preset-react": "7.7.4", "@babel/preset-react": "7.7.4",
"@sambego/storybook-state": "^1.3.6", "@sambego/storybook-state": "^1.3.6",
"@storybook/addon-actions": "5.2.6", "@storybook/addon-actions": "5.2.8",
"@storybook/addon-knobs": "5.2.6", "@storybook/addon-knobs": "5.2.8",
"@storybook/addon-links": "5.2.6", "@storybook/addon-links": "5.2.8",
"@storybook/react": "5.2.6", "@storybook/react": "5.2.8",
"@testing-library/react": "9.3.2", "@testing-library/react": "9.3.2",
"autoprefixer": "9.7.2", "autoprefixer": "9.7.3",
"babel-core": "^7.0.0-bridge.0", "babel-core": "^7.0.0-bridge.0",
"babel-eslint": "10.0.3", "babel-eslint": "10.0.3",
"babel-jest": "24.9.0", "babel-jest": "24.9.0",
@ -115,19 +115,19 @@
"babel-plugin-transform-es3-property-literals": "^6.22.0", "babel-plugin-transform-es3-property-literals": "^6.22.0",
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"css-loader": "3.2.0", "css-loader": "3.2.1",
"detect-port": "^1.3.0", "detect-port": "^1.3.0",
"eslint": "5.16.0", "eslint": "5.16.0",
"eslint-config-airbnb": "18.0.1", "eslint-config-airbnb": "18.0.1",
"eslint-plugin-flowtype": "4.5.2", "eslint-plugin-flowtype": "4.5.2",
"eslint-plugin-import": "2.18.2", "eslint-plugin-import": "2.19.1",
"eslint-plugin-jest": "23.0.4", "eslint-plugin-jest": "23.1.1",
"eslint-plugin-jsx-a11y": "6.2.3", "eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.16.0", "eslint-plugin-react": "7.17.0",
"ethereumjs-abi": "0.6.8", "ethereumjs-abi": "0.6.8",
"extract-text-webpack-plugin": "^4.0.0-beta.0", "extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "4.3.0", "file-loader": "5.0.2",
"flow-bin": "0.112.0", "flow-bin": "0.113.0",
"fs-extra": "8.1.0", "fs-extra": "8.1.0",
"html-loader": "^0.5.5", "html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
@ -143,12 +143,12 @@
"run-with-testrpc": "0.3.1", "run-with-testrpc": "0.3.1",
"storybook-host": "5.1.0", "storybook-host": "5.1.0",
"storybook-router": "^0.3.4", "storybook-router": "^0.3.4",
"style-loader": "1.0.0", "style-loader": "1.0.1",
"truffle": "5.1.1", "terser-webpack-plugin": "^2.2.2",
"truffle": "5.1.3",
"truffle-contract": "4.0.31", "truffle-contract": "4.0.31",
"truffle-solidity-loader": "0.1.32", "truffle-solidity-loader": "0.1.32",
"uglifyjs-webpack-plugin": "2.2.0", "url-loader": "3.0.0",
"url-loader": "2.3.0",
"webpack": "4.41.2", "webpack": "4.41.2",
"webpack-bundle-analyzer": "3.6.0", "webpack-bundle-analyzer": "3.6.0",
"webpack-cli": "3.3.10", "webpack-cli": "3.3.10",

3293
yarn.lock

File diff suppressed because it is too large Load Diff