Updated dependencies

.github/workflows/master.yml

@@ -28,7 +28,7 @@ jobs:
     - name: Unit Tests
       run: |
         npm test
-        npx grunt testnodeconsumer
+        npm run testnodeconsumer
 
     - name: Production Build
       if: success()

.github/workflows/pull_requests.yml

@@ -27,7 +27,7 @@ jobs:
     - name: Unit Tests
       run: |
         npm test
-        npx grunt testnodeconsumer
+        npm run testnodeconsumer
 
     - name: Production Build
       if: success()

.github/workflows/releases.yml

@@ -28,7 +28,7 @@ jobs:
     - name: Unit Tests
       run: |
         npm test
-        npx grunt testnodeconsumer
+        npm run testnodeconsumer
 
     - name: Production Build
       if: success()

Gruntfile.js

@@ -200,50 +200,35 @@ module.exports = function (grunt) {
             web: webpackProdConf(),
         },
         "webpack-dev-server": {
-            options: {
-                webpack: webpackConfig,
-                host: "0.0.0.0",
-                port: grunt.option("port") || 8080,
-                disableHostCheck: true,
-                overlay: true,
-                inline: false,
-                clientLogLevel: "error",
-                stats: {
-                    children: false,
-                    chunks: false,
-                    modules: false,
-                    entrypoints: false,
-                    warningsFilter: [
-                        /source-map/,
-                        /dependency is an expression/,
-                        /export 'default'/,
-                        /Can't resolve 'sodium'/
-                    ],
-                }
-            },
+            options: webpackConfig,
             start: {
-                webpack: {
-                    mode: "development",
-                    target: "web",
-                    entry: Object.assign({
-                        main: "./src/web/index.js"
-                    }, moduleEntryPoints),
-                    resolve: {
-                        alias: {
-                            "./config/modules/OpModules.mjs": "./config/modules/Default.mjs"
-                        }
-                    },
-                    plugins: [
-                        new webpack.DefinePlugin(BUILD_CONSTANTS),
-                        new HtmlWebpackPlugin({
-                            filename: "index.html",
-                            template: "./src/web/html/index.html",
-                            chunks: ["main"],
-                            compileTime: compileTime,
-                            version: pkg.version,
-                        })
-                    ]
-                }
+                mode: "development",
+                target: "web",
+                entry: Object.assign({
+                    main: "./src/web/index.js"
+                }, moduleEntryPoints),
+                resolve: {
+                    alias: {
+                        "./config/modules/OpModules.mjs": "./config/modules/Default.mjs"
+                    }
+                },
+                devServer: {
+                    port: grunt.option("port") || 8080,
+                    client: {
+                        logging: "error",
+                        overlay: true
+                    }
+                },
+                plugins: [
+                    new webpack.DefinePlugin(BUILD_CONSTANTS),
+                    new HtmlWebpackPlugin({
+                        filename: "index.html",
+                        template: "./src/web/html/index.html",
+                        chunks: ["main"],
+                        compileTime: compileTime,
+                        version: pkg.version,
+                    })
+                ]
             }
         },
         zip: {

package.json

@@ -45,18 +45,16 @@
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/runtime": "^7.17.8",
-    "autoprefixer": "^10.3.1",
+    "autoprefixer": "^10.4.4",
     "babel-loader": "^8.2.4",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "chromedriver": "^99.0.0",
-    "cli-progress": "^3.9.0",
+    "cli-progress": "^3.10.0",
     "colors": "^1.4.0",
-    "copy-webpack-plugin": "^9.0.1",
+    "copy-webpack-plugin": "^10.2.4",
     "core-js": "^3.21.1",
-    "css-loader": "5.2.7",
-    "eslint": "^8.11.0",
-    "exports-loader": "^3.0.0",
-    "file-loader": "^6.2.0",
+    "css-loader": "6.7.1",
+    "eslint": "^8.12.0",
     "grunt": "^1.4.1",
     "grunt-chmod": "~1.1.1",
     "grunt-concurrent": "^3.0.0",
@@ -66,25 +64,23 @@
     "grunt-contrib-watch": "^1.1.0",
     "grunt-eslint": "^24.0.0",
     "grunt-exec": "~3.0.0",
-    "grunt-webpack": "^4.0.3",
+    "grunt-webpack": "^5.0.0",
     "grunt-zip": "^0.18.2",
-    "html-webpack-plugin": "^5.3.2",
-    "imports-loader": "^3.0.0",
-    "mini-css-extract-plugin": "1.3.7",
-    "nightwatch": "^1.7.8",
-    "postcss": "^8.3.6",
+    "html-webpack-plugin": "^5.5.0",
+    "imports-loader": "^3.1.1",
+    "mini-css-extract-plugin": "2.6.0",
+    "nightwatch": "^2.0.10",
+    "postcss": "^8.4.12",
     "postcss-css-variables": "^0.18.0",
-    "postcss-import": "^14.0.2",
-    "postcss-loader": "^6.1.1",
-    "prompt": "^1.1.0",
-    "sass-loader": "^12.1.0",
-    "sitemap": "^7.0.0",
-    "style-loader": "^3.2.1",
-    "svg-url-loader": "^7.1.1",
-    "url-loader": "^4.1.1",
+    "postcss-import": "^14.1.0",
+    "postcss-loader": "^6.2.1",
+    "prompt": "^1.2.2",
+    "sass-loader": "^12.6.0",
+    "sitemap": "^7.1.1",
+    "terser": "^5.12.1",
     "webpack": "^5.70.0",
-    "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-dev-server": "3.11.2",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-dev-server": "4.7.4",
     "webpack-node-externals": "^3.0.0",
     "worker-loader": "^3.0.8"
   },
@@ -94,22 +90,22 @@
     "avsc": "^5.7.3",
     "babel-plugin-transform-builtin-extend": "1.1.2",
     "bcryptjs": "^2.4.3",
-    "bignumber.js": "^9.0.1",
-    "blakejs": "^1.1.1",
-    "bootstrap": "4.6.0",
+    "bignumber.js": "^9.0.2",
+    "blakejs": "^1.2.1",
+    "bootstrap": "4.6.1",
     "bootstrap-colorpicker": "^3.4.0",
     "bootstrap-material-design": "^4.1.3",
     "browserify-zlib": "^0.2.0",
-    "bson": "^4.4.1",
+    "bson": "^4.6.2",
     "buffer": "^6.0.3",
-    "cbor": "5.0.1",
+    "cbor": "8.1.0",
     "chi-squared": "^1.1.0",
     "codepage": "^1.15.0",
     "crypto-api": "^0.8.5",
     "crypto-browserify": "^3.12.0",
     "crypto-js": "^4.1.1",
     "ctph.js": "0.0.5",
-    "d3": "6.5.0",
+    "d3": "7.3.0",
     "d3-hexbin": "^0.2.2",
     "diff": "^5.0.0",
     "es6-promisify": "^7.0.0",
@@ -119,7 +115,7 @@
     "file-saver": "^2.0.5",
     "flat": "^5.0.2",
     "geodesy": "1.1.3",
-    "highlight.js": "^11.2.0",
+    "highlight.js": "^11.5.0",
     "jimp": "^0.16.1",
     "jquery": "3.6.0",
     "js-crc": "^0.2.0",
@@ -128,18 +124,18 @@
     "jsonpath": "^1.1.1",
     "jsonwebtoken": "^8.5.1",
     "jsqr": "^1.4.0",
-    "jsrsasign": "^10.4.0",
+    "jsrsasign": "^10.5.14",
     "kbpgp": "2.1.15",
     "libbzip2-wasm": "0.0.4",
     "libyara-wasm": "^1.1.0",
     "lodash": "^4.17.21",
-    "loglevel": "^1.7.1",
+    "loglevel": "^1.8.0",
     "loglevel-message-prefix": "^3.0.0",
     "markdown-it": "^12.3.2",
     "moment": "^2.29.1",
-    "moment-timezone": "^0.5.33",
+    "moment-timezone": "^0.5.34",
     "ngeohash": "^0.6.3",
-    "node-forge": "^0.10.0",
+    "node-forge": "^1.3.0",
     "node-md6": "^0.1.0",
     "node-sass": "^7.0.1",
     "nodom": "^2.4.0",
@@ -153,13 +149,12 @@
     "qr-image": "^3.2.0",
     "scryptsy": "^2.1.0",
     "snackbarjs": "^1.1.0",
-    "sortablejs": "^1.14.0",
-    "split.js": "^1.6.4",
+    "sortablejs": "^1.15.0",
+    "split.js": "^1.6.5",
     "ssdeep.js": "0.0.3",
     "stream-browserify": "^3.0.0",
-    "terser": "^5.7.1",
     "tesseract.js": "2.1.5",
-    "ua-parser-js": "^0.7.28",
+    "ua-parser-js": "^1.0.2",
     "unorm": "^1.6.0",
     "utf8": "^3.0.0",
     "vkbeautify": "^0.99.3",
@@ -173,7 +168,7 @@
     "build": "npx grunt prod",
     "repl": "node --experimental-modules --experimental-json-modules --experimental-specifier-resolution=node --no-warnings src/node/repl.mjs",
     "test": "npx grunt configTests && node --experimental-modules --experimental-json-modules --no-warnings --no-deprecation tests/node/index.mjs && node --experimental-modules --experimental-json-modules --no-warnings --no-deprecation tests/operations/index.mjs",
-    "test-node-consumer": "npx grunt testnodeconsumer",
+    "testnodeconsumer": "npx grunt testnodeconsumer",
     "testui": "npx grunt testui",
     "testuidev": "npx nightwatch --env=dev",
     "lint": "npx grunt lint",

src/web/html/index.html

@@ -29,7 +29,7 @@
         <meta name="description" content="The Cyber Swiss Army Knife - a web app for encryption, encoding, compression and data analysis" />
         <meta name="keywords" content="base64, hex, decode, encode, encrypt, decrypt, compress, decompress, regex, regular expressions, hash, crypt, hexadecimal, user agent, url, certificate, x.509, parser, JSON, gzip,  md5, sha1, aes, des, blowfish, xor" />
 
-        <link rel="icon" type="image/ico" href="<%- require('../static/images/favicon.ico').default %>" />
+        <link rel="icon" type="image/ico" href="<%- require('../static/images/favicon.ico') %>" />
 
         <script type="application/javascript">
             "use strict";
@@ -197,7 +197,7 @@
                             </button>
 
                             <button type="button" class="mx-2 btn btn-lg btn-success btn-raised btn-block" id="bake">
-                                <img aria-hidden="true" src="<%- require('../static/images/cook_male-32x32.png').default %>" alt="Chef Icon"/>
+                                <img aria-hidden="true" src="<%- require('../static/images/cook_male-32x32.png') %>" alt="Chef Icon"/>
                                 <span>Bake!</span>
                             </button>
 
@@ -271,7 +271,7 @@
                                 <div class="file-overlay" id="file-overlay"></div>
                                 <div style="position: relative; height: 100%;">
                                     <div class="io-card card">
-                                        <img aria-hidden="true" src="<%- require('../static/images/file-128x128.png').default %>" alt="File icon" id="input-file-thumbnail"/>
+                                        <img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon" id="input-file-thumbnail"/>
                                         <div class="card-body">
                                             <button type="button" class="close" id="input-file-close">&times;</button>
                                             Name: <span id="input-file-name"></span><br>
@@ -346,12 +346,12 @@
                                 <div id="output-highlighter" class="no-select"></div>
                                 <div id="output-html"></div>
                                 <textarea id="output-text" readonly="readonly" spellcheck="false"></textarea>
-                                <img id="show-file-overlay" aria-hidden="true" src="<%- require('../static/images/file-32x32.png').default %>" alt="Show file overlay" title="Show file overlay"/>
+                                <img id="show-file-overlay" aria-hidden="true" src="<%- require('../static/images/file-32x32.png') %>" alt="Show file overlay" title="Show file overlay"/>
                                 <div id="output-file">
                                     <div class="file-overlay"></div>
                                     <div style="position: relative; height: 100%;">
                                         <div class="io-card card">
-                                            <img aria-hidden="true" src="<%- require('../static/images/file-128x128.png').default %>" alt="File icon"/>
+                                            <img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon"/>
                                             <div class="card-body">
                                                 Size: <span id="output-file-size"></span><br>
                                                 <button id="output-file-download" type="button" class="btn btn-primary btn-outline">Download</button>
@@ -626,7 +626,7 @@
                         <h5 class="modal-title">CyberChef - The Cyber Swiss Army Knife</h5>
                     </div>
                     <div class="modal-body">
-                        <img aria-hidden="true" class="about-img-left" src="<%- require('../static/images/cyberchef-128x128.png').default %>" alt="CyberChef Logo"/>
+                        <img aria-hidden="true" class="about-img-left" src="<%- require('../static/images/cyberchef-128x128.png') %>" alt="CyberChef Logo"/>
                         <p class="subtext">
                             Version <%=  htmlWebpackPlugin.options.version %><br>
                             Compile time: <%= htmlWebpackPlugin.options.compileTime %>
@@ -749,7 +749,7 @@
                         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                     </div>
                     <a href="https://github.com/gchq/CyberChef">
-                        <img aria-hidden="true" style="position: absolute; top: 0; right: 0; border: 0;" src="<%- require('../static/images/fork_me.png').default %>" alt="Fork me on GitHub">
+                        <img aria-hidden="true" style="position: absolute; top: 0; right: 0; border: 0;" src="<%- require('../static/images/fork_me.png') %>" alt="Fork me on GitHub">
                     </a>
                 </div>
             </div>

tests/browser/nightwatch.js

@@ -71,7 +71,7 @@ module.exports = {
             .moveToElement(toHex, 10, 10)
             .useCss()
             .waitForElementVisible(".popover-body", 1000)
-            .doubleClick();
+            .doubleClick("xpath", toHex);
 
         // Confirm that it has been added to the recipe
         browser
@@ -90,7 +90,7 @@ module.exports = {
         browser
             .useCss()
             .waitForElementNotVisible("#stale-indicator", 1000)
-            .expect.element("#output-text").to.have.value.that.equals("44 6f 6e 27 74 20 50 61 6e 69 63 2e");
+            .expect.element("#output-text").to.have.property("value").that.equals("44 6f 6e 27 74 20 50 61 6e 69 63 2e");
 
         // Clear recipe
         browser
@@ -202,11 +202,11 @@ module.exports = {
         browser
             .getLocationInView(genUUID)
             .moveToElement(genUUID, 10, 10)
-            .doubleClick()
+            .doubleClick("xpath", genUUID)
             .useCss()
             .waitForElementVisible(".operation .op-title", 1000)
             .waitForElementNotVisible("#stale-indicator", 1000)
-            .expect.element("#output-text").to.have.value.which.matches(/[\da-f-]{36}/);
+            .expect.element("#output-text").to.have.property("value").which.matches(/[\da-f-]{36}/);
 
         browser.click("#clr-recipe");
     },

tests/browser/ops.js

@@ -393,13 +393,13 @@ function testOp(browser, opName, input, output, args=[]) {
         .click("#clr-recipe")
         .click("#clr-io")
         .waitForElementNotPresent("#rec-list li.operation")
-        .expect.element("#input-text").to.have.value.that.equals("");
+        .expect.element("#input-text").to.have.property("value").that.equals("");
 
     browser
         .urlHash("recipe=" + recipeConfig)
         .setValue("#input-text", input)
         .waitForElementPresent("#rec-list li.operation")
-        .expect.element("#input-text").to.have.value.that.equals(input);
+        .expect.element("#input-text").to.have.property("value").that.equals(input);
 
     browser
         .waitForElementVisible("#stale-indicator", 5000)
@@ -410,8 +410,8 @@ function testOp(browser, opName, input, output, args=[]) {
         .waitForElementNotVisible("#output-loader", 5000);
 
     if (typeof output === "string") {
-        browser.expect.element("#output-text").to.have.value.that.equals(output);
+        browser.expect.element("#output-text").to.have.property("value").that.equals(output);
     } else if (output instanceof RegExp) {
-        browser.expect.element("#output-text").to.have.value.that.matches(output);
+        browser.expect.element("#output-text").to.have.property("value").that.matches(output);
     }
 }

tests/node/tests/operations.mjs

@@ -685,8 +685,8 @@ Arguments:
     it("Parse user agent", () => {
         const result = chef.parseUserAgent("Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0 ");
         const expected = `Browser
-    Name: Mozilla
-    Version: 5.0
+    Name: Firefox
+    Version: 47.0
 Device
     Model: unknown
     Type: unknown

webpack.config.js

@@ -36,7 +36,8 @@ const banner = `/**
 module.exports = {
     output: {
         publicPath: "",
-        globalObject: "this"
+        globalObject: "this",
+        assetModuleFilename: "assets/[hash][ext][query]"
     },
     plugins: [
         new webpack.ProvidePlugin({
@@ -122,7 +123,7 @@ module.exports = {
             },
             {
                 test: /prime.worker.min.js$/,
-                use: "raw-loader"
+                type: "asset/source"
             },
             {
                 test: /bootstrap-material-design/,
@@ -165,53 +166,33 @@ module.exports = {
                     "sass-loader",
                 ]
             },
-            /**
-             * The limit for these files has been increased to 60,000 (60KB)
-             * to ensure the material icons font is inlined.
-             *
-             * See: https://github.com/gchq/CyberChef/issues/612
-             */
             {
                 test: /\.(ico|eot|ttf|woff|woff2)$/,
-                loader: "url-loader",
-                options: {
-                    limit: 60000,
-                    name: "[hash].[ext]",
-                    outputPath: "assets"
-                }
+                type: "asset/resource",
             },
             {
                 test: /\.svg$/,
-                loader: "svg-url-loader",
-                options: {
-                    encoding: "base64"
-                }
+                type: "asset/inline",
             },
             { // Store font .fnt and .png files in a separate fonts folder
                 test: /(\.fnt$|bmfonts\/.+\.png$)/,
-                loader: "file-loader",
-                options: {
-                    name: "[name].[ext]",
-                    outputPath: "assets/fonts"
+                type: "asset/resource",
+                generator: {
+                    filename: "assets/fonts/[name][ext]"
                 }
             },
             { // First party images are saved as files to be cached
                 test: /\.(png|jpg|gif)$/,
                 exclude: /(node_modules|bmfonts)/,
-                loader: "file-loader",
-                options: {
-                    name: "images/[name].[ext]"
+                type: "asset/resource",
+                generator: {
+                    filename: "images/[name][ext]"
                 }
             },
             { // Third party images are inlined
                 test: /\.(png|jpg|gif)$/,
                 exclude: /web\/static/,
-                loader: "url-loader",
-                options: {
-                    limit: 10000,
-                    name: "[hash].[ext]",
-                    outputPath: "assets"
-                }
+                type: "asset/inline",
             },
         ]
     },
@@ -219,14 +200,15 @@ module.exports = {
         children: false,
         chunks: false,
         modules: false,
-        entrypoints: false,
-        warningsFilter: [
-            /source-map/,
-            /dependency is an expression/,
-            /export 'default'/,
-            /Can't resolve 'sodium'/
-        ],
+        entrypoints: false
     },
+    ignoreWarnings: [
+        /source-map/,
+        /source map/,
+        /dependency is an expression/,
+        /export 'default'/,
+        /Can't resolve 'sodium'/
+    ],
     performance: {
         hints: false
     }