9.7.10

Explicitly disable HTML rendering.
Updated description.

.eslintrc.json

@@ -43,6 +43,7 @@
 
         // stylistic conventions
         "brace-style": ["error", "1tbs"],
+        "space-before-blocks": ["error", "always"],
         "block-spacing": "error",
         "array-bracket-spacing": "error",
         "comma-spacing": "error",

.github/CONTRIBUTING.md

@@ -6,7 +6,7 @@ There are lots of opportunities to contribute to CyberChef. If you want ideas, t
 
 Before your contributions can be accepted, you must:
 
- - Sign the [GCHQ Contributor Licence Agreement](https://github.com/gchq/Gaffer/wiki/GCHQ-OSS-Contributor-License-Agreement-V1.0)
+ - Sign the [GCHQ Contributor Licence Agreement](https://cla-assistant.io/gchq/CyberChef)
  - Push your changes to your fork.
  - Submit a pull request.
 
@@ -25,9 +25,9 @@ Before your contributions can be accepted, you must:
 ## Design Principles
 
 1. If at all possible, all operations and features should be client-side and not rely on connections to an external server. This increases the utility of CyberChef on closed networks and in virtual machines that are not connected to the Internet. Calls to external APIs may be accepted if there is no other option, but not for critical components.
-2. Latency should be kept to a minimum to enhance the user experience. This means that all operation code should sit on the client, rather than being loaded dynamically from a server.
-3. Use Vanilla JS if at all possible to reduce the number of libraries required and relied upon. Frameworks like jQuery, although included, should not be used unless absolutely necessary.
-4. Minimise the use of large libraries, especially for niche operations that won't be used very often - these will be downloaded by everyone using the app, whether they use that operation or not (due to principal 2).
+2. Latency should be kept to a minimum to enhance the user experience. This means that operation code should sit on the client and be executed there. However, as a trade-off between latency and bandwidth, operation code with large dependencies can be loaded in discrete modules in order to reduce the size of the initial download. The downloading of additional modules must remain entirely transparent so that the user is not inconvenienced.
+3. Large libraries should be kept in separate modules so that they are not downloaded by everyone who uses the app, just those who specifically require the relevant operations.
+4. Use Vanilla JS if at all possible to reduce the number of libraries required and relied upon. Frameworks like jQuery, although included, should not be used unless absolutely necessary.
 
 
 With these principles in mind, any changes or additions to CyberChef should keep it:

.github/ISSUE_TEMPLATE/bug-report.md

@@ -0,0 +1,33 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: 'Bug report: <Insert title here>'
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behaviour or a link to the recipe / input used to cause the bug:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behaviour**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (if relevant, please complete the following information):**
+ - OS: [e.g. Windows] 
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -32,4 +32,3 @@ If applicable, add screenshots to help explain your problem.
 
 **Additional context**
 Add any other context about the problem here.
-

.github/ISSUE_TEMPLATE/feature_request.md

@@ -6,9 +6,9 @@ labels: feature
 assignees: ''
 
 ---
-<!-- Prefix the title above with 'Feature request:' -->
+
 **Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+A clear and concise description of what the problem is. E.g. I'm always frustrated when [...]
 
 **Describe the solution you'd like**
 A clear and concise description of what you want to happen.

.github/ISSUE_TEMPLATE/operation-request.md

@@ -7,8 +7,6 @@ assignees: ''
 
 ---
 
-<!-- Prefix the title above with 'Operation request:' -->
-
 ## Summary
 
 ### Example Input

.gitignore

@@ -2,12 +2,8 @@ node_modules
 npm-debug.log
 travis.log
 build
-docs/*
-!docs/*.conf.json
-!docs/*.ico
 .vscode
 .*.swp
-.DS_Store
 src/core/config/modules/*
 src/core/config/OperationConfig.json
 src/core/operations/index.mjs

.npmignore

@@ -3,6 +3,5 @@ npm-debug.log
 travis.log
 build/*
 !build/node
-docs
 .vscode
 .github

.travis.yml

@@ -11,10 +11,9 @@ before_script:
 script:
   - grunt lint
   - grunt test
-  - grunt docs
+  - grunt testnodeconsumer
   - grunt prod --msg="$COMPILE_MSG"
   - xvfb-run --server-args="-screen 0 1200x800x24" grunt testui
-  - grunt testnodeconsumer
 before_deploy:
   - grunt exec:sitemap
   - grunt copy:ghPages

CHANGELOG.md

@@ -2,11 +2,27 @@
 All major and minor version changes will be documented in this file. Details of patch-level version changes can be found in [commit messages](https://github.com/gchq/CyberChef/commits/master).
 
 
-### [9.2.0] - 2019-08-13
-- 'Defang IP Addresses' operation added [@h345983745] | [#556]
+### [9.7.0] - 2019-09-13
+- 'Optical Character Recognition' operation added [@MShwed] [@n1474335] | [#632]
 
-### [9.1.0] - 2019-08-13
+### [9.6.0] - 2019-09-04
+- 'Bacon Cipher Encode' and 'Bacon Cipher Decode' operations added [@kassi] | [#500]
+
+### [9.5.0] - 2019-09-04
+- Various Steganography operations added: 'Extract LSB', 'Extract RGBA', 'Randomize Colour Palette', and 'View Bit Plane' [@Ge0rg3] | [#625]
+
+### [9.4.0] - 2019-08-30
+- 'Render Markdown' operation added [@j433866] | [#627]
+
+### [9.3.0] - 2019-08-30
+- 'Show on map' operation added [@j433866] | [#477]
+
+### [9.2.0] - 2019-08-23
+- 'Parse UDP' operation added [@h345983745] | [#614]
+
+### [9.1.0] - 2019-08-22
 - 'Parse SSH Host Key' operation added [@j433866] | [#595]
+- 'Defang IP Addresses' operation added [@h345983745] | [#556]
 
 ## [9.0.0] - 2019-07-09
 - [Multiple inputs](https://github.com/gchq/CyberChef/wiki/Multiple-Inputs) are now supported in the main web UI, allowing you to upload and process multiple files at once [@j433866] | [#566]
@@ -14,6 +30,9 @@ All major and minor version changes will be documented in this file. Details of
 - A [read-eval-print loop (REPL)](https://github.com/gchq/CyberChef/wiki/Node-API#repl) is also included to enable prototyping and experimentation with the API [@d98762625] | [#291]
 - Light and dark Solarized themes added [@j433866] | [#566]
 
+<details>
+    <summary>Click to expand v8 minor versions</summary>
+    
 ### [8.38.0] - 2019-07-03
 - 'Streebog' and 'GOST hash' operations added [@MShwed] [@n1474335] | [#530]
 
@@ -135,6 +154,8 @@ All major and minor version changes will be documented in this file. Details of
 ### [8.1.0] - 2018-08-19
 - 'Dechunk HTTP response' operation added [@sevzero] | [#311]
 
+</details>
+
 ## [8.0.0] - 2018-08-05
 - Codebase rewritten using [ES modules](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/) and [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) [@n1474335] [@d98762625] [@artemisbot] [@picapi] | [#284]
 - Operation architecture restructured to make adding new operations a lot simpler [@n1474335] | [#284]
@@ -164,6 +185,11 @@ All major and minor version changes will be documented in this file. Details of
 
 
 
+[9.7.0]: https://github.com/gchq/CyberChef/releases/tag/v9.7.0
+[9.6.0]: https://github.com/gchq/CyberChef/releases/tag/v9.6.0
+[9.5.0]: https://github.com/gchq/CyberChef/releases/tag/v9.5.0
+[9.4.0]: https://github.com/gchq/CyberChef/releases/tag/v9.4.0
+[9.3.0]: https://github.com/gchq/CyberChef/releases/tag/v9.3.0
 [9.2.0]: https://github.com/gchq/CyberChef/releases/tag/v9.2.0
 [9.1.0]: https://github.com/gchq/CyberChef/releases/tag/v9.1.0
 [9.0.0]: https://github.com/gchq/CyberChef/releases/tag/v9.0.0
@@ -235,6 +261,7 @@ All major and minor version changes will be documented in this file. Details of
 [@masq]: https://github.com/masq
 [@Ge0rg3]: https://github.com/Ge0rg3
 [@MShwed]: https://github.com/MShwed
+[@kassi]: https://github.com/kassi
 
 [#95]: https://github.com/gchq/CyberChef/pull/299
 [#173]: https://github.com/gchq/CyberChef/pull/173
@@ -273,8 +300,10 @@ All major and minor version changes will be documented in this file. Details of
 [#467]: https://github.com/gchq/CyberChef/pull/467
 [#468]: https://github.com/gchq/CyberChef/pull/468
 [#476]: https://github.com/gchq/CyberChef/pull/476
+[#477]: https://github.com/gchq/CyberChef/pull/477
 [#489]: https://github.com/gchq/CyberChef/pull/489
 [#496]: https://github.com/gchq/CyberChef/pull/496
+[#500]: https://github.com/gchq/CyberChef/pull/500
 [#506]: https://github.com/gchq/CyberChef/pull/506
 [#515]: https://github.com/gchq/CyberChef/pull/515
 [#516]: https://github.com/gchq/CyberChef/pull/516
@@ -289,3 +318,7 @@ All major and minor version changes will be documented in this file. Details of
 [#585]: https://github.com/gchq/CyberChef/pull/585
 [#591]: https://github.com/gchq/CyberChef/pull/591
 [#595]: https://github.com/gchq/CyberChef/pull/595
+[#614]: https://github.com/gchq/CyberChef/pull/614
+[#625]: https://github.com/gchq/CyberChef/pull/625
+[#627]: https://github.com/gchq/CyberChef/pull/627
+[#632]: https://github.com/gchq/CyberChef/pull/632

Gruntfile.js

@@ -52,17 +52,10 @@ module.exports = function (grunt) {
         "A task which checks whether consuming CJS and ESM apps work with the CyberChef build",
         ["exec:setupNodeConsumers", "exec:testCJSNodeConsumer", "exec:testESMNodeConsumer", "exec:testESMDeepImportNodeConsumer", "exec:teardownNodeConsumers"]);
 
-    grunt.registerTask("docs",
-        "Compiles documentation in the /docs directory.",
-        ["clean:docs", "jsdoc", "chmod:docs"]);
-
-
     grunt.registerTask("default",
         "Lints the code base",
         ["eslint", "exec:repoSize"]);
 
-
-    grunt.registerTask("doc", "docs");
     grunt.registerTask("tests", "test");
     grunt.registerTask("lint", "eslint");
 
@@ -70,7 +63,6 @@ module.exports = function (grunt) {
     // Load tasks provided by each plugin
     grunt.loadNpmTasks("grunt-eslint");
     grunt.loadNpmTasks("grunt-webpack");
-    grunt.loadNpmTasks("grunt-jsdoc");
     grunt.loadNpmTasks("grunt-contrib-clean");
     grunt.loadNpmTasks("grunt-contrib-copy");
     grunt.loadNpmTasks("grunt-contrib-watch");
@@ -117,7 +109,6 @@ module.exports = function (grunt) {
             node: ["build/node/*"],
             config: ["src/core/config/OperationConfig.json", "src/core/config/modules/*", "src/code/operations/index.mjs"],
             nodeConfig: ["src/node/index.mjs", "src/node/config/OperationConfig.json"],
-            docs: ["docs/*", "!docs/*.conf.json", "!docs/*.ico", "!docs/*.png"],
             standalone: ["build/prod/CyberChef*.html"]
         },
         eslint: {
@@ -130,22 +121,6 @@ module.exports = function (grunt) {
             node: ["src/node/**/*.{js,mjs}"],
             tests: ["tests/**/*.{js,mjs}"],
         },
-        jsdoc: {
-            options: {
-                destination: "docs",
-                template: "node_modules/ink-docstrap/template",
-                recurse: true,
-                readme: "./README.md",
-                configure: "docs/jsdoc.conf.json"
-            },
-            all: {
-                src: [
-                    "src/**/*.js",
-                    "src/**/*.mjs",
-                    "!src/core/vendor/**/*"
-                ],
-            }
-        },
         accessibility: {
             options: {
                 accessibilityLevel: "WCAG2A",
@@ -165,8 +140,7 @@ module.exports = function (grunt) {
                     mode: "production",
                     target: "web",
                     entry: Object.assign({
-                        main: "./src/web/index.js",
-                        sitemap: "./src/web/static/sitemap.js"
+                        main: "./src/web/index.js"
                     }, moduleEntryPoints),
                     output: {
                         path: __dirname + "/build/prod",
@@ -257,7 +231,6 @@ module.exports = function (grunt) {
                     "build/prod/**/*",
                     "!build/prod/index.html",
                     "!build/prod/BundleAnalyzerReport.html",
-                    "!build/prod/sitemap.js"
                 ],
                 dest: `build/prod/CyberChef_v${pkg.version}.zip`
             }
@@ -295,12 +268,7 @@ module.exports = function (grunt) {
                     {
                         src: "build/prod/index.html",
                         dest: "build/prod/index.html"
-                    },
-                    {
-                        expand: true,
-                        src: "docs/**",
-                        dest: "build/prod/"
-                    },
+                    }
                 ]
             },
             standalone: {
@@ -332,12 +300,6 @@ module.exports = function (grunt) {
                     mode: "755",
                 },
                 src: ["build/**/*", "build/"]
-            },
-            docs: {
-                options: {
-                    mode: "755",
-                },
-                src: ["docs/**/*", "docs/"]
             }
         },
         watch: {
@@ -364,7 +326,7 @@ module.exports = function (grunt) {
                 command: "git gc --prune=now --aggressive"
             },
             sitemap: {
-                command: "node build/prod/sitemap.js > build/prod/sitemap.xml"
+                command: "node --experimental-modules --no-warnings --no-deprecation src/web/static/sitemap.mjs > build/prod/sitemap.xml"
             },
             generateConfig: {
                 command: [

README.md

@@ -3,7 +3,6 @@
 [![Build Status](https://travis-ci.org/gchq/CyberChef.svg?branch=master)](https://travis-ci.org/gchq/CyberChef)
 [![dependencies Status](https://david-dm.org/gchq/CyberChef/status.svg)](https://david-dm.org/gchq/CyberChef)
 [![npm](https://img.shields.io/npm/v/cyberchef.svg)](https://www.npmjs.com/package/cyberchef)
-![](https://reposs.herokuapp.com/?path=gchq/CyberChef&color=blue)
 [![](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/gchq/CyberChef/blob/master/LICENSE)
 [![Gitter](https://badges.gitter.im/gchq/CyberChef.svg)](https://gitter.im/gchq/CyberChef?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 
@@ -77,9 +76,9 @@ You can use as many operations as you like in simple or complex ways. Some examp
 
 CyberChef is built to support
 
- - Google Chrome 40+
- - Mozilla Firefox 35+
- - Microsoft Edge 14+
+ - Google Chrome 50+
+ - Mozilla Firefox 38+
+
 
 ## Node.js support
 

SECURITY.md

@@ -0,0 +1,26 @@
+# Security Policy
+
+## Supported Versions
+
+CyberChef is supported on a best endeavours basis. Patches will be applied to
+the latest version rather than retroactively to older versions. To ensure you
+are using the most secure version of CyberChef, please make sure you have the
+[latest release](https://github.com/gchq/CyberChef/releases/latest). The
+official [live demo](https://gchq.github.io/CyberChef/) is always up to date.
+
+## Reporting a Vulnerability
+
+In most scenarios, the most appropriate way to report a vulnerability is to
+[raise a new issue](https://github.com/gchq/CyberChef/issues/new/choose)
+describing the problem in as much detail as possible, ideally with examples.
+This will obviously be public. If you feel that the vulnerability is
+significant enough to warrant a private disclosure, please email
+[oss@gchq.gov.uk](mailto:oss@gchq.gov.uk) and
+[n1474335@gmail.com](mailto:n1474335@gmail.com).
+
+Disclosures of vulnerabilities in CyberChef are always welcomed. Whilst we aim
+to write clean and secure code free from bugs, we recognise that this is an open
+source project written by analysts in their spare time, relying on dozens of
+open source libraries that are modified and updated on a regular basis. We hope
+that the community will continue to support us as we endeavour to maintain and
+develop this tool together.

docs/jsdoc.conf.json

@@ -1,32 +0,0 @@
-{
-    "tags": {
-        "allowUnknownTags": true
-    },
-    "plugins": [
-        "plugins/markdown",
-        "node_modules/jsdoc-babel"
-    ],
-    "templates": {
-        "systemName": "CyberChef",
-        "footer": "",
-        "copyright": "© Crown Copyright 2017",
-        "navType": "inline",
-        "theme": "cerulean",
-        "linenums": true,
-        "collapseSymbols": false,
-        "inverseNav": true,
-        "outputSourceFiles": true,
-        "outputSourcePath": true,
-        "dateFormat": "ddd MMM Do YYYY",
-        "sort": false,
-        "logoFile": "cyberchef-32x32.png",
-        "cleverLinks": false,
-        "monospaceLinks": false,
-        "protocol": "html://",
-        "methodHeadingReturns": false
-    },
-    "markdown": {
-        "parser": "gfm",
-        "hardwrap": true
-    }
-}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cyberchef",
-  "version": "9.0.8",
+  "version": "9.7.10",
   "description": "The Cyber Swiss Army Knife for encryption, encoding, compression and data analysis.",
   "author": "n1474335 <n1474335@gmail.com>",
   "homepage": "https://gchq.github.io/CyberChef",
@@ -31,25 +31,25 @@
   "module": "src/node/index.mjs",
   "bugs": "https://github.com/gchq/CyberChef/issues",
   "browserslist": [
-    "Chrome >= 40",
-    "Firefox >= 35",
-    "Edge >= 14",
-    "node >= 6.5"
+    "Chrome >= 50",
+    "Firefox >= 38",
+    "node >= 10"
   ],
   "devDependencies": {
-    "@babel/core": "^7.5.0",
-    "@babel/plugin-transform-runtime": "^7.5.0",
-    "@babel/preset-env": "^7.5.0",
-    "autoprefixer": "^9.6.0",
-    "babel-eslint": "^10.0.2",
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-transform-runtime": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "autoprefixer": "^9.6.1",
+    "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
-    "babel-plugin-dynamic-import-node": "^2.2.0",
-    "chromedriver": "^75.0.1",
+    "babel-plugin-dynamic-import-node": "^2.3.0",
+    "chromedriver": "^76.0.1",
     "colors": "^1.3.3",
-    "css-loader": "^3.0.0",
-    "eslint": "^6.0.1",
+    "copy-webpack-plugin": "^5.0.4",
+    "css-loader": "^3.2.0",
+    "eslint": "^6.2.2",
     "exports-loader": "^0.7.0",
-    "file-loader": "^4.0.0",
+    "file-loader": "^4.2.0",
     "grunt": "^1.0.4",
     "grunt-accessibility": "~6.0.0",
     "grunt-chmod": "~1.1.1",
@@ -60,34 +60,31 @@
     "grunt-contrib-watch": "^1.1.0",
     "grunt-eslint": "^22.0.0",
     "grunt-exec": "~3.0.0",
-    "grunt-jsdoc": "^2.4.0",
     "grunt-webpack": "^3.1.3",
     "grunt-zip": "^0.18.2",
     "html-webpack-plugin": "^3.2.0",
     "imports-loader": "^0.8.0",
-    "ink-docstrap": "^1.3.2",
-    "jsdoc-babel": "^0.5.0",
-    "mini-css-extract-plugin": "^0.7.0",
-    "nightwatch": "^1.1.13",
+    "mini-css-extract-plugin": "^0.8.0",
+    "nightwatch": "^1.2.1",
     "node-sass": "^4.12.0",
     "postcss-css-variables": "^0.13.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "prompt": "^1.0.0",
-    "sass-loader": "^7.1.0",
-    "sitemap": "^3.2.0",
-    "style-loader": "^0.23.1",
-    "svg-url-loader": "^3.0.0",
-    "url-loader": "^2.0.1",
-    "webpack": "^4.35.2",
-    "webpack-bundle-analyzer": "^3.3.2",
-    "webpack-dev-server": "^3.7.2",
+    "sass-loader": "^8.0.0",
+    "sitemap": "^4.1.1",
+    "style-loader": "^1.0.0",
+    "svg-url-loader": "^3.0.1",
+    "url-loader": "^2.1.0",
+    "webpack": "^4.39.3",
+    "webpack-bundle-analyzer": "^3.4.1",
+    "webpack-dev-server": "^3.8.0",
     "webpack-node-externals": "^1.7.2",
     "worker-loader": "^2.0.0"
   },
   "dependencies": {
     "@babel/polyfill": "^7.4.4",
-    "@babel/runtime": "^7.5.0",
+    "@babel/runtime": "^7.5.5",
     "arrive": "^2.4.1",
     "babel-plugin-transform-builtin-extend": "1.1.2",
     "bcryptjs": "^2.4.3",
@@ -99,22 +96,22 @@
     "bson": "^4.0.2",
     "chi-squared": "^1.1.0",
     "clippyjs": "0.0.3",
-    "core-js": "^3.1.4",
-    "crypto-api": "^0.8.3",
+    "core-js": "^3.2.1",
+    "crypto-api": "^0.8.5",
     "crypto-js": "^3.1.9-1",
     "ctph.js": "0.0.5",
-    "d3": "^5.9.7",
+    "d3": "^5.11.0",
     "d3-hexbin": "^0.2.2",
     "diff": "^4.0.1",
-    "es6-promisify": "^6.0.1",
-    "escodegen": "^1.11.1",
+    "es6-promisify": "^6.0.2",
+    "escodegen": "^1.12.0",
     "esm": "^3.2.25",
     "esmangle": "^1.0.1",
     "esprima": "^4.0.1",
     "exif-parser": "^0.1.12",
     "file-saver": "^2.0.2",
     "geodesy": "^1.1.3",
-    "highlight.js": "^9.15.8",
+    "highlight.js": "^9.15.10",
     "jimp": "^0.6.4",
     "jquery": "3.4.1",
     "js-crc": "^0.2.0",
@@ -124,16 +121,17 @@
     "jsonwebtoken": "^8.5.1",
     "jsqr": "^1.2.0",
     "jsrsasign": "8.0.12",
-    "kbpgp": "2.1.2",
+    "kbpgp": "2.1.3",
     "libbzip2-wasm": "0.0.4",
     "libyara-wasm": "0.0.12",
     "lodash": "^4.17.15",
     "loglevel": "^1.6.3",
     "loglevel-message-prefix": "^3.0.0",
+    "markdown-it": "^9.1.0",
     "moment": "^2.24.0",
-    "moment-timezone": "^0.5.25",
+    "moment-timezone": "^0.5.26",
     "ngeohash": "^0.6.3",
-    "node-forge": "^0.8.5",
+    "node-forge": "^0.9.1",
     "node-md6": "^0.1.0",
     "nodom": "^2.2.0",
     "notepack.io": "^2.2.0",
@@ -146,6 +144,7 @@
     "sortablejs": "^1.9.0",
     "split.js": "^1.5.11",
     "ssdeep.js": "0.0.2",
+    "tesseract.js": "^2.0.0-alpha.15",
     "ua-parser-js": "^0.7.20",
     "utf8": "^3.0.0",
     "vkbeautify": "^0.99.3",
@@ -161,7 +160,7 @@
     "test": "grunt test",
     "test-node-consumer": "grunt testnodeconsumer",
     "testui": "grunt testui",
-    "docs": "grunt docs",
+    "testuidev": "npx nightwatch --env=dev",
     "lint": "grunt lint",
     "newop": "node --experimental-modules src/core/config/scripts/newOperation.mjs"
   }

src/core/Dish.mjs

@@ -177,7 +177,7 @@ class Dish {
         this.type = type;
 
         if (!this.valid()) {
-            const sample = Utils.truncate(JSON.stringify(this.value), 13);
+            const sample = Utils.truncate(JSON.stringify(this.value), 25);
             throw new DishError(`Data is not a valid ${Dish.enumLookup(type)}: ${sample}`);
         }
     }

src/core/Utils.mjs

@@ -1303,6 +1303,30 @@ export function sendStatusMessage(msg) {
         console.debug(msg);
 }
 
+const debounceTimeouts = {};
+
+/**
+ * Debouncer to stop functions from being executed multiple times in a
+ * short space of time
+ * https://davidwalsh.name/javascript-debounce-function
+ *
+ * @param {function} func - The function to be executed after the debounce time
+ * @param {number} wait - The time (ms) to wait before executing the function
+ * @param {string} id - Unique ID to reference the timeout for the function
+ * @param {object} scope - The object to bind to the debounced function
+ * @param {array} args - Array of arguments to be passed to func
+ * @returns {function}
+ */
+export function debounce(func, wait, id, scope, args) {
+    return function() {
+        const later = function() {
+            func.apply(scope, args);
+        };
+        clearTimeout(debounceTimeouts[id]);
+        debounceTimeouts[id] = setTimeout(later, wait);
+    };
+}
+
 
 /*
  * Polyfills

src/core/config/Categories.json

@@ -85,6 +85,8 @@
             "Vigenère Decode",
             "To Morse Code",
             "From Morse Code",
+            "Bacon Cipher Encode",
+            "Bacon Cipher Decode",
             "Bifid Cipher Encode",
             "Bifid Cipher Decode",
             "Affine Cipher Encode",
@@ -167,6 +169,7 @@
             "Parse IP range",
             "Parse IPv6 address",
             "Parse IPv4 header",
+            "Parse UDP",
             "Parse SSH Host Key",
             "Parse URI",
             "URL Encode",
@@ -227,6 +230,7 @@
             "Convert speed",
             "Convert data units",
             "Convert co-ordinate format",
+            "Show on map",
             "Parse UNIX file permissions",
             "Swap endianness",
             "Parse colour code",
@@ -356,7 +360,8 @@
             "BSON serialise",
             "BSON deserialise",
             "To MessagePack",
-            "From MessagePack"
+            "From MessagePack",
+            "Render Markdown"
         ]
     },
     {
@@ -366,7 +371,11 @@
             "Scan for Embedded Files",
             "Extract Files",
             "Remove EXIF",
-            "Extract EXIF"
+            "Extract EXIF",
+            "Extract RGBA",
+            "View Bit Plane",
+            "Randomize Colour Palette",
+            "Extract LSB"
         ]
     },
     {
@@ -374,6 +383,7 @@
         "ops": [
             "Render Image",
             "Play Media",
+            "Optical Character Recognition",
             "Remove EXIF",
             "Extract EXIF",
             "Split Colour Channels",

src/core/errors/index.mjs

@@ -0,0 +1,9 @@
+import OperationError from "./OperationError.mjs";
+import DishError from "./DishError.mjs";
+import ExcludedOperationError from "./ExcludedOperationError";
+
+export {
+    OperationError,
+    DishError,
+    ExcludedOperationError,
+};

src/core/lib/Arithmetic.mjs

@@ -109,7 +109,7 @@ export function mean(data) {
  */
 export function median(data) {
     if ((data.length % 2) === 0 && data.length > 0) {
-        data.sort(function(a, b){
+        data.sort(function(a, b) {
             return a.minus(b);
         });
         const first = data[Math.floor(data.length / 2)];

src/core/lib/Bacon.mjs

@@ -0,0 +1,66 @@
+/**
+ * Bacon Cipher resources.
+ *
+ * @author Karsten Silkenbäumer [github.com/kassi]
+ * @copyright Karsten Silkenbäumer 2019
+ * @license Apache-2.0
+ */
+
+/**
+ * Bacon definitions.
+ */
+export const BACON_ALPHABETS = {
+    "Standard (I=J and U=V)": {
+        alphabet: "ABCDEFGHIKLMNOPQRSTUWXYZ",
+        codes: [0, 1, 2, 3, 4, 5, 6, 7, 8, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 19, 20, 21, 22, 23]
+    },
+    "Complete": {
+        alphabet: "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+    }
+};
+export const BACON_TRANSLATION_01 = "0/1";
+export const BACON_TRANSLATION_AB = "A/B";
+export const BACON_TRANSLATION_CASE = "Case";
+export const BACON_TRANSLATION_AMNZ = "A-M/N-Z first letter";
+export const BACON_TRANSLATIONS = [
+    BACON_TRANSLATION_01,
+    BACON_TRANSLATION_AB,
+    BACON_TRANSLATION_CASE,
+    BACON_TRANSLATION_AMNZ,
+];
+export const BACON_TRANSLATIONS_FOR_ENCODING = [
+    BACON_TRANSLATION_01,
+    BACON_TRANSLATION_AB
+];
+export const BACON_CLEARER_MAP = {
+    [BACON_TRANSLATION_01]: /[^01]/g,
+    [BACON_TRANSLATION_AB]: /[^ABab]/g,
+    [BACON_TRANSLATION_CASE]: /[^A-Za-z]/g,
+};
+export const BACON_NORMALIZE_MAP = {
+    [BACON_TRANSLATION_AB]: {
+        "A": "0",
+        "B": "1",
+        "a": "0",
+        "b": "1"
+    },
+};
+
+/**
+ * Swaps zeros to ones and ones to zeros.
+ *
+ * @param {string} data
+ * @returns {string}
+ *
+ * @example
+ * // returns "11001 01010"
+ * swapZeroAndOne("00110 10101");
+ */
+export function swapZeroAndOne(string) {
+    return string.replace(/[01]/g, function (c) {
+        return {
+            "0": "1",
+            "1": "0"
+        }[c];
+    });
+}

src/core/lib/Base64.mjs

@@ -7,12 +7,12 @@
  */
 
 import Utils from "../Utils.mjs";
-
+import OperationError from "../errors/OperationError.mjs";
 
 /**
  * Base64's the input byte array using the given alphabet, returning a string.
  *
- * @param {byteArray|Uint8Array|string} data
+ * @param {byteArray|Uint8Array|ArrayBuffer|string} data
  * @param {string} [alphabet="A-Za-z0-9+/="]
  * @returns {string}
  *
@@ -25,11 +25,17 @@ import Utils from "../Utils.mjs";
  */
 export function toBase64(data, alphabet="A-Za-z0-9+/=") {
     if (!data) return "";
+    if (data instanceof ArrayBuffer) {
+        data = new Uint8Array(data);
+    }
     if (typeof data == "string") {
         data = Utils.strToByteArray(data);
     }
 
     alphabet = Utils.expandAlphRange(alphabet).join("");
+    if (alphabet.length !== 64 && alphabet.length !== 65) { // Allow for padding
+        throw new OperationError(`Invalid Base64 alphabet length (${alphabet.length}): ${alphabet}`);
+    }
 
     let output = "",
         chr1, chr2, chr3,
@@ -83,6 +89,9 @@ export function fromBase64(data, alphabet="A-Za-z0-9+/=", returnType="string", r
 
     alphabet = alphabet || "A-Za-z0-9+/=";
     alphabet = Utils.expandAlphRange(alphabet).join("");
+    if (alphabet.length !== 64 && alphabet.length !== 65) { // Allow for padding
+        throw new OperationError(`Invalid Base64 alphabet length (${alphabet.length}): ${alphabet}`);
+    }
 
     const output = [];
     let chr1, chr2, chr3,

src/core/lib/ConvertCoordinates.mjs

@@ -6,9 +6,22 @@
  * @license Apache-2.0
  */
 
-import geohash from "ngeohash";
-import geodesy from "geodesy";
 import OperationError from "../errors/OperationError.mjs";
+import geohash from "ngeohash";
+/*
+Currently unable to update to geodesy v2 as we cannot load .js modules into a .mjs file.
+When we do update, imports will look like this:
+
+import LatLonEllipsoidal from "geodesy/latlon-ellipsoidal.js";
+import Mgrs from "geodesy/mgrs.js";
+import OsGridRef from "geodesy/osgridref.js";
+import Utm from "geodesy/utm.js";
+*/
+import geodesy from "geodesy";
+const LatLonEllipsoidal = geodesy.LatLonEllipsoidal,
+    Mgrs = geodesy.Mgrs,
+    OsGridRef = geodesy.OsGridRef,
+    Utm = geodesy.Utm;
 
 /**
  * Co-ordinate formats
@@ -116,22 +129,22 @@ export function convertCoordinates (input, inFormat, inDelim, outFormat, outDeli
     switch (inFormat) {
         case "Geohash":
             hash = geohash.decode(input.replace(/[^A-Za-z0-9]/g, ""));
-            latlon = new geodesy.LatLonEllipsoidal(hash.latitude, hash.longitude);
+            latlon = new LatLonEllipsoidal(hash.latitude, hash.longitude);
             break;
         case "Military Grid Reference System":
-            utm = geodesy.Mgrs.parse(input.replace(/[^A-Za-z0-9]/g, "")).toUtm();
+            utm = Mgrs.parse(input.replace(/[^A-Za-z0-9]/g, "")).toUtm();
             latlon = utm.toLatLonE();
             break;
         case "Ordnance Survey National Grid":
-            osng = geodesy.OsGridRef.parse(input.replace(/[^A-Za-z0-9]/g, ""));
-            latlon = geodesy.OsGridRef.osGridToLatLon(osng);
+            osng = OsGridRef.parse(input.replace(/[^A-Za-z0-9]/g, ""));
+            latlon = OsGridRef.osGridToLatLon(osng);
             break;
         case "Universal Transverse Mercator":
             // Geodesy needs a space between the first 2 digits and the next letter
             if (/^[\d]{2}[A-Za-z]/.test(input)) {
                 input = input.slice(0, 2) + " " + input.slice(2);
             }
-            utm = geodesy.Utm.parse(input);
+            utm = Utm.parse(input);
             latlon = utm.toLatLonE();
             break;
         case "Degrees Minutes Seconds":
@@ -143,7 +156,7 @@ export function convertCoordinates (input, inFormat, inDelim, outFormat, outDeli
                 if (splitLat.length >= 3 && splitLong.length >= 3) {
                     lat = convDMSToDD(splitLat[0], splitLat[1], splitLat[2], 10);
                     lon = convDMSToDD(splitLong[0], splitLong[1], splitLong[2], 10);
-                    latlon = new geodesy.LatLonEllipsoidal(lat.degrees, lon.degrees);
+                    latlon = new LatLonEllipsoidal(lat.degrees, lon.degrees);
                 } else {
                     throw new OperationError("Invalid co-ordinate format for Degrees Minutes Seconds");
                 }
@@ -152,7 +165,7 @@ export function convertCoordinates (input, inFormat, inDelim, outFormat, outDeli
                 splitLat = splitInput(split[0]);
                 if (splitLat.length >= 3) {
                     lat = convDMSToDD(splitLat[0], splitLat[1], splitLat[2]);
-                    latlon = new geodesy.LatLonEllipsoidal(lat.degrees, lat.degrees);
+                    latlon = new LatLonEllipsoidal(lat.degrees, lat.degrees);
                 } else {
                     throw new OperationError("Invalid co-ordinate format for Degrees Minutes Seconds");
                 }
@@ -168,7 +181,7 @@ export function convertCoordinates (input, inFormat, inDelim, outFormat, outDeli
                 // Convert to decimal degrees, and then convert to a geodesy object
                 lat = convDDMToDD(splitLat[0], splitLat[1], 10);
                 lon = convDDMToDD(splitLong[0], splitLong[1], 10);
-                latlon = new geodesy.LatLonEllipsoidal(lat.degrees, lon.degrees);
+                latlon = new LatLonEllipsoidal(lat.degrees, lon.degrees);
             } else {
                 // Not a pair, so only try to convert one set of co-ordinates
                 splitLat = splitInput(input);
@@ -176,7 +189,7 @@ export function convertCoordinates (input, inFormat, inDelim, outFormat, outDeli
                     throw new OperationError("Invalid co-ordinate format for Degrees Decimal Minutes.");
                 }
                 lat = convDDMToDD(splitLat[0], splitLat[1], 10);
-                latlon = new geodesy.LatLonEllipsoidal(lat.degrees, lat.degrees);
+                latlon = new LatLonEllipsoidal(lat.degrees, lat.degrees);
             }
             break;
         case "Decimal Degrees":
@@ -186,14 +199,14 @@ export function convertCoordinates (input, inFormat, inDelim, outFormat, outDeli
                 if (splitLat.length !== 1 || splitLong.length !== 1) {
                     throw new OperationError("Invalid co-ordinate format for Decimal Degrees.");
                 }
-                latlon = new geodesy.LatLonEllipsoidal(splitLat[0], splitLong[0]);
+                latlon = new LatLonEllipsoidal(splitLat[0], splitLong[0]);
             } else {
                 // Not a pair, so only try to convert one set of co-ordinates
                 splitLat = splitInput(split[0]);
                 if (splitLat.length !== 1) {
                     throw new OperationError("Invalid co-ordinate format for Decimal Degrees.");
                 }
-                latlon = new geodesy.LatLonEllipsoidal(splitLat[0], splitLat[0]);
+                latlon = new LatLonEllipsoidal(splitLat[0], splitLat[0]);
             }
             break;
         default:
@@ -260,7 +273,7 @@ export function convertCoordinates (input, inFormat, inDelim, outFormat, outDeli
             convLat = mgrs.toString(precision);
             break;
         case "Ordnance Survey National Grid":
-            osng = geodesy.OsGridRef.latLonToOsGrid(latlon);
+            osng = OsGridRef.latLonToOsGrid(latlon);
             if (osng.toString() === "") {
                 throw new OperationError("Could not convert co-ordinates to OS National Grid. Are the co-ordinates in range?");
             }
@@ -327,13 +340,13 @@ export function convertCoordinates (input, inFormat, inDelim, outFormat, outDeli
  * @param {string} input - The input data to be split
  * @returns {number[]} An array of the different items in the string, stored as floats
  */
-function splitInput (input){
+function splitInput (input) {
     const split = [];
 
     input.split(/\s+/).forEach(item => {
         // Remove any character that isn't a digit, decimal point or negative sign
         item = item.replace(/[^0-9.-]/g, "");
-        if (item.length > 0){
+        if (item.length > 0) {
             // Turn the item into a float
             split.push(parseFloat(item));
         }
@@ -350,7 +363,7 @@ function splitInput (input){
  * @param {number} precision - The precision the result should be rounded to
  * @returns {{string: string, degrees: number}} An object containing the raw converted value (obj.degrees), and a formatted string version (obj.string)
  */
-function convDMSToDD (degrees, minutes, seconds, precision){
+function convDMSToDD (degrees, minutes, seconds, precision) {
     const absDegrees = Math.abs(degrees);
     let conv = absDegrees + (minutes / 60) + (seconds / 3600);
     let outString = round(conv, precision) + "°";
@@ -566,7 +579,7 @@ export function findFormat (input, delim) {
     // Test DMS/DDM/DD formats
     if (testData !== undefined) {
         const split = splitInput(testData);
-        switch (split.length){
+        switch (split.length) {
             case 3:
                 return "Degrees Minutes Seconds";
             case 2:

src/core/lib/Delim.mjs

@@ -72,3 +72,12 @@ export const JOIN_DELIM_OPTIONS = [
     {name: "Nothing (join chars)", value: ""}
 ];
 
+/**
+ * RGBA list delimiters.
+ */
+export const RGBA_DELIM_OPTIONS = [
+    {name: "Comma", value: ","},
+    {name: "Space", value: " "},
+    {name: "CRLF", value: "\\r\\n"},
+    {name: "Line Feed", value: "\n"}
+];

src/core/lib/FileType.mjs

@@ -75,7 +75,7 @@ function bytesMatch(sig, buf, offset=0) {
  * Given a buffer, detects magic byte sequences at specific positions and returns the
  * extension and mime type.
  *
- * @param {Uint8Array} buf
+ * @param {Uint8Array|ArrayBuffer} buf
  * @param {string[]} [categories=All] - Which categories of file to look for
  * @returns {Object[]} types
  * @returns {string} type.name - Name of file type
@@ -84,6 +84,10 @@ function bytesMatch(sig, buf, offset=0) {
  * @returns {string} [type.desc] - Description
  */
 export function detectFileType(buf, categories=Object.keys(FILE_SIGNATURES)) {
+    if (buf instanceof ArrayBuffer) {
+        buf = new Uint8Array(buf);
+    }
+
     if (!(buf && buf.length > 1)) {
         return [];
     }
@@ -203,7 +207,7 @@ function locatePotentialSig(buf, sig, offset) {
  * Detects whether the given buffer is a file of the type specified.
  *
  * @param {string|RegExp} type
- * @param {Uint8Array} buf
+ * @param {Uint8Array|ArrayBuffer} buf
  * @returns {string|false} The mime type or false if the type does not match
  */
 export function isType(type, buf) {
@@ -230,7 +234,7 @@ export function isType(type, buf) {
 /**
  * Detects whether the given buffer contains an image file.
  *
- * @param {Uint8Array} buf
+ * @param {Uint8Array|ArrayBuffer} buf
  * @returns {string|false} The mime type or false if the type does not match
  */
 export function isImage(buf) {

src/core/lib/IP.mjs

@@ -241,7 +241,7 @@ export function ipv6ListedRange(match, includeNetworkInfo) {
     ipv6List = ipv6List.filter(function(str) {
         return str.trim();
     });
-    for (let i =0; i < ipv6List.length; i++){
+    for (let i =0; i < ipv6List.length; i++) {
         ipv6List[i] = ipv6List[i].trim();
     }
     const ipv6CidrList = ipv6List.filter(function(a) {
@@ -502,8 +502,8 @@ export function ipv6Compare(a, b) {
     const a_ = strToIpv6(a),
         b_ = strToIpv6(b);
 
-    for (let i = 0; i < a_.length; i++){
-        if (a_[i] !== b_[i]){
+    for (let i = 0; i < a_.length; i++) {
+        if (a_[i] !== b_[i]) {
             return a_[i] - b_[i];
         }
     }

src/core/lib/LoremIpsum.mjs

@@ -85,7 +85,7 @@ function getWords(length=3) {
     const words = [];
     let word;
     let previousWord;
-    while (words.length < length){
+    while (words.length < length) {
         do {
             word = wordList[Math.floor(Math.random() * wordList.length)];
         } while (previousWord === word);

src/core/lib/Magic.mjs

@@ -97,6 +97,7 @@ class Magic {
 
         if (!fileType.length) return null;
         return {
+            name: fileType[0].name,
             ext: fileType[0].extension,
             mime: fileType[0].mime,
             desc: fileType[0].description

src/core/operations/AESDecrypt.mjs

@@ -71,8 +71,8 @@ class AESDecrypt extends Operation {
      * @throws {OperationError} if cannot decrypt input or invalid key length
      */
     run(input, args) {
-        const key = Utils.convertToByteArray(args[0].string, args[0].option),
-            iv = Utils.convertToByteArray(args[1].string, args[1].option),
+        const key = Utils.convertToByteString(args[0].string, args[0].option),
+            iv = Utils.convertToByteString(args[1].string, args[1].option),
             mode = args[2],
             inputType = args[3],
             outputType = args[4],

src/core/operations/AddTextToImage.mjs

@@ -121,7 +121,7 @@ class AddTextToImage extends Operation {
         let xPos = args[3],
             yPos = args[4];
 
-        if (!isImage(new Uint8Array(input))) {
+        if (!isImage(input)) {
             throw new OperationError("Invalid file type.");
         }
 

src/core/operations/BaconCipherDecode.mjs

@@ -0,0 +1,107 @@
+/**
+ * @author Karsten Silkenbäumer [github.com/kassi]
+ * @copyright Karsten Silkenbäumer 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation";
+import {
+    BACON_ALPHABETS,
+    BACON_TRANSLATION_CASE, BACON_TRANSLATION_AMNZ, BACON_TRANSLATIONS, BACON_CLEARER_MAP, BACON_NORMALIZE_MAP,
+    swapZeroAndOne
+} from "../lib/Bacon";
+
+/**
+ * Bacon Cipher Decode operation
+ */
+class BaconCipherDecode extends Operation {
+    /**
+     * BaconCipherDecode constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Bacon Cipher Decode";
+        this.module = "Default";
+        this.description = "Bacon's cipher or the Baconian cipher is a method of steganography devised by Francis Bacon in 1605. A message is concealed in the presentation of text, rather than its content.";
+        this.infoURL = "https://wikipedia.org/wiki/Bacon%27s_cipher";
+        this.inputType = "string";
+        this.outputType = "string";
+        this.args = [
+            {
+                "name": "Alphabet",
+                "type": "option",
+                "value": Object.keys(BACON_ALPHABETS)
+            },
+            {
+                "name": "Translation",
+                "type": "option",
+                "value": BACON_TRANSLATIONS
+            },
+            {
+                "name": "Invert Translation",
+                "type": "boolean",
+                "value": false
+            }
+        ];
+    }
+
+    /**
+     * @param {string} input
+     * @param {Object[]} args
+     * @returns {string}
+     */
+    run(input, args) {
+        const [alphabet, translation, invert] = args;
+        const alphabetObject = BACON_ALPHABETS[alphabet];
+
+        // remove invalid characters
+        input = input.replace(BACON_CLEARER_MAP[translation], "");
+
+        // normalize to unique alphabet
+        if (BACON_NORMALIZE_MAP[translation] !== undefined) {
+            input = input.replace(/./g, function (c) {
+                return BACON_NORMALIZE_MAP[translation][c];
+            });
+        } else if (translation === BACON_TRANSLATION_CASE) {
+            const codeA = "A".charCodeAt(0);
+            const codeZ = "Z".charCodeAt(0);
+            input = input.replace(/./g, function (c) {
+                const code = c.charCodeAt(0);
+                if (code >= codeA && code <= codeZ) {
+                    return "1";
+                } else {
+                    return "0";
+                }
+            });
+        } else if (translation === BACON_TRANSLATION_AMNZ) {
+            const words = input.split(/\s+/);
+            const letters = words.map(function (e) {
+                if (e) {
+                    const code = e[0].toUpperCase().charCodeAt(0);
+                    return code >= "N".charCodeAt(0) ? "1" : "0";
+                } else {
+                    return "";
+                }
+            });
+            input = letters.join("");
+        }
+
+        if (invert) {
+            input = swapZeroAndOne(input);
+        }
+
+        // group into 5
+        const inputArray = input.match(/(.{5})/g) || [];
+
+        let output = "";
+        for (let i = 0; i < inputArray.length; i++) {
+            const code = inputArray[i];
+            const number = parseInt(code, 2);
+            output += number < alphabetObject.alphabet.length ? alphabetObject.alphabet[number] : "?";
+        }
+        return output;
+    }
+}
+
+export default BaconCipherDecode;

src/core/operations/BaconCipherEncode.mjs

@@ -0,0 +1,101 @@
+/**
+ * @author Karsten Silkenbäumer [github.com/kassi]
+ * @copyright Karsten Silkenbäumer 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation";
+import {
+    BACON_ALPHABETS,
+    BACON_TRANSLATIONS_FOR_ENCODING, BACON_TRANSLATION_AB,
+    swapZeroAndOne
+} from "../lib/Bacon";
+
+/**
+ * Bacon Cipher Encode operation
+ */
+class BaconCipherEncode extends Operation {
+    /**
+     * BaconCipherEncode constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Bacon Cipher Encode";
+        this.module = "Default";
+        this.description = "Bacon's cipher or the Baconian cipher is a method of steganography devised by Francis Bacon in 1605. A message is concealed in the presentation of text, rather than its content.";
+        this.infoURL = "https://wikipedia.org/wiki/Bacon%27s_cipher";
+        this.inputType = "string";
+        this.outputType = "string";
+        this.args = [
+            {
+                "name": "Alphabet",
+                "type": "option",
+                "value": Object.keys(BACON_ALPHABETS)
+            },
+            {
+                "name": "Translation",
+                "type": "option",
+                "value": BACON_TRANSLATIONS_FOR_ENCODING
+            },
+            {
+                "name": "Keep extra characters",
+                "type": "boolean",
+                "value": false
+            },
+            {
+                "name": "Invert Translation",
+                "type": "boolean",
+                "value": false
+            }
+        ];
+    }
+
+    /**
+     * @param {string} input
+     * @param {Object[]} args
+     * @returns {string}
+     */
+    run(input, args) {
+        const [alphabet, translation, keep, invert] = args;
+
+        const alphabetObject = BACON_ALPHABETS[alphabet];
+        const charCodeA = "A".charCodeAt(0);
+        const charCodeZ = "Z".charCodeAt(0);
+
+        let output = input.replace(/./g, function (c) {
+            const charCode = c.toUpperCase().charCodeAt(0);
+            if (charCode >= charCodeA && charCode <= charCodeZ) {
+                let code = charCode - charCodeA;
+                if (alphabetObject.codes !== undefined) {
+                    code = alphabetObject.codes[code];
+                }
+                const bacon = ("00000" + code.toString(2)).substr(-5, 5);
+                return bacon;
+            } else {
+                return c;
+            }
+        });
+
+        if (invert) {
+            output = swapZeroAndOne(output);
+        }
+        if (!keep) {
+            output = output.replace(/[^01]/g, "");
+            const outputArray = output.match(/(.{5})/g) || [];
+            output = outputArray.join(" ");
+        }
+        if (translation === BACON_TRANSLATION_AB) {
+            output = output.replace(/[01]/g, function (c) {
+                return {
+                    "0": "A",
+                    "1": "B"
+                }[c];
+            });
+        }
+
+        return output;
+    }
+}
+
+export default BaconCipherEncode;

src/core/operations/BlurImage.mjs

@@ -53,7 +53,7 @@ class BlurImage extends Operation {
     async run(input, args) {
         const [blurAmount, blurType] = args;
 
-        if (!isImage(new Uint8Array(input))) {
+        if (!isImage(input)) {
             throw new OperationError("Invalid file type.");
         }
 
@@ -64,7 +64,7 @@ class BlurImage extends Operation {
             throw new OperationError(`Error loading image. (${err})`);
         }
         try {
-            switch (blurType){
+            switch (blurType) {
                 case "Fast":
                     if (isWorkerEnvironment())
                         self.sendStatusMessage("Fast blurring image...");

src/core/operations/Bzip2Decompress.mjs

@@ -47,7 +47,7 @@ class Bzip2Decompress extends Operation {
      * @param {Object[]} args
      * @returns {string}
      */
-    run(input, args) {
+    async run(input, args) {
         const [small] = args;
         if (input.byteLength <= 0) {
             throw new OperationError("Please provide an input.");

src/core/operations/ChangeIPFormat.mjs

@@ -29,12 +29,12 @@ class ChangeIPFormat extends Operation {
             {
                 "name": "Input format",
                 "type": "option",
-                "value": ["Dotted Decimal", "Decimal", "Hex"]
+                "value": ["Dotted Decimal", "Decimal", "Octal", "Hex"]
             },
             {
                 "name": "Output format",
                 "type": "option",
-                "value": ["Dotted Decimal", "Decimal", "Hex"]
+                "value": ["Dotted Decimal", "Decimal", "Octal", "Hex"]
             }
         ];
     }
@@ -54,7 +54,6 @@ class ChangeIPFormat extends Operation {
             if (lines[i] === "") continue;
             let baIp = [];
             let octets;
-            let decimal;
 
             if (inFormat === outFormat) {
                 output += lines[i] + "\n";
@@ -70,11 +69,10 @@ class ChangeIPFormat extends Operation {
                     }
                     break;
                 case "Decimal":
-                    decimal = lines[i].toString();
-                    baIp.push(decimal >> 24 & 255);
-                    baIp.push(decimal >> 16 & 255);
-                    baIp.push(decimal >> 8 & 255);
-                    baIp.push(decimal & 255);
+                    baIp = this.fromNumber(lines[i].toString(), 10);
+                    break;
+                case "Octal":
+                    baIp = this.fromNumber(lines[i].toString(), 8);
                     break;
                 case "Hex":
                     baIp = fromHex(lines[i]);
@@ -100,6 +98,10 @@ class ChangeIPFormat extends Operation {
                     decIp = ((baIp[0] << 24) | (baIp[1] << 16) | (baIp[2] << 8) | baIp[3]) >>> 0;
                     output += decIp.toString() + "\n";
                     break;
+                case "Octal":
+                    decIp = ((baIp[0] << 24) | (baIp[1] << 16) | (baIp[2] << 8) | baIp[3]) >>> 0;
+                    output += "0" + decIp.toString(8) + "\n";
+                    break;
                 case "Hex":
                     hexIp = "";
                     for (j = 0; j < baIp.length; j++) {
@@ -115,6 +117,22 @@ class ChangeIPFormat extends Operation {
         return output.slice(0, output.length-1);
     }
 
+    /**
+     * Constructs an array of IP address octets from a numerical value.
+     * @param {string} value The value of the IP address
+     * @param {number} radix The numeral system to be used
+     * @returns {number[]}
+     */
+    fromNumber(value, radix) {
+        const decimal = parseInt(value, radix);
+        const baIp = [];
+        baIp.push(decimal >> 24 & 255);
+        baIp.push(decimal >> 16 & 255);
+        baIp.push(decimal >> 8 & 255);
+        baIp.push(decimal & 255);
+        return baIp;
+    }
+
 }
 
 export default ChangeIPFormat;

src/core/operations/ContainImage.mjs

@@ -107,7 +107,7 @@ class ContainImage extends Operation {
             "Bottom": jimp.VERTICAL_ALIGN_BOTTOM
         };
 
-        if (!isImage(new Uint8Array(input))) {
+        if (!isImage(input)) {
             throw new OperationError("Invalid file type.");
         }
 

src/core/operations/ConvertDataUnits.mjs

@@ -54,7 +54,7 @@ class ConvertDataUnits extends Operation {
 const DATA_UNITS = [
     "Bits (b)", "Nibbles", "Octets", "Bytes (B)",
     "[Binary bits (2^n)]", "Kibibits (Kib)", "Mebibits (Mib)", "Gibibits (Gib)", "Tebibits (Tib)", "Pebibits (Pib)", "Exbibits (Eib)", "Zebibits (Zib)", "Yobibits (Yib)", "[/Binary bits (2^n)]",
-    "[Decimal bits (10^n)]", "Decabits", "Hectobits", "Kilobits (kb)", "Megabits (Mb)", "Gigabits (Gb)", "Terabits (Tb)", "Petabits (Pb)", "Exabits (Eb)", "Zettabits (Zb)", "Yottabits (Yb)", "[/Decimal bits (10^n)]",
+    "[Decimal bits (10^n)]", "Decabits", "Hectobits", "Kilobits (Kb)", "Megabits (Mb)", "Gigabits (Gb)", "Terabits (Tb)", "Petabits (Pb)", "Exabits (Eb)", "Zettabits (Zb)", "Yottabits (Yb)", "[/Decimal bits (10^n)]",
     "[Binary bytes (8 x 2^n)]", "Kibibytes (KiB)", "Mebibytes (MiB)", "Gibibytes (GiB)", "Tebibytes (TiB)", "Pebibytes (PiB)", "Exbibytes (EiB)", "Zebibytes (ZiB)", "Yobibytes (YiB)", "[/Binary bytes (8 x 2^n)]",
     "[Decimal bytes (8 x 10^n)]", "Kilobytes (KB)", "Megabytes (MB)", "Gigabytes (GB)", "Terabytes (TB)", "Petabytes (PB)", "Exabytes (EB)", "Zettabytes (ZB)", "Yottabytes (YB)", "[/Decimal bytes (8 x 10^n)]"
 ];

src/core/operations/ConvertImageFormat.mjs

@@ -93,7 +93,7 @@ class ConvertImageFormat extends Operation {
 
         const mime = formatMap[format];
 
-        if (!isImage(new Uint8Array(input))) {
+        if (!isImage(input)) {
             throw new OperationError("Invalid file format.");
         }
         let image;

src/core/operations/CoverImage.mjs

@@ -102,7 +102,7 @@ class CoverImage extends Operation {
             "Bottom": jimp.VERTICAL_ALIGN_BOTTOM
         };
 
-        if (!isImage(new Uint8Array(input))) {
+        if (!isImage(input)) {
             throw new OperationError("Invalid file type.");
         }
 

src/core/operations/CropImage.mjs

@@ -93,7 +93,7 @@ class CropImage extends Operation {
      */
     async run(input, args) {
         const [xPos, yPos, width, height, autocrop, autoTolerance, autoFrames, autoSymmetric, autoBorder] = args;
-        if (!isImage(new Uint8Array(input))) {
+        if (!isImage(input)) {
             throw new OperationError("Invalid file type.");
         }
 

src/core/operations/DNSOverHTTPS.mjs

@@ -111,7 +111,7 @@ class DNSOverHTTPS extends Operation {
  * @returns {JSON}
  */
 function extractData(data) {
-    if (typeof(data) == "undefined"){
+    if (typeof(data) == "undefined") {
         return [];
     } else {
         const dataValues = [];

src/core/operations/DetectFileType.mjs

@@ -8,6 +8,13 @@ import Operation from "../Operation.mjs";
 import {detectFileType} from "../lib/FileType.mjs";
 import {FILE_SIGNATURES} from "../lib/FileSignatures.mjs";
 
+// Concat all supported extensions into a single flat list
+const exts = [].concat.apply([], Object.keys(FILE_SIGNATURES).map(cat =>
+    [].concat.apply([], FILE_SIGNATURES[cat].map(sig =>
+        sig.extension.split(",")
+    ))
+)).unique().sort().join(", ");
+
 /**
  * Detect File Type operation
  */
@@ -22,11 +29,7 @@ class DetectFileType extends Operation {
         this.name = "Detect File Type";
         this.module = "Default";
         this.description = "Attempts to guess the MIME (Multipurpose Internet Mail Extensions) type of the data based on 'magic bytes'.<br><br>Currently supports the following file types: " +
-            Object.keys(FILE_SIGNATURES).map(cat =>
-                FILE_SIGNATURES[cat].map(sig =>
-                    sig.extension.split(",")[0]
-                ).join(", ")
-            ).join(", ") + ".";
+            exts + ".";
         this.infoURL = "https://wikipedia.org/wiki/List_of_file_signatures";
         this.inputType = "ArrayBuffer";
         this.outputType = "string";

src/core/operations/DitherImage.mjs

@@ -38,7 +38,7 @@ class DitherImage extends Operation {
      * @returns {byteArray}
      */
     async run(input, args) {
-        if (!isImage(new Uint8Array(input))) {
+        if (!isImage(input)) {
             throw new OperationError("Invalid file type.");
         }
 

src/core/operations/ExtractDomains.mjs

@@ -20,7 +20,7 @@ class ExtractDomains extends Operation {
 
         this.name = "Extract domains";
         this.module = "Regex";
-        this.description = "Extracts domain names.<br>Note that this will not include paths. Use <strong>Extract URLs</strong> to find entire URLs.";
+        this.description = "Extracts fully qualified domain names.<br>Note that this will not include paths. Use <strong>Extract URLs</strong> to find entire URLs.";
         this.inputType = "string";
         this.outputType = "string";
         this.args = [

src/core/operations/ExtractLSB.mjs

@@ -0,0 +1,114 @@
+/**
+ * @author Ge0rg3 [georgeomnet+cyberchef@gmail.com]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation.mjs";
+import OperationError from "../errors/OperationError.mjs";
+import Utils from "../Utils.mjs";
+import { fromBinary } from "../lib/Binary.mjs";
+import { isImage } from "../lib/FileType.mjs";
+import jimp from "jimp";
+
+/**
+ * Extract LSB operation
+ */
+class ExtractLSB extends Operation {
+
+    /**
+     * ExtractLSB constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Extract LSB";
+        this.module = "Image";
+        this.description = "Extracts the Least Significant Bit data from each pixel in an image. This is a common way to hide data in Steganography.";
+        this.infoURL = "https://wikipedia.org/wiki/Bit_numbering#Least_significant_bit_in_digital_steganography";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "byteArray";
+        this.args = [
+            {
+                name: "Colour Pattern #1",
+                type: "option",
+                value: COLOUR_OPTIONS,
+            },
+            {
+                name: "Colour Pattern #2",
+                type: "option",
+                value: ["", ...COLOUR_OPTIONS],
+            },
+            {
+                name: "Colour Pattern #3",
+                type: "option",
+                value: ["", ...COLOUR_OPTIONS],
+            },
+            {
+                name: "Colour Pattern #4",
+                type: "option",
+                value: ["", ...COLOUR_OPTIONS],
+            },
+            {
+                name: "Pixel Order",
+                type: "option",
+                value: ["Row", "Column"],
+            },
+            {
+                name: "Bit",
+                type: "number",
+                value: 0
+            }
+        ];
+    }
+
+    /**
+     * @param {ArrayBuffer} input
+     * @param {Object[]} args
+     * @returns {byteArray}
+     */
+    async run(input, args) {
+        if (!isImage(input)) throw new OperationError("Please enter a valid image file.");
+
+        const bit = 7 - args.pop(),
+            pixelOrder = args.pop(),
+            colours = args.filter(option => option !== "").map(option => COLOUR_OPTIONS.indexOf(option)),
+            parsedImage = await jimp.read(input),
+            width = parsedImage.bitmap.width,
+            height = parsedImage.bitmap.height,
+            rgba = parsedImage.bitmap.data;
+
+        if (bit < 0 || bit > 7) {
+            throw new OperationError("Error: Bit argument must be between 0 and 7");
+        }
+
+        let i, combinedBinary = "";
+
+        if (pixelOrder === "Row") {
+            for (i = 0; i < rgba.length; i += 4) {
+                for (const colour of colours) {
+                    combinedBinary += Utils.bin(rgba[i + colour])[bit];
+                }
+            }
+        } else {
+            let rowWidth;
+            const pixelWidth = width * 4;
+            for (let col = 0; col < width; col++) {
+                for (let row = 0; row < height; row++) {
+                    rowWidth = row * pixelWidth;
+                    for (const colour of colours) {
+                        i = rowWidth + (col + colour * 4);
+                        combinedBinary += Utils.bin(rgba[i])[bit];
+                    }
+                }
+            }
+        }
+
+        return fromBinary(combinedBinary);
+    }
+
+}
+
+const COLOUR_OPTIONS = ["R", "G", "B", "A"];
+
+export default ExtractLSB;

src/core/operations/ExtractRGBA.mjs

@@ -0,0 +1,65 @@
+/**
+ * @author Ge0rg3 [georgeomnet+cyberchef@gmail.com]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation.mjs";
+import OperationError from "../errors/OperationError.mjs";
+import { isImage } from "../lib/FileType.mjs";
+import jimp from "jimp";
+
+import {RGBA_DELIM_OPTIONS} from "../lib/Delim.mjs";
+
+/**
+ * Extract RGBA operation
+ */
+class ExtractRGBA extends Operation {
+
+    /**
+     * ExtractRGBA constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Extract RGBA";
+        this.module = "Image";
+        this.description = "Extracts each pixel's RGBA value in an image. These are sometimes used in Steganography to hide text or data.";
+        this.infoURL = "https://wikipedia.org/wiki/RGBA_color_space";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "string";
+        this.args = [
+            {
+                name: "Delimiter",
+                type: "editableOption",
+                value: RGBA_DELIM_OPTIONS
+            },
+            {
+                name: "Include Alpha",
+                type: "boolean",
+                value: true
+            }
+        ];
+    }
+
+    /**
+     * @param {ArrayBuffer} input
+     * @param {Object[]} args
+     * @returns {string}
+     */
+    async run(input, args) {
+        if (!isImage(input)) throw new OperationError("Please enter a valid image file.");
+
+        const delimiter = args[0],
+            includeAlpha = args[1],
+            parsedImage = await jimp.read(input);
+
+        let bitmap = parsedImage.bitmap.data;
+        bitmap = includeAlpha ? bitmap : bitmap.filter((val, idx) => idx % 4 !== 3);
+
+        return bitmap.join(delimiter);
+    }
+
+}
+
+export default ExtractRGBA;

src/core/operations/FlipImage.mjs

@@ -45,7 +45,7 @@ class FlipImage extends Operation {
      */
     async run(input, args) {
         const [flipAxis] = args;
-        if (!isImage(new Uint8Array(input))) {
+        if (!isImage(input)) {
             throw new OperationError("Invalid input file type.");
         }
 
@@ -58,7 +58,7 @@ class FlipImage extends Operation {
         try {
             if (isWorkerEnvironment())
                 self.sendStatusMessage("Flipping image...");
-            switch (flipAxis){
+            switch (flipAxis) {
                 case "Horizontal":
                     image.flip(true, false);
                     break;

src/core/operations/FromQuotedPrintable.mjs

@@ -23,7 +23,7 @@ class FromQuotedPrintable extends Operation {
 
         this.name = "From Quoted Printable";
         this.module = "Default";
-        this.description = "Converts QP-encoded text back to standard text.";
+        this.description = "Converts QP-encoded text back to standard text.<br><br>e.g. The quoted-printable encoded string <code>hello=20world</code> becomes <code>hello world</code>";
         this.infoURL = "https://wikipedia.org/wiki/Quoted-printable";
         this.inputType = "string";
         this.outputType = "byteArray";

src/core/operations/GenerateLoremIpsum.mjs

@@ -47,7 +47,7 @@ class GenerateLoremIpsum extends Operation {
      */
     run(input, args) {
         const [length, lengthType] = args;
-        if (length < 1){
+        if (length < 1) {
             throw new OperationError("Length must be greater than 0");
         }
         switch (lengthType) {

src/core/operations/GeneratePGPKeyPair.mjs

@@ -58,7 +58,7 @@ class GeneratePGPKeyPair extends Operation {
      * @param {Object[]} args
      * @returns {string}
      */
-    run(input, args) {
+    async run(input, args) {
         const [keyType, keySize] = args[0].split("-"),
             password = args[1],
             name = args[2],

src/core/operations/ImageBrightnessContrast.mjs

@@ -54,7 +54,7 @@ class ImageBrightnessContrast extends Operation {
      */
     async run(input, args) {
         const [brightness, contrast] = args;
-        if (!isImage(new Uint8Array(input))) {
+        if (!isImage(input)) {
             throw new OperationError("Invalid file type.");
         }
 

src/core/operations/ImageFilter.mjs

@@ -48,7 +48,7 @@ class ImageFilter extends Operation {
      */
     async run(input, args) {
         const [filterType] = args;
-        if (!isImage(new Uint8Array(input))){
+        if (!isImage(input)) {
             throw new OperationError("Invalid file type.");
         }
 

src/core/operations/ImageHueSaturationLightness.mjs

@@ -62,7 +62,7 @@ class ImageHueSaturationLightness extends Operation {
     async run(input, args) {
         const [hue, saturation, lightness] = args;
 
-        if (!isImage(new Uint8Array(input))) {
+        if (!isImage(input)) {
             throw new OperationError("Invalid file type.");
         }
 

src/core/operations/ImageOpacity.mjs

@@ -47,7 +47,7 @@ class ImageOpacity extends Operation {
      */
     async run(input, args) {
         const [opacity] = args;
-        if (!isImage(new Uint8Array(input))) {
+        if (!isImage(input)) {
             throw new OperationError("Invalid file type.");
         }
 

src/core/operations/InvertImage.mjs

@@ -38,7 +38,7 @@ class InvertImage extends Operation {
      * @returns {byteArray}
      */
     async run(input, args) {
-        if (!isImage(new Uint8Array(input))) {
+        if (!isImage(input)) {
             throw new OperationError("Invalid input file format.");
         }
 

src/core/operations/MicrosoftScriptDecoder.mjs

@@ -34,7 +34,7 @@ class MicrosoftScriptDecoder extends Operation {
     run(input, args) {
         const matcher = /#@~\^.{6}==(.+).{6}==\^#~@/;
         const encodedData = matcher.exec(input);
-        if (encodedData){
+        if (encodedData) {
             return MicrosoftScriptDecoder._decode(encodedData[1]);
         } else {
             return "";

src/core/operations/NormaliseImage.mjs

@@ -37,7 +37,7 @@ class NormaliseImage extends Operation {
      * @returns {byteArray}
      */
     async run(input, args) {
-        if (!isImage(new Uint8Array(input))) {
+        if (!isImage(input)) {
             throw new OperationError("Invalid file type.");
         }
 

src/core/operations/OpticalCharacterRecognition.mjs

@@ -0,0 +1,87 @@
+/**
+ * @author n1474335 [n1474335@gmail.com]
+ * @author mshwed [m@ttshwed.com]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation.mjs";
+import OperationError from "../errors/OperationError.mjs";
+import { isImage } from "../lib/FileType.mjs";
+import { toBase64 } from "../lib/Base64.mjs";
+import { isWorkerEnvironment } from "../Utils.mjs";
+
+import Tesseract from "tesseract.js";
+const { TesseractWorker } = Tesseract;
+
+import process from "process";
+
+/**
+ * Optical Character Recognition operation
+ */
+class OpticalCharacterRecognition extends Operation {
+
+    /**
+     * OpticalCharacterRecognition constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Optical Character Recognition";
+        this.module = "OCR";
+        this.description = "Optical character recognition or optical character reader (OCR) is the mechanical or electronic conversion of images of typed, handwritten or printed text into machine-encoded text.<br><br>Supported image formats: png, jpg, bmp, pbm.";
+        this.infoURL = "https://wikipedia.org/wiki/Optical_character_recognition";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "string";
+        this.args = [
+            {
+                name: "Show confidence",
+                type: "boolean",
+                value: true
+            }
+        ];
+    }
+
+    /**
+     * @param {ArrayBuffer} input
+     * @param {Object[]} args
+     * @returns {string}
+     */
+    async run(input, args) {
+        const [showConfidence] = args;
+
+        if (!isWorkerEnvironment()) throw OperationError("This operation only works in a browser");
+
+        const type = isImage(input);
+        if (!type) {
+            throw new OperationError("Invalid File Type");
+        }
+
+        const assetDir = isWorkerEnvironment() ? `${self.docURL}/assets/` : `${process.cwd()}/src/core/vendor/`;
+
+        try {
+            const image = `data:${type};base64,${toBase64(input)}`;
+            const worker = new TesseractWorker({
+                workerPath: `${assetDir}tesseract/worker.min.js`,
+                langPath: `${assetDir}tesseract/lang-data`,
+                corePath: `${assetDir}tesseract/tesseract-core.wasm.js`,
+            });
+            const result = await worker.recognize(image)
+                .progress(progress => {
+                    if (isWorkerEnvironment()) {
+                        self.sendStatusMessage(`Status: ${progress.status} - ${(parseFloat(progress.progress)*100).toFixed(2)}%`);
+                    }
+                });
+
+            if (showConfidence) {
+                return `Confidence: ${result.confidence}%\n\n${result.text}`;
+            } else {
+                return result.text;
+            }
+        } catch (err) {
+            throw new OperationError(`Error performing OCR on image. (${err})`);
+        }
+    }
+}
+
+export default OpticalCharacterRecognition;

src/core/operations/ParseColourCode.mjs

@@ -113,7 +113,7 @@ CMYK: ${cmyk}
     }).on('colorpickerChange', function(e) {
         var color = e.color.string('rgba');
         document.getElementById('input-text').value = color;
-        window.app.autoBake();
+        window.app.manager.input.debounceInputChange(new Event("keyup"));
     });
 </script>`;
     }
@@ -134,7 +134,7 @@ CMYK: ${cmyk}
     static _hslToRgb(h, s, l) {
         let r, g, b;
 
-        if (s === 0){
+        if (s === 0) {
             r = g = b = l; // achromatic
         } else {
             const hue2rgb = function hue2rgb(p, q, t) {

src/core/operations/ParseQRCode.mjs

@@ -51,7 +51,7 @@ class ParseQRCode extends Operation {
     async run(input, args) {
         const [normalise] = args;
 
-        if (!isImage(new Uint8Array(input))) {
+        if (!isImage(input)) {
             throw new OperationError("Invalid file type.");
         }
         return await parseQrCode(input, normalise);

src/core/operations/ParseUDP.mjs

@@ -0,0 +1,84 @@
+/**
+ * @author h345983745 []
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation.mjs";
+import Stream from "../lib/Stream.mjs";
+import {toHex} from "../lib/Hex.mjs";
+import OperationError from "../errors/OperationError.mjs";
+
+/**
+ * Parse UDP operation
+ */
+class ParseUDP extends Operation {
+
+    /**
+     * ParseUDP constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Parse UDP";
+        this.module = "Default";
+        this.description = "Parses a UDP header and payload (if present).";
+        this.infoURL = "https://wikipedia.org/wiki/User_Datagram_Protocol";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "json";
+        this.presentType = "html";
+        this.args = [];
+    }
+
+    /**
+     * @param {ArrayBuffer} input
+     * @returns {Object}
+     */
+    run(input, args) {
+        if (input.byteLength < 8) {
+            throw new OperationError("Need 8 bytes for a UDP Header");
+        }
+
+        const s = new Stream(new Uint8Array(input));
+        // Parse Header
+        const UDPPacket = {
+            "Source port": s.readInt(2),
+            "Destination port": s.readInt(2),
+            "Length": s.readInt(2),
+            "Checksum": toHex(s.getBytes(2), "")
+        };
+        // Parse data if present
+        if (s.hasMore()) {
+            UDPPacket.Data = toHex(s.getBytes(UDPPacket.Length - 8), "");
+        }
+
+        return UDPPacket;
+    }
+
+    /**
+     * Displays the UDP Packet in a table style
+     * @param {Object} data
+     * @returns {html}
+     */
+    present(data) {
+        const html = [];
+        html.push("<table class='table table-hover table-sm table-bordered table-nonfluid' style='table-layout: fixed'>");
+        html.push("<tr>");
+        html.push("<th>Field</th>");
+        html.push("<th>Value</th>");
+        html.push("</tr>");
+
+        for (const key in data) {
+            html.push("<tr>");
+            html.push("<td style=\"word-wrap:break-word\">" + key + "</td>");
+            html.push("<td>" + data[key] + "</td>");
+            html.push("</tr>");
+        }
+        html.push("</table>");
+        return html.join("");
+    }
+
+}
+
+
+export default ParseUDP;

src/core/operations/RandomizeColourPalette.mjs

@@ -0,0 +1,83 @@
+/**
+ * @author Ge0rg3 [georgeomnet+cyberchef@gmail.com]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation.mjs";
+import OperationError from "../errors/OperationError.mjs";
+import Utils from "../Utils.mjs";
+import { isImage } from "../lib/FileType.mjs";
+import { runHash } from "../lib/Hash.mjs";
+import { toBase64 } from "../lib/Base64.mjs";
+import jimp from "jimp";
+
+/**
+ * Randomize Colour Palette operation
+ */
+class RandomizeColourPalette extends Operation {
+
+    /**
+     * RandomizeColourPalette constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Randomize Colour Palette";
+        this.module = "Image";
+        this.description = "Randomizes each colour in an image's colour palette. This can often reveal text or symbols that were previously a very similar colour to their surroundings, a technique sometimes used in Steganography.";
+        this.infoURL = "https://wikipedia.org/wiki/Indexed_color";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
+        this.presentType = "html";
+        this.args = [
+            {
+                name: "Seed",
+                type: "string",
+                value: ""
+            }
+        ];
+    }
+
+    /**
+     * @param {ArrayBuffer} input
+     * @param {Object[]} args
+     * @returns {ArrayBuffer}
+     */
+    async run(input, args) {
+        if (!isImage(input)) throw new OperationError("Please enter a valid image file.");
+
+        const seed = args[0] || (Math.random().toString().substr(2)),
+            parsedImage = await jimp.read(input),
+            width = parsedImage.bitmap.width,
+            height = parsedImage.bitmap.height;
+
+        let rgbString, rgbHash, rgbHex;
+
+        parsedImage.scan(0, 0, width, height, function(x, y, idx) {
+            rgbString = this.bitmap.data.slice(idx, idx+3).join(".");
+            rgbHash = runHash("md5", Utils.strToArrayBuffer(seed + rgbString));
+            rgbHex = rgbHash.substr(0, 6) + "ff";
+            parsedImage.setPixelColor(parseInt(rgbHex, 16), x, y);
+        });
+
+        const imageBuffer = await parsedImage.getBufferAsync(jimp.AUTO);
+
+        return new Uint8Array(imageBuffer).buffer;
+    }
+
+    /**
+     * Displays the extracted data as an image for web apps.
+     * @param {ArrayBuffer} data
+     * @returns {html}
+     */
+    present(data) {
+        if (!data.byteLength) return "";
+        const type = isImage(data);
+
+        return `<img src="data:${type};base64,${toBase64(data)}">`;
+    }
+
+}
+
+export default RandomizeColourPalette;

src/core/operations/RenderMarkdown.mjs

@@ -0,0 +1,69 @@
+/**
+ * @author j433866 [j433866@gmail.com]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation.mjs";
+import MarkdownIt from "markdown-it";
+import hljs from "highlight.js";
+
+/**
+ * Render Markdown operation
+ */
+class RenderMarkdown extends Operation {
+
+    /**
+     * RenderMarkdown constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Render Markdown";
+        this.module = "Code";
+        this.description = "Renders input Markdown as HTML. HTML rendering is disabled to avoid XSS.";
+        this.infoURL = "https://wikipedia.org/wiki/Markdown";
+        this.inputType = "string";
+        this.outputType = "html";
+        this.args = [
+            {
+                name: "Autoconvert URLs to links",
+                type: "boolean",
+                value: false
+            },
+            {
+                name: "Enable syntax highlighting",
+                type: "boolean",
+                value: true
+            }
+        ];
+    }
+
+    /**
+     * @param {string} input
+     * @param {Object[]} args
+     * @returns {html}
+     */
+    run(input, args) {
+        const [convertLinks, enableHighlighting] = args,
+            md = new MarkdownIt({
+                linkify: convertLinks,
+                html: false, // Explicitly disable HTML rendering
+                highlight: function(str, lang) {
+                    if (lang && hljs.getLanguage(lang) && enableHighlighting) {
+                        try {
+                            return hljs.highlight(lang, str).value;
+                        } catch (__) {}
+                    }
+
+                    return "";
+                }
+            }),
+            rendered = md.render(input);
+
+        return `<div style="font-family: var(--primary-font-family)">${rendered}</div>`;
+    }
+
+}
+
+export default RenderMarkdown;

src/core/operations/ResizeImage.mjs

@@ -87,7 +87,7 @@ class ResizeImage extends Operation {
             "Bezier": jimp.RESIZE_BEZIER
         };
 
-        if (!isImage(new Uint8Array(input))) {
+        if (!isImage(input)) {
             throw new OperationError("Invalid file type.");
         }
 

src/core/operations/RotateImage.mjs

@@ -46,7 +46,7 @@ class RotateImage extends Operation {
     async run(input, args) {
         const [degrees] = args;
 
-        if (!isImage(new Uint8Array(input))) {
+        if (!isImage(input)) {
             throw new OperationError("Invalid file type.");
         }
 

src/core/operations/ScanForEmbeddedFiles.mjs

@@ -41,7 +41,7 @@ class ScanForEmbeddedFiles extends Operation {
      * @returns {string}
      */
     run(input, args) {
-        let output = "Scanning data for 'magic bytes' which may indicate embedded files. The following results may be false positives and should not be treat as reliable. Any suffiently long file is likely to contain these magic bytes coincidentally.\n",
+        let output = "Scanning data for 'magic bytes' which may indicate embedded files. The following results may be false positives and should not be treat as reliable. Any sufficiently long file is likely to contain these magic bytes coincidentally.\n",
             numFound = 0;
         const categories = [],
             data = new Uint8Array(input);

src/core/operations/SharpenImage.mjs

@@ -62,7 +62,7 @@ class SharpenImage extends Operation {
     async run(input, args) {
         const [radius, amount, threshold] = args;
 
-        if (!isImage(new Uint8Array(input))){
+        if (!isImage(input)) {
             throw new OperationError("Invalid file type.");
         }
 

src/core/operations/ShowOnMap.mjs

@@ -0,0 +1,113 @@
+/**
+ * @author j433866 [j433866@gmail.com]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation.mjs";
+import {FORMATS, convertCoordinates} from "../lib/ConvertCoordinates.mjs";
+import OperationError from "../errors/OperationError.mjs";
+
+/**
+ * Show on map operation
+ */
+class ShowOnMap extends Operation {
+
+    /**
+     * ShowOnMap constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "Show on map";
+        this.module = "Hashing";
+        this.description = "Displays co-ordinates on a slippy map.<br><br>Co-ordinates will be converted to decimal degrees before being shown on the map.<br><br>Supported formats:<ul><li>Degrees Minutes Seconds (DMS)</li><li>Degrees Decimal Minutes (DDM)</li><li>Decimal Degrees (DD)</li><li>Geohash</li><li>Military Grid Reference System (MGRS)</li><li>Ordnance Survey National Grid (OSNG)</li><li>Universal Transverse Mercator (UTM)</li></ul><br>This operation will not work offline.";
+        this.infoURL = "https://foundation.wikimedia.org/wiki/Maps_Terms_of_Use";
+        this.inputType = "string";
+        this.outputType = "string";
+        this.presentType = "html";
+        this.args = [
+            {
+                name: "Zoom Level",
+                type: "number",
+                value: 13
+            },
+            {
+                name: "Input Format",
+                type: "option",
+                value: ["Auto"].concat(FORMATS)
+            },
+            {
+                name: "Input Delimiter",
+                type: "option",
+                value: [
+                    "Auto",
+                    "Direction Preceding",
+                    "Direction Following",
+                    "\\n",
+                    "Comma",
+                    "Semi-colon",
+                    "Colon"
+                ]
+            }
+        ];
+    }
+
+    /**
+     * @param {string} input
+     * @param {Object[]} args
+     * @returns {string}
+     */
+    run(input, args) {
+        if (input.replace(/\s+/g, "") !== "") {
+            const inFormat = args[1],
+                inDelim = args[2];
+            let latLong;
+            try {
+                latLong = convertCoordinates(input, inFormat, inDelim, "Decimal Degrees", "Comma", "None", 5);
+            } catch (error) {
+                throw new OperationError(error);
+            }
+            latLong = latLong.replace(/[,]$/, "");
+            latLong = latLong.replace(/°/g, "");
+            return latLong;
+        }
+        return input;
+    }
+
+    /**
+     * @param {string} data
+     * @param {Object[]} args
+     * @returns {string}
+     */
+    async present(data, args) {
+        if (data.replace(/\s+/g, "") === "") {
+            data = "0, 0";
+        }
+        const zoomLevel = args[0];
+        const tileUrl = "https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png",
+            tileAttribution = "<a href=\"https://wikimediafoundation.org/wiki/Maps_Terms_of_Use\">Wikimedia maps</a> | &copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
+            leafletUrl = "https://unpkg.com/leaflet@1.5.0/dist/leaflet.js",
+            leafletCssUrl = "https://unpkg.com/leaflet@1.5.0/dist/leaflet.css";
+        return `<link rel="stylesheet" href="${leafletCssUrl}" crossorigin=""/>
+<style>#output-html { white-space: normal; padding: 0; }</style>
+<div id="presentedMap" style="width: 100%; height: 100%;"></div>
+<script type="text/javascript">
+var mapscript = document.createElement('script');
+document.body.appendChild(mapscript);
+mapscript.onload = function() {
+    var presentMap = L.map('presentedMap').setView([${data}], ${zoomLevel});
+    L.tileLayer('${tileUrl}', {
+        attribution: '${tileAttribution}'
+    }).addTo(presentMap);
+
+    L.marker([${data}]).addTo(presentMap)
+        .bindPopup('${data}')
+        .openPopup();
+};
+mapscript.src = "${leafletUrl}";
+</script>`;
+    }
+}
+
+export default ShowOnMap;

src/core/operations/SwapEndianness.mjs

@@ -79,7 +79,7 @@ class SwapEndianness extends Operation {
             const word = data.slice(i, i + wordLength);
 
             // Pad word if too short
-            if (padIncompleteWords && word.length < wordLength){
+            if (padIncompleteWords && word.length < wordLength) {
                 for (j = word.length; j < wordLength; j++) {
                     word.push(0);
                 }

src/core/operations/ToBase64.mjs

@@ -40,7 +40,7 @@ class ToBase64 extends Operation {
      */
     run(input, args) {
         const alphabet = args[0];
-        return toBase64(new Uint8Array(input), alphabet);
+        return toBase64(input, alphabet);
     }
 
     /**

src/core/operations/UNIXTimestampToWindowsFiletime.mjs

@@ -51,7 +51,7 @@ class UNIXTimestampToWindowsFiletime extends Operation {
 
         input = new BigNumber(input);
 
-        if (units === "Seconds (s)"){
+        if (units === "Seconds (s)") {
             input = input.multipliedBy(new BigNumber("10000000"));
         } else if (units === "Milliseconds (ms)") {
             input = input.multipliedBy(new BigNumber("10000"));
@@ -65,7 +65,7 @@ class UNIXTimestampToWindowsFiletime extends Operation {
 
         input = input.plus(new BigNumber("116444736000000000"));
 
-        if (format === "Hex"){
+        if (format === "Hex") {
             return input.toString(16);
         } else {
             return input.toFixed();

src/core/operations/ViewBitPlane.mjs

@@ -0,0 +1,107 @@
+/**
+ * @author Ge0rg3 [georgeomnet+cyberchef@gmail.com]
+ * @copyright Crown Copyright 2019
+ * @license Apache-2.0
+ */
+
+import Operation from "../Operation.mjs";
+import OperationError from "../errors/OperationError.mjs";
+import Utils from "../Utils.mjs";
+import { isImage } from "../lib/FileType.mjs";
+import { toBase64 } from "../lib/Base64.mjs";
+import jimp from "jimp";
+
+/**
+ * View Bit Plane operation
+ */
+class ViewBitPlane extends Operation {
+
+    /**
+     * ViewBitPlane constructor
+     */
+    constructor() {
+        super();
+
+        this.name = "View Bit Plane";
+        this.module = "Image";
+        this.description = "Extracts and displays a bit plane of any given image. These show only a single bit from each pixel, and can be used to hide messages in Steganography.";
+        this.infoURL = "https://wikipedia.org/wiki/Bit_plane";
+        this.inputType = "ArrayBuffer";
+        this.outputType = "ArrayBuffer";
+        this.presentType = "html";
+        this.args = [
+            {
+                name: "Colour",
+                type: "option",
+                value: COLOUR_OPTIONS
+            },
+            {
+                name: "Bit",
+                type: "number",
+                value: 0
+            }
+        ];
+    }
+
+    /**
+     * @param {ArrayBuffer} input
+     * @param {Object[]} args
+     * @returns {ArrayBuffer}
+     */
+    async run(input, args) {
+        if (!isImage(input)) throw new OperationError("Please enter a valid image file.");
+
+        const [colour, bit] = args,
+            parsedImage = await jimp.read(input),
+            width = parsedImage.bitmap.width,
+            height = parsedImage.bitmap.height,
+            colourIndex = COLOUR_OPTIONS.indexOf(colour),
+            bitIndex = 7-bit;
+
+        if (bit < 0 || bit > 7) {
+            throw new OperationError("Error: Bit argument must be between 0 and 7");
+        }
+
+        let pixel, bin, newPixelValue;
+
+        parsedImage.scan(0, 0, width, height, function(x, y, idx) {
+            pixel = this.bitmap.data[idx + colourIndex];
+            bin = Utils.bin(pixel);
+            newPixelValue = 255;
+
+            if (bin.charAt(bitIndex) === "1") newPixelValue = 0;
+
+            for (let i=0; i < 3; i++) {
+                this.bitmap.data[idx + i] = newPixelValue;
+            }
+            this.bitmap.data[idx + 3] = 255;
+
+        });
+
+        const imageBuffer = await parsedImage.getBufferAsync(jimp.AUTO);
+
+        return new Uint8Array(imageBuffer).buffer;
+    }
+
+    /**
+     * Displays the extracted data as an image for web apps.
+     * @param {ArrayBuffer} data
+     * @returns {html}
+     */
+    present(data) {
+        if (!data.length) return "";
+        const type = isImage(data);
+
+        return `<img src="data:${type};base64,${toBase64(data)}">`;
+    }
+
+}
+
+const COLOUR_OPTIONS = [
+    "Red",
+    "Green",
+    "Blue",
+    "Alpha"
+];
+
+export default ViewBitPlane;

src/core/operations/WindowsFiletimeToUNIXTimestamp.mjs

@@ -57,7 +57,7 @@ class WindowsFiletimeToUNIXTimestamp extends Operation {
 
         input = input.minus(new BigNumber("116444736000000000"));
 
-        if (units === "Seconds (s)"){
+        if (units === "Seconds (s)") {
             input = input.dividedBy(new BigNumber("10000000"));
         } else if (units === "Milliseconds (ms)") {
             input = input.dividedBy(new BigNumber("10000"));

src/node/NodeRecipe.mjs

@@ -43,11 +43,13 @@ class NodeRecipe {
             } else {
                 throw new TypeError("Inputted function not a Chef operation.");
             }
-        // CASE: op with configuration
-        } else if (ing.op && ing.args) {
-            // Return op and args pair for opList item.
+        // CASE: op, maybe with configuration
+        } else if (ing.op) {
             const sanitisedOp = this._validateIngredient(ing.op);
-            return {op: sanitisedOp, args: ing.args};
+            if (ing.args) {
+                return {op: sanitisedOp, args: ing.args};
+            }
+            return sanitisedOp;
         } else {
             throw new TypeError("Recipe can only contain function names or functions");
         }

src/node/api.mjs

@@ -295,7 +295,7 @@ export function help(input) {
  * bake [Wrapped] - Perform an array of operations on some input.
  * @returns {Function}
  */
-export function bake(){
+export function bake() {
 
     /**
      * bake

src/node/config/scripts/generateNodeIndex.mjs

@@ -41,6 +41,7 @@ let code = `/**
 import NodeDish from "./NodeDish.mjs";
 import { _wrap, help, bake, _explainExludedFunction } from "./api.mjs";
 import File from "./File.mjs";
+import { OperationError, DishError, ExcludedOperationError } from "../core/errors/index";
 import {
     // import as core_ to avoid name clashes after wrap.
 `;
@@ -115,6 +116,9 @@ Object.keys(operations).forEach((op) => {
 code += "    NodeDish as Dish,\n";
 code += "    prebaked as bake,\n";
 code += "    help,\n";
+code += "    OperationError,\n";
+code += "    ExcludedOperationError,\n";
+code += "    DishError,\n";
 code += "};\n";
 
 

src/web/App.mjs

@@ -4,7 +4,7 @@
  * @license Apache-2.0
  */
 
-import Utils from "../core/Utils";
+import Utils, { debounce } from "../core/Utils";
 import {fromBase64} from "../core/lib/Base64";
 import Manager from "./Manager";
 import HTMLCategory from "./HTMLCategory";
@@ -41,7 +41,6 @@ class App {
         this.autoBakePause = false;
         this.progress      = 0;
         this.ingId         = 0;
-        this.timeouts      = {};
     }
 
 
@@ -295,7 +294,7 @@ class App {
             minSize: minimise ? [0, 0, 0] : [240, 310, 450],
             gutterSize: 4,
             expandToMin: true,
-            onDrag: this.debounce(function() {
+            onDrag: debounce(function() {
                 this.manager.recipe.adjustWidth();
                 this.manager.input.calcMaxTabs();
                 this.manager.output.calcMaxTabs();
@@ -633,7 +632,7 @@ class App {
      * Pops up a message to the user and writes it to the console log.
      *
      * @param {string} str - The message to display (HTML supported)
-     * @param {number} timeout - The number of milliseconds before the alert closes automatically
+     * @param {number} [timeout=0] - The number of milliseconds before the alert closes automatically
      *     0 for never (until the user closes it)
      * @param {boolean} [silent=false] - Don't show the message in the popup, only print it to the
      *     console
@@ -646,14 +645,12 @@ class App {
      * // Pops up a box with the message "Happy Christmas!" that will disappear after 5 seconds.
      * this.alert("Happy Christmas!", 5000);
      */
-    alert(str, timeout, silent) {
+    alert(str, timeout=0, silent=false) {
         const time = new Date();
 
         log.info("[" + time.toLocaleString() + "] " + str);
         if (silent) return;
 
-        timeout = timeout || 0;
-
         this.currentSnackbar = $.snackbar({
             content: str,
             timeout: timeout,
@@ -670,18 +667,22 @@ class App {
      *
      * @param {string} title - The title of the box
      * @param {string} body - The question (HTML supported)
+     * @param {string} accept - The text of the accept button
+     * @param {string} reject - The text of the reject button
      * @param {function} callback - A function accepting one boolean argument which handles the
      *   response e.g. function(answer) {...}
      * @param {Object} [scope=this] - The object to bind to the callback function
      *
      * @example
      * // Pops up a box asking if the user would like a cookie. Prints the answer to the console.
-     * this.confirm("Question", "Would you like a cookie?", function(answer) {console.log(answer);});
+     * this.confirm("Question", "Would you like a cookie?", "Yes", "No", function(answer) {console.log(answer);});
      */
-    confirm(title, body, callback, scope) {
+    confirm(title, body, accept, reject, callback, scope) {
         scope = scope || this;
         document.getElementById("confirm-title").innerHTML = title;
         document.getElementById("confirm-body").innerHTML = body;
+        document.getElementById("confirm-yes").innerText = accept;
+        document.getElementById("confirm-no").innerText = reject;
         document.getElementById("confirm-modal").style.display = "block";
 
         this.confirmClosed = false;
@@ -694,9 +695,14 @@ class App {
                 callback.bind(scope)(true);
                 $("#confirm-modal").modal("hide");
             }.bind(this))
+            .one("click", "#confirm-no", function() {
+                this.confirmClosed = true;
+                callback.bind(scope)(false);
+            }.bind(this))
             .one("hide.bs.modal", function(e) {
-                if (!this.confirmClosed)
-                    callback.bind(scope)(false);
+                if (!this.confirmClosed) {
+                    callback.bind(scope)(undefined);
+                }
                 this.confirmClosed = true;
             }.bind(this));
     }
@@ -716,6 +722,7 @@ class App {
         this.updateTitle(false, null, true);
     }
 
+
     /**
      * Update the page title to contain the new recipe
      *
@@ -759,29 +766,6 @@ class App {
         this.loadURIParams();
     }
 
-
-    /**
-     * Debouncer to stop functions from being executed multiple times in a
-     * short space of time
-     * https://davidwalsh.name/javascript-debounce-function
-     *
-     * @param {function} func - The function to be executed after the debounce time
-     * @param {number} wait - The time (ms) to wait before executing the function
-     * @param {string} id - Unique ID to reference the timeout for the function
-     * @param {object} scope - The object to bind to the debounced function
-     * @param {array} args - Array of arguments to be passed to func
-     * @returns {function}
-     */
-    debounce(func, wait, id, scope, args) {
-        return function() {
-            const later = function() {
-                func.apply(scope, args);
-            };
-            clearTimeout(this.timeouts[id]);
-            this.timeouts[id] = setTimeout(later, wait);
-        }.bind(this);
-    }
-
 }
 
 export default App;

src/web/Manager.mjs

@@ -224,7 +224,7 @@ class Manager {
         document.getElementById("options").addEventListener("click", this.options.optionsClick.bind(this.options));
         document.getElementById("reset-options").addEventListener("click", this.options.resetOptionsClick.bind(this.options));
         this.addDynamicListener(".option-item input[type=checkbox]", "change", this.options.switchChange, this.options);
-        this.addDynamicListener(".option-item input[type=checkbox]", "change", this.options.setWordWrap, this.options);
+        this.addDynamicListener(".option-item input[type=checkbox]#wordWrap", "change", this.options.setWordWrap, this.options);
         this.addDynamicListener(".option-item input[type=checkbox]#useMetaKey", "change", this.bindings.updateKeybList, this.bindings);
         this.addDynamicListener(".option-item input[type=number]", "keyup", this.options.numberChange, this.options);
         this.addDynamicListener(".option-item input[type=number]", "change", this.options.numberChange, this.options);

src/web/html/index.html

@@ -123,9 +123,9 @@
                 document.getElementById("preloader-error").innerHTML =
                     "CyberChef encountered an error while loading.<br><br>" +
                     "The following browser versions are supported:" +
-                    "<ul><li>Google Chrome 40+</li><li>Mozilla Firefox 35+</li><li>Microsoft Edge 14+</li></ul>" +
+                    "<ul><li>Google Chrome 50+</li><li>Mozilla Firefox 38+</li></ul>" +
                     "Your user agent is:<br>" + escapeHtml(navigator.userAgent) + "<br><br>" +
-                    "If your browser is supported, please <a href='https://github.com/gchq/CyberChef/issues/new'>" +
+                    "If your browser is supported, please <a href='https://github.com/gchq/CyberChef/issues/new/choose'>" +
                     "raise an issue</a> including the following details:<br><br>" +
                     "<pre>" + escapeHtml(msg) + "</pre>";
             };
@@ -563,16 +563,23 @@
                         <div class="checkbox option-item">
                             <label for="imagePreview">
                                 <input type="checkbox" option="imagePreview" id="imagePreview">
-                                Render a preview of the input if it's detected to be an image.
+                                Render a preview of the input if it's detected to be an image
                             </label>
                         </div>
 
                         <div class="checkbox option-item">
-                                <label for="syncTabs">
-                                    <input type="checkbox" option="syncTabs" id="syncTabs">
-                                    Keep the current tab in sync between the input and output.
-                                </label>
-                            </div>
+                            <label for="syncTabs">
+                                <input type="checkbox" option="syncTabs" id="syncTabs">
+                                Keep the current tab in sync between the input and output
+                            </label>
+                        </div>
+
+                        <div class="checkbox option-item">
+                            <label for="preserveCR" data-toggle="tooltip" data-placement="right" data-html="true" title="As HTML textareas don't support carriage returns, editing input must be turned off to preserve them.<br><br>When this option is enabled, editing is disabled for pasted text that contains carriage returns. Otherwise, editing will remain enabled but carriage returns will not be preserved.">
+                                <input type="checkbox" option="preserveCR" id="preserveCR">
+                                Preserve carriage returns when pasting an input
+                            </label>
+                        </div>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary" id="reset-options">Reset options to default</button>
@@ -702,7 +709,7 @@
                                 <br>
                                 <pre id="report-bug-info"></pre>
                                 <br>
-                                <a class="btn btn-primary" href="https://github.com/gchq/CyberChef/issues/new" role="button">Raise issue on GitHub</a>
+                                <a class="btn btn-primary" href="https://github.com/gchq/CyberChef/issues/new/choose" role="button">Raise issue on GitHub</a>
                             </div>
                             <div role="tabpanel" class="tab-pane" id="about" style="padding: 20px;">
                                 <h5><strong>What</strong></h5>

src/web/index.js

@@ -53,7 +53,9 @@ function main() {
         logLevel:            "info",
         autoMagic:           true,
         imagePreview:        true,
-        syncTabs:            true
+        syncTabs:            true,
+        preserveCR:          true,
+        userSetCR:           false
     };
 
     document.removeEventListener("DOMContentLoaded", main, false);

src/web/static/sitemap.mjs

@@ -1,4 +1,4 @@
-import sm from "sitemap";
+import Sitemap from "sitemap";
 import OperationConfig from "../../core/config/OperationConfig.json";
 
 
@@ -10,7 +10,7 @@ import OperationConfig from "../../core/config/OperationConfig.json";
  * @license Apache-2.0
  */
 
-const sitemap = sm.createSitemap({
+const sitemap = Sitemap.createSitemap({
     hostname: "https://gchq.github.io/CyberChef",
 });
 

src/web/stylesheets/layout/_io.css

@@ -337,6 +337,29 @@
     fill: var(--primary-font-colour);
 }
 
+.pulse {
+    box-shadow: 0 0 0 0 rgba(90, 153, 212, .3);
+    animation: pulse 1.5s 1;
+}
+
+.pulse:hover {
+    animation-play-state: paused;
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+    70% {
+        transform: scale(1.1);
+        box-shadow: 0 0 0 20px rgba(90, 153, 212, 0);
+    }
+    100% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
+    }
+}
+
 #input-find-options,
 #output-find-options {
     display: flex;

src/web/stylesheets/layout/_structure.css

@@ -39,10 +39,16 @@ div#output {
 
 .split {
     box-sizing: border-box;
-    overflow: auto;
+    /* overflow: auto;
+    Removed to enable Background Magic button pulse to overflow.
+    Replace this rule if it seems to be causing problems. */
     position: relative;
 }
 
+#operations.split {
+    overflow: auto;
+}
+
 .split.split-horizontal, .gutter.gutter-horizontal {
     height: 100%;
     float: left;

src/web/waiters/BackgroundWorkerWaiter.mjs

@@ -4,7 +4,7 @@
  * @license Apache-2.0
  */
 
-import ChefWorker from "worker-loader?inline&fallback=false!../../core/ChefWorker";
+import ChefWorker from "worker-loader?inline&fallback=false!../../core/ChefWorker.js";
 
 /**
  * Waiter to handle conversations with a ChefWorker in the background.

src/web/waiters/InputWaiter.mjs

@@ -5,9 +5,9 @@
  * @license Apache-2.0
  */
 
-import LoaderWorker from "worker-loader?inline&fallback=false!../workers/LoaderWorker";
-import InputWorker from "worker-loader?inline&fallback=false!../workers/InputWorker";
-import Utils from "../../core/Utils.mjs";
+import LoaderWorker from "worker-loader?inline&fallback=false!../workers/LoaderWorker.js";
+import InputWorker from "worker-loader?inline&fallback=false!../workers/InputWorker.mjs";
+import Utils, { debounce } from "../../core/Utils.mjs";
 import { toBase64 } from "../../core/lib/Base64.mjs";
 import { isImage } from "../../core/lib/FileType.mjs";
 
@@ -222,8 +222,6 @@ class InputWaiter {
         if (Object.prototype.hasOwnProperty.call(r, "progress") &&
             Object.prototype.hasOwnProperty.call(r, "inputNum")) {
             this.manager.tabs.updateInputTabProgress(r.inputNum, r.progress, 100);
-        } else if (Object.prototype.hasOwnProperty.call(r, "fileBuffer")) {
-            this.manager.tabs.updateInputTabProgress(r.inputNum, 100, 100);
         }
 
         const transferable = Object.prototype.hasOwnProperty.call(r, "fileBuffer") ? [r.fileBuffer] : undefined;
@@ -272,7 +270,7 @@ class InputWaiter {
                 this.showLoadingInfo(r.data, true);
                 break;
             case "setInput":
-                this.app.debounce(this.set, 50, "setInput", this, [r.data.inputObj, r.data.silent])();
+                debounce(this.set, 50, "setInput", this, [r.data.inputObj, r.data.silent])();
                 break;
             case "inputAdded":
                 this.inputAdded(r.data.changeTab, r.data.inputNum);
@@ -305,6 +303,9 @@ class InputWaiter {
             case "removeChefWorker":
                 this.removeChefWorker();
                 break;
+            case "fileLoaded":
+                this.fileLoaded(r.data.inputNum);
+                break;
             default:
                 log.error(`Unknown action ${r.action}.`);
         }
@@ -315,7 +316,7 @@ class InputWaiter {
      */
     bakeAll() {
         this.app.progress = 0;
-        this.app.debounce(this.manager.controls.toggleBakeButtonFunction, 20, "toggleBakeButton", this, ["loading"]);
+        debounce(this.manager.controls.toggleBakeButtonFunction, 20, "toggleBakeButton", this, ["loading"]);
         this.inputWorker.postMessage({
             action: "bakeAll"
         });
@@ -331,7 +332,7 @@ class InputWaiter {
      * @param {number} inputData.size - The size in bytes of the input file
      * @param {string} inputData.type - The MIME type of the input file
      * @param {number} inputData.progress - The load progress of the input file
-     * @param {boolean} [silent=false] - If true, fires the manager statechange event
+     * @param {boolean} [silent=false] - If false, fires the manager statechange event
      */
     async set(inputData, silent=false) {
         return new Promise(function(resolve, reject) {
@@ -373,7 +374,7 @@ class InputWaiter {
 
                 if (!silent) window.dispatchEvent(this.manager.statechange);
             } else {
-                this.setFile(inputData);
+                this.setFile(inputData, silent);
             }
 
         }.bind(this));
@@ -389,8 +390,9 @@ class InputWaiter {
      * @param {number} inputData.size - The size in bytes of the input file
      * @param {string} inputData.type - The MIME type of the input file
      * @param {number} inputData.progress - The load progress of the input file
+     * @param {boolean} [silent=true] - If false, fires the manager statechange event
      */
-    setFile(inputData) {
+    setFile(inputData, silent=true) {
         const activeTab = this.manager.tabs.getActiveInputTab();
         if (inputData.inputNum !== activeTab) return;
 
@@ -414,6 +416,30 @@ class InputWaiter {
 
         this.setInputInfo(inputData.size, null);
         this.displayFilePreview(inputData);
+
+        if (!silent) window.dispatchEvent(this.manager.statechange);
+    }
+
+    /**
+     * Update file details when a file completes loading
+     *
+     * @param {number} inputNum - The inputNum of the input which has finished loading
+     */
+    fileLoaded(inputNum) {
+        this.manager.tabs.updateInputTabProgress(inputNum, 100, 100);
+
+        const activeTab = this.manager.tabs.getActiveInputTab();
+        if (activeTab !== inputNum) return;
+
+        this.inputWorker.postMessage({
+            action: "setInput",
+            data: {
+                inputNum: inputNum,
+                silent: false
+            }
+        });
+
+        this.updateFileProgress(inputNum, 100);
     }
 
     /**
@@ -495,19 +521,6 @@ class InputWaiter {
             fileLoaded.textContent = progress + "%";
             fileLoaded.style.color = "";
         }
-
-        if (progress === 100 && progress !== oldProgress) {
-            // Don't set the input if the progress hasn't changed
-            this.inputWorker.postMessage({
-                action: "setInput",
-                data: {
-                    inputNum: inputNum,
-                    silent: false
-                }
-            });
-            window.dispatchEvent(this.manager.statechange);
-
-        }
     }
 
     /**
@@ -668,7 +681,7 @@ class InputWaiter {
      * @param {event} e
      */
     debounceInputChange(e) {
-        this.app.debounce(this.inputChange, 50, "inputChange", this, [e])();
+        debounce(this.inputChange, 50, "inputChange", this, [e])();
     }
 
     /**
@@ -711,33 +724,50 @@ class InputWaiter {
      *
      * @param {event} e
      */
-    inputPaste(e) {
-        const pastedData = e.clipboardData.getData("Text");
-        if (pastedData.length < (this.app.options.ioDisplayThreshold * 1024)) {
-            // Pasting normally fires the inputChange() event before
-            // changing the value, so instead change it here ourselves
-            // and manually fire inputChange()
-            e.preventDefault();
-            const inputText = document.getElementById("input-text");
-            const selStart = inputText.selectionStart;
-            const selEnd = inputText.selectionEnd;
-            const startVal = inputText.value.slice(0, selStart);
-            const endVal = inputText.value.slice(selEnd);
-
-            inputText.value = startVal + pastedData + endVal;
-            inputText.setSelectionRange(selStart + pastedData.length, selStart + pastedData.length);
-            this.debounceInputChange(e);
-        } else {
-            e.preventDefault();
-            e.stopPropagation();
+    async inputPaste(e) {
+        e.preventDefault();
+        e.stopPropagation();
 
+        const self = this;
+        /**
+         * Triggers the input file/binary data overlay
+         *
+         * @param {string} pastedData
+         */
+        function triggerOverlay(pastedData) {
             const file = new File([pastedData], "PastedData", {
                 type: "text/plain",
                 lastModified: Date.now()
             });
 
-            this.loadUIFiles([file]);
+            self.loadUIFiles([file]);
+        }
+
+        const pastedData = e.clipboardData.getData("Text");
+        const inputText = document.getElementById("input-text");
+        const selStart = inputText.selectionStart;
+        const selEnd = inputText.selectionEnd;
+        const startVal = inputText.value.slice(0, selStart);
+        const endVal = inputText.value.slice(selEnd);
+        const val = startVal + pastedData + endVal;
+
+        if (val.length >= (this.app.options.ioDisplayThreshold * 1024)) {
+            // Data too large to display, use overlay
+            triggerOverlay(val);
             return false;
+        } else if (await this.preserveCarriageReturns(val)) {
+            // Data contains a carriage return and the user doesn't wish to edit it, use overlay
+            // We check this in a separate condition to make sure it is not run unless absolutely
+            // necessary.
+            triggerOverlay(val);
+            return false;
+        } else {
+            // Pasting normally fires the inputChange() event before
+            // changing the value, so instead change it here ourselves
+            // and manually fire inputChange()
+            inputText.value = val;
+            inputText.setSelectionRange(selStart + pastedData.length, selStart + pastedData.length);
+            this.debounceInputChange(e);
         }
     }
 
@@ -815,6 +845,46 @@ class InputWaiter {
         }
     }
 
+    /**
+     * Checks if an input contains carriage returns.
+     * If a CR is detected, checks if the preserve CR option has been set,
+     * and if not, asks the user for their preference.
+     *
+     * @param {string} input - The input to be checked
+     * @returns {boolean} - If true, the input contains a CR which should be
+     *      preserved, so display an overlay so it can't be edited
+     */
+    async preserveCarriageReturns(input) {
+        if (input.indexOf("\r") < 0) return false;
+
+        const optionsStr = "This behaviour can be changed in the <a href='#' onclick='document.getElementById(\"options\").click()'>Options pane</a>";
+        if (!this.app.options.userSetCR) {
+            // User has not set a CR preference yet
+            let preserve = await new Promise(function(resolve, reject) {
+                this.app.confirm(
+                    "Carriage Return Detected",
+                    "A <a href='https://wikipedia.org/wiki/Carriage_return'>carriage return</a> (<code>\\r</code>, <code>0x0d</code>) was detected in your input. As HTML textareas <a href='https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element'>can't display carriage returns</a>, editing must be turned off to preserve them. <br>Alternatively, you can enable editing but your carriage returns will not be preserved.<br><br>This preference will be saved but can be toggled in the options pane.",
+                    "Preserve Carriage Returns",
+                    "Enable Editing", resolve, this);
+            }.bind(this));
+            if (preserve === undefined) {
+                // The confirm pane was closed without picking a specific choice
+                this.app.alert(`Not preserving carriage returns.\n${optionsStr}`, 5000);
+                preserve = false;
+            }
+            this.manager.options.updateOption("preserveCR", preserve);
+            this.manager.options.updateOption("userSetCR", true);
+        } else {
+            if (this.app.options.preserveCR) {
+                this.app.alert(`A carriage return (\\r, 0x0d) was detected in your input, so editing has been disabled to preserve it.<br>${optionsStr}`, 10000);
+            } else {
+                this.app.alert(`A carriage return (\\r, 0x0d) was detected in your input. Editing is remaining enabled, but carriage returns will not be preserved.<br>${optionsStr}`, 10000);
+            }
+        }
+
+        return this.app.options.preserveCR;
+    }
+
     /**
      * Load files from the UI into the inputWorker
      *

src/web/waiters/OptionsWaiter.mjs

@@ -1,174 +1,180 @@
 /**
- * Waiter to handle events related to the CyberChef options.
- *
  * @author n1474335 [n1474335@gmail.com]
  * @copyright Crown Copyright 2016
  * @license Apache-2.0
- *
- * @constructor
- * @param {App} app - The main view object for CyberChef.
  */
-const OptionsWaiter = function(app, manager) {
-    this.app = app;
-    this.manager = manager;
-};
-
 
 /**
- * Loads options and sets values of switches and inputs to match them.
- *
- * @param {Object} options
+ * Waiter to handle events related to the CyberChef options.
  */
-OptionsWaiter.prototype.load = function(options) {
-    for (const option in options) {
-        this.app.options[option] = options[option];
+class OptionsWaiter {
+
+    /**
+     * OptionsWaiter constructor.
+     *
+     * @param {App} app - The main view object for CyberChef.
+     * @param {Manager} manager - The CyberChef event manager.
+     */
+    constructor(app, manager) {
+        this.app = app;
+        this.manager = manager;
     }
 
-    // Set options to match object
-    const cboxes = document.querySelectorAll("#options-body input[type=checkbox]");
-    let i;
-    for (i = 0; i < cboxes.length; i++) {
-        cboxes[i].checked = this.app.options[cboxes[i].getAttribute("option")];
-    }
+    /**
+     * Loads options and sets values of switches and inputs to match them.
+     *
+     * @param {Object} options
+     */
+    load(options) {
+        for (const option in options) {
+            this.app.options[option] = options[option];
+        }
 
-    const nboxes = document.querySelectorAll("#options-body input[type=number]");
-    for (i = 0; i < nboxes.length; i++) {
-        nboxes[i].value = this.app.options[nboxes[i].getAttribute("option")];
-        nboxes[i].dispatchEvent(new CustomEvent("change", {bubbles: true}));
-    }
+        // Set options to match object
+        const cboxes = document.querySelectorAll("#options-body input[type=checkbox]");
+        let i;
+        for (i = 0; i < cboxes.length; i++) {
+            cboxes[i].checked = this.app.options[cboxes[i].getAttribute("option")];
+        }
 
-    const selects = document.querySelectorAll("#options-body select");
-    for (i = 0; i < selects.length; i++) {
-        const val = this.app.options[selects[i].getAttribute("option")];
-        if (val) {
-            selects[i].value = val;
-            selects[i].dispatchEvent(new CustomEvent("change", {bubbles: true}));
-        } else {
-            selects[i].selectedIndex = 0;
+        const nboxes = document.querySelectorAll("#options-body input[type=number]");
+        for (i = 0; i < nboxes.length; i++) {
+            nboxes[i].value = this.app.options[nboxes[i].getAttribute("option")];
+            nboxes[i].dispatchEvent(new CustomEvent("change", {bubbles: true}));
+        }
+
+        const selects = document.querySelectorAll("#options-body select");
+        for (i = 0; i < selects.length; i++) {
+            const val = this.app.options[selects[i].getAttribute("option")];
+            if (val) {
+                selects[i].value = val;
+                selects[i].dispatchEvent(new CustomEvent("change", {bubbles: true}));
+            } else {
+                selects[i].selectedIndex = 0;
+            }
         }
     }
-};
 
 
-/**
- * Handler for options click events.
- * Dispays the options pane.
- *
- * @param {event} e
- */
-OptionsWaiter.prototype.optionsClick = function(e) {
-    e.preventDefault();
-    $("#options-modal").modal();
-};
-
-
-/**
- * Handler for reset options click events.
- * Resets options back to their default values.
- */
-OptionsWaiter.prototype.resetOptionsClick = function() {
-    this.load(this.app.doptions);
-};
-
-
-/**
- * Handler for switch change events.
- * Modifies the option state and saves it to local storage.
- *
- * @param {event} e
- */
-OptionsWaiter.prototype.switchChange = function(e) {
-    const el = e.target;
-    const option = el.getAttribute("option");
-    const state = el.checked;
-
-    log.debug(`Setting ${option} to ${state}`);
-    this.app.options[option] = state;
-
-    if (this.app.isLocalStorageAvailable())
-        localStorage.setItem("options", JSON.stringify(this.app.options));
-};
-
-
-/**
- * Handler for number change events.
- * Modifies the option value and saves it to local storage.
- *
- * @param {event} e
- */
-OptionsWaiter.prototype.numberChange = function(e) {
-    const el = e.target;
-    const option = el.getAttribute("option");
-    const val = parseInt(el.value, 10);
-
-    log.debug(`Setting ${option} to ${val}`);
-    this.app.options[option] = val;
-
-    if (this.app.isLocalStorageAvailable())
-        localStorage.setItem("options", JSON.stringify(this.app.options));
-};
-
-
-/**
- * Handler for select change events.
- * Modifies the option value and saves it to local storage.
- *
- * @param {event} e
- */
-OptionsWaiter.prototype.selectChange = function(e) {
-    const el = e.target;
-    const option = el.getAttribute("option");
-
-    log.debug(`Setting ${option} to ${el.value}`);
-    this.app.options[option] = el.value;
-
-    if (this.app.isLocalStorageAvailable())
-        localStorage.setItem("options", JSON.stringify(this.app.options));
-};
-
-
-/**
- * Sets or unsets word wrap on the input and output depending on the wordWrap option value.
- */
-OptionsWaiter.prototype.setWordWrap = function() {
-    document.getElementById("input-text").classList.remove("word-wrap");
-    document.getElementById("output-text").classList.remove("word-wrap");
-    document.getElementById("output-html").classList.remove("word-wrap");
-    document.getElementById("input-highlighter").classList.remove("word-wrap");
-    document.getElementById("output-highlighter").classList.remove("word-wrap");
-
-    if (!this.app.options.wordWrap) {
-        document.getElementById("input-text").classList.add("word-wrap");
-        document.getElementById("output-text").classList.add("word-wrap");
-        document.getElementById("output-html").classList.add("word-wrap");
-        document.getElementById("input-highlighter").classList.add("word-wrap");
-        document.getElementById("output-highlighter").classList.add("word-wrap");
+    /**
+     * Handler for options click events.
+     * Dispays the options pane.
+     *
+     * @param {event} e
+     */
+    optionsClick(e) {
+        e.preventDefault();
+        $("#options-modal").modal();
     }
-};
 
 
-/**
- * Changes the theme by setting the class of the <html> element.
- *
- * @param {Event} e
- */
-OptionsWaiter.prototype.themeChange = function (e) {
-    const themeClass = e.target.value;
-
-    document.querySelector(":root").className = themeClass;
-};
+    /**
+     * Handler for reset options click events.
+     * Resets options back to their default values.
+     */
+    resetOptionsClick() {
+        this.load(this.app.doptions);
+    }
 
 
-/**
- * Changes the console logging level.
- *
- * @param {Event} e
- */
-OptionsWaiter.prototype.logLevelChange = function (e) {
-    const level = e.target.value;
-    log.setLevel(level, false);
-    this.manager.worker.setLogLevel();
-    this.manager.input.setLogLevel();
-};
+    /**
+     * Handler for switch change events.
+     *
+     * @param {event} e
+     */
+    switchChange(e) {
+        const el = e.target;
+        const option = el.getAttribute("option");
+        const state = el.checked;
+
+        this.updateOption(option, state);
+    }
+
+
+    /**
+     * Handler for number change events.
+     *
+     * @param {event} e
+     */
+    numberChange(e) {
+        const el = e.target;
+        const option = el.getAttribute("option");
+        const val = parseInt(el.value, 10);
+
+        this.updateOption(option, val);
+    }
+
+
+    /**
+     * Handler for select change events.
+     *
+     * @param {event} e
+     */
+    selectChange(e) {
+        const el = e.target;
+        const option = el.getAttribute("option");
+
+        this.updateOption(option, el.value);
+    }
+
+    /**
+     * Modifies an option value and saves it to local storage.
+     *
+     * @param {string} option - The option to be updated
+     * @param {string|number|boolean} value - The new value of the option
+     */
+    updateOption(option, value) {
+        log.debug(`Setting ${option} to ${value}`);
+        this.app.options[option] = value;
+
+        if (this.app.isLocalStorageAvailable())
+            localStorage.setItem("options", JSON.stringify(this.app.options));
+    }
+
+
+    /**
+     * Sets or unsets word wrap on the input and output depending on the wordWrap option value.
+     */
+    setWordWrap() {
+        document.getElementById("input-text").classList.remove("word-wrap");
+        document.getElementById("output-text").classList.remove("word-wrap");
+        document.getElementById("output-html").classList.remove("word-wrap");
+        document.getElementById("input-highlighter").classList.remove("word-wrap");
+        document.getElementById("output-highlighter").classList.remove("word-wrap");
+
+        if (!this.app.options.wordWrap) {
+            document.getElementById("input-text").classList.add("word-wrap");
+            document.getElementById("output-text").classList.add("word-wrap");
+            document.getElementById("output-html").classList.add("word-wrap");
+            document.getElementById("input-highlighter").classList.add("word-wrap");
+            document.getElementById("output-highlighter").classList.add("word-wrap");
+        }
+    }
+
+
+    /**
+     * Changes the theme by setting the class of the <html> element.
+     *
+     * @param {Event} e
+     */
+    themeChange(e) {
+        const themeClass = e.target.value;
+
+        document.querySelector(":root").className = themeClass;
+    }
+
+
+    /**
+     * Changes the console logging level.
+     *
+     * @param {Event} e
+     */
+    logLevelChange(e) {
+        const level = e.target.value;
+        log.setLevel(level, false);
+        this.manager.worker.setLogLevel();
+        this.manager.input.setLogLevel();
+    }
+}
 
 export default OptionsWaiter;

src/web/waiters/OutputWaiter.mjs

@@ -5,10 +5,10 @@
  * @license Apache-2.0
  */
 
-import Utils from "../../core/Utils.mjs";
+import Utils, { debounce } from "../../core/Utils.mjs";
 import Dish from "../../core/Dish.mjs";
 import FileSaver from "file-saver";
-import ZipWorker from "worker-loader?inline&fallback=false!../workers/ZipWorker";
+import ZipWorker from "worker-loader?inline&fallback=false!../workers/ZipWorker.mjs";
 
 /**
   * Waiter to handle events related to the output
@@ -217,6 +217,9 @@ class OutputWaiter {
      */
     removeAllOutputs() {
         this.outputs = {};
+
+        this.resetSwitch();
+
         const tabsList = document.getElementById("output-tabs");
         const tabsListChildren = tabsList.children;
 
@@ -366,7 +369,7 @@ class OutputWaiter {
                 }
 
                 this.setOutputInfo(length, lines, output.data.duration);
-                this.backgroundMagic();
+                debounce(this.backgroundMagic, 50, "backgroundMagic", this, [])();
             }
         }.bind(this));
     }
@@ -516,9 +519,10 @@ class OutputWaiter {
             this.app.alert("Could not find any output data to download. Has this output been baked?", 3000);
             return;
         }
-        let fileName = window.prompt("Please enter a filename: ", "download.dat");
+        const fileName = window.prompt("Please enter a filename: ", "download.dat");
 
-        if (fileName === null) fileName = "download.dat";
+        // Assume if the user clicks cancel they don't want to download
+        if (fileName === null) return;
 
         const data = await dish.get(Dish.ARRAY_BUFFER),
             file = new File([data], fileName);
@@ -529,12 +533,22 @@ class OutputWaiter {
      * Handler for save all click event
      * Saves all outputs to a single archvie file
      */
-    saveAllClick() {
+    async saveAllClick() {
         const downloadButton = document.getElementById("save-all-to-file");
         if (downloadButton.firstElementChild.innerHTML === "archive") {
             this.downloadAllFiles();
-        } else if (window.confirm("Cancel zipping of outputs?")) {
-            this.terminateZipWorker();
+        } else {
+            const cancel = await new Promise(function(resolve, reject) {
+                this.app.confirm(
+                    "Cancel zipping?",
+                    "The outputs are currently being zipped for download.<br>Cancel zipping?",
+                    "Continue zipping",
+                    "Cancel zipping",
+                    resolve, this);
+            }.bind(this));
+            if (!cancel) {
+                this.terminateZipWorker();
+            }
         }
     }
 
@@ -544,57 +558,61 @@ class OutputWaiter {
      * be zipped for download
      */
     async downloadAllFiles() {
-        return new Promise(resolve => {
-            const inputNums = Object.keys(this.outputs);
-            for (let i = 0; i < inputNums.length; i++) {
-                const iNum = inputNums[i];
-                if (this.outputs[iNum].status !== "baked" ||
-                this.outputs[iNum].bakeId !== this.manager.worker.bakeId) {
-                    if (window.confirm("Not all outputs have been baked yet. Continue downloading outputs?")) {
-                        break;
-                    } else {
-                        return;
-                    }
+        const inputNums = Object.keys(this.outputs);
+        for (let i = 0; i < inputNums.length; i++) {
+            const iNum = inputNums[i];
+            if (this.outputs[iNum].status !== "baked" ||
+            this.outputs[iNum].bakeId !== this.manager.worker.bakeId) {
+                const continueDownloading = await new Promise(function(resolve, reject) {
+                    this.app.confirm(
+                        "Incomplete outputs",
+                        "Not all outputs have been baked yet. Continue downloading outputs?",
+                        "Download", "Cancel", resolve, this);
+                }.bind(this));
+                if (continueDownloading) {
+                    break;
+                } else {
+                    return;
                 }
             }
+        }
 
-            let fileName = window.prompt("Please enter a filename: ", "download.zip");
+        let fileName = window.prompt("Please enter a filename: ", "download.zip");
 
-            if (fileName === null || fileName === "") {
-                // Don't zip the files if there isn't a filename
-                this.app.alert("No filename was specified.", 3000);
-                return;
-            }
+        if (fileName === null || fileName === "") {
+            // Don't zip the files if there isn't a filename
+            this.app.alert("No filename was specified.", 3000);
+            return;
+        }
 
-            if (!fileName.match(/.zip$/)) {
-                fileName += ".zip";
-            }
+        if (!fileName.match(/.zip$/)) {
+            fileName += ".zip";
+        }
 
-            let fileExt = window.prompt("Please enter a file extension for the files, or leave blank to detect automatically.", "");
+        let fileExt = window.prompt("Please enter a file extension for the files, or leave blank to detect automatically.", "");
 
-            if (fileExt === null) fileExt = "";
+        if (fileExt === null) fileExt = "";
 
-            if (this.zipWorker !== null) {
-                this.terminateZipWorker();
-            }
+        if (this.zipWorker !== null) {
+            this.terminateZipWorker();
+        }
 
-            const downloadButton = document.getElementById("save-all-to-file");
+        const downloadButton = document.getElementById("save-all-to-file");
 
-            downloadButton.classList.add("spin");
-            downloadButton.title = `Zipping ${inputNums.length} files...`;
-            downloadButton.setAttribute("data-original-title", `Zipping ${inputNums.length} files...`);
+        downloadButton.classList.add("spin");
+        downloadButton.title = `Zipping ${inputNums.length} files...`;
+        downloadButton.setAttribute("data-original-title", `Zipping ${inputNums.length} files...`);
 
-            downloadButton.firstElementChild.innerHTML = "autorenew";
+        downloadButton.firstElementChild.innerHTML = "autorenew";
 
-            log.debug("Creating ZipWorker");
-            this.zipWorker = new ZipWorker();
-            this.zipWorker.postMessage({
-                outputs: this.outputs,
-                filename: fileName,
-                fileExtension: fileExt
-            });
-            this.zipWorker.addEventListener("message", this.handleZipWorkerMessage.bind(this));
+        log.debug("Creating ZipWorker");
+        this.zipWorker = new ZipWorker();
+        this.zipWorker.postMessage({
+            outputs: this.outputs,
+            filename: fileName,
+            fileExtension: fileExt
         });
+        this.zipWorker.addEventListener("message", this.handleZipWorkerMessage.bind(this));
     }
 
     /**
@@ -699,7 +717,7 @@ class OutputWaiter {
             }
         }
 
-        this.app.debounce(this.set, 50, "setOutput", this, [inputNum])();
+        debounce(this.set, 50, "setOutput", this, [inputNum])();
 
         document.getElementById("output-html").scroll(0, 0);
         document.getElementById("output-text").scroll(0, 0);
@@ -1028,15 +1046,25 @@ class OutputWaiter {
      * @param {Object[]} options
      */
     backgroundMagicResult(options) {
-        if (!options.length ||
-            !options[0].recipe.length)
-            return;
+        if (!options.length) return;
 
         const currentRecipeConfig = this.app.getRecipeConfig();
-        const newRecipeConfig = currentRecipeConfig.concat(options[0].recipe);
-        const opSequence = options[0].recipe.map(o => o.op).join(", ");
+        let msg = "",
+            newRecipeConfig;
 
-        this.showMagicButton(opSequence, options[0].data, newRecipeConfig);
+        if (options[0].recipe.length) {
+            const opSequence = options[0].recipe.map(o => o.op).join(", ");
+            newRecipeConfig = currentRecipeConfig.concat(options[0].recipe);
+            msg = `<i>${opSequence}</i> will produce <span class="data-text">"${Utils.escapeHtml(Utils.truncate(options[0].data), 30)}"</span>`;
+        } else if (options[0].fileType && options[0].fileType.name) {
+            const ft = options[0].fileType;
+            newRecipeConfig = currentRecipeConfig.concat([{op: "Detect File Type", args: []}]);
+            msg = `<i>${ft.name}</i> file detected`;
+        } else {
+            return;
+        }
+
+        this.showMagicButton(msg, newRecipeConfig);
     }
 
     /**
@@ -1054,17 +1082,17 @@ class OutputWaiter {
     }
 
     /**
-     * Displays the Magic button with a title and adds a link to a complete recipe.
+     * Displays the Magic button with a title and adds a link to a recipe.
      *
-     * @param {string} opSequence
-     * @param {string} result
+     * @param {string} msg
      * @param {Object[]} recipeConfig
      */
-    showMagicButton(opSequence, result, recipeConfig) {
+    showMagicButton(msg, recipeConfig) {
         const magicButton = document.getElementById("magic");
-        magicButton.setAttribute("data-original-title", `<i>${opSequence}</i> will produce <span class="data-text">"${Utils.escapeHtml(Utils.truncate(result), 30)}"</span>`);
+        magicButton.setAttribute("data-original-title", msg);
         magicButton.setAttribute("data-recipe", JSON.stringify(recipeConfig), null, "");
         magicButton.classList.remove("hidden");
+        magicButton.classList.add("pulse");
     }
 
 
@@ -1074,6 +1102,7 @@ class OutputWaiter {
     hideMagicButton() {
         const magicButton = document.getElementById("magic");
         magicButton.classList.add("hidden");
+        magicButton.classList.remove("pulse");
         magicButton.setAttribute("data-recipe", "");
         magicButton.setAttribute("data-original-title", "Magic!");
     }
@@ -1213,14 +1242,39 @@ class OutputWaiter {
      * Moves the current output into the input textarea.
      */
     async switchClick() {
-        const active = await this.getDishBuffer(this.getOutputDish(this.manager.tabs.getActiveOutputTab()));
+        const activeTab = this.manager.tabs.getActiveOutputTab();
+        const transferable = [];
+
+        const switchButton = document.getElementById("switch");
+        switchButton.classList.add("spin");
+        switchButton.disabled = true;
+        switchButton.firstElementChild.innerHTML = "autorenew";
+        $(switchButton).tooltip("hide");
+
+        let active = await this.getDishBuffer(this.getOutputDish(activeTab));
+
+        if (!this.outputExists(activeTab)) {
+            this.resetSwitchButton();
+            return;
+        }
+
+        if (this.outputs[activeTab].data.type === "string" &&
+            active.byteLength <= this.app.options.ioDisplayThreshold * 1024) {
+            const dishString = await this.getDishStr(this.getOutputDish(activeTab));
+            if (!await this.manager.input.preserveCarriageReturns(dishString)) {
+                active = dishString;
+            }
+        } else {
+            transferable.push(active);
+        }
+
         this.manager.input.inputWorker.postMessage({
             action: "inputSwitch",
             data: {
-                inputNum: this.manager.tabs.getActiveInputTab(),
+                inputNum: activeTab,
                 outputData: active
             }
-        }, [active]);
+        }, transferable);
     }
 
     /**
@@ -1238,6 +1292,9 @@ class OutputWaiter {
     inputSwitch(switchData) {
         this.switchOrigData = switchData;
         document.getElementById("undo-switch").disabled = false;
+
+        this.resetSwitchButton();
+
     }
 
     /**
@@ -1246,17 +1303,35 @@ class OutputWaiter {
      */
     undoSwitchClick() {
         this.manager.input.updateInputObj(this.switchOrigData.inputNum, this.switchOrigData.data);
+
+        this.manager.input.fileLoaded(this.switchOrigData.inputNum);
+
+        this.resetSwitch();
+    }
+
+    /**
+     * Removes the switch data and resets the switch buttons
+     */
+    resetSwitch() {
+        if (this.switchOrigData !== undefined) {
+            delete this.switchOrigData;
+        }
+
         const undoSwitch = document.getElementById("undo-switch");
         undoSwitch.disabled = true;
         $(undoSwitch).tooltip("hide");
 
-        this.manager.input.inputWorker.postMessage({
-            action: "setInput",
-            data: {
-                inputNum: this.switchOrigData.inputNum,
-                silent: false
-            }
-        });
+        this.resetSwitchButton();
+    }
+
+    /**
+     * Resets the switch button to its usual state
+     */
+    resetSwitchButton() {
+        const switchButton = document.getElementById("switch");
+        switchButton.classList.remove("spin");
+        switchButton.disabled = false;
+        switchButton.firstElementChild.innerHTML = "open_in_browser";
     }
 
     /**

src/web/waiters/WindowWaiter.mjs

@@ -4,6 +4,8 @@
  * @license Apache-2.0
  */
 
+import { debounce } from "../../core/Utils.mjs";
+
 /**
  * Waiter to handle events related to the window object.
  */
@@ -25,7 +27,7 @@ class WindowWaiter {
      * continuous resetting).
      */
     windowResize() {
-        this.app.debounce(this.app.resetLayout, 200, "windowResize", this.app, [])();
+        debounce(this.app.resetLayout, 200, "windowResize", this.app, [])();
     }
 
 

src/web/waiters/WorkerWaiter.mjs

@@ -5,8 +5,9 @@
  * @license Apache-2.0
  */
 
-import ChefWorker from "worker-loader?inline&fallback=false!../../core/ChefWorker";
-import DishWorker from "worker-loader?inline&fallback=false!../workers/DishWorker";
+import ChefWorker from "worker-loader?inline&fallback=false!../../core/ChefWorker.js";
+import DishWorker from "worker-loader?inline&fallback=false!../workers/DishWorker.mjs";
+import { debounce } from "../../core/Utils.mjs";
 
 /**
  * Waiter to handle conversations with the ChefWorker
@@ -281,7 +282,7 @@ class WorkerWaiter {
      */
     setBakingStatus(bakingStatus) {
         this.app.baking = bakingStatus;
-        this.app.debounce(this.manager.controls.toggleBakeButtonFunction, 20, "toggleBakeButton", this, [bakingStatus ? "cancel" : "bake"])();
+        debounce(this.manager.controls.toggleBakeButtonFunction, 20, "toggleBakeButton", this, [bakingStatus ? "cancel" : "bake"])();
 
         if (bakingStatus) this.manager.output.hideMagicButton();
     }

src/web/workers/InputWorker.mjs

@@ -202,6 +202,7 @@ self.bakeInput = function(inputNum, bakeId) {
     if (inputObj === null ||
         inputObj === undefined ||
         inputObj.status !== "loaded") {
+
         self.postMessage({
             action: "queueInputError",
             data: {
@@ -441,7 +442,7 @@ self.updateTabHeader = function(inputNum) {
  *
  * @param {object} inputData
  * @param {number} inputData.inputNum - The input to get the data for
- * @param {boolean} inputData.silent - If false, the manager statechange event won't be fired
+ * @param {boolean} inputData.silent - If false, the manager statechange event will be fired
  */
 self.setInput = function(inputData) {
     const inputNum = inputData.inputNum;
@@ -590,7 +591,7 @@ self.updateInputObj = function(inputData) {
     const inputNum = inputData.inputNum;
     const data = inputData.data;
 
-    if (self.getInputObj(inputNum) === -1) return;
+    if (self.getInputObj(inputNum) === undefined) return;
 
     self.inputs[inputNum].data = data;
 };
@@ -663,11 +664,19 @@ self.handleLoaderMessage = function(r) {
     if ("fileBuffer" in r) {
         log.debug(`Input file ${inputNum} loaded.`);
         self.loadingInputs--;
+
         self.updateInputValue({
             inputNum: inputNum,
             value: r.fileBuffer
         });
 
+        self.postMessage({
+            action: "fileLoaded",
+            data: {
+                inputNum: inputNum
+            }
+        });
+
         const idx = self.getLoaderWorkerIdx(r.id);
         self.loadNextFile(idx);
     } else if ("progress" in r) {
@@ -782,7 +791,7 @@ self.loadFiles = function(filesData) {
     }
 
     self.getLoadProgress();
-    self.setInput({inputNum: activeTab, silent: false});
+    self.setInput({inputNum: activeTab, silent: true});
 };
 
 /**
@@ -1025,7 +1034,7 @@ self.inputSwitch = function(switchData) {
     const currentData = currentInput.data;
     if (currentInput === undefined || currentInput === null) return;
 
-    if (typeof switchData.outputData === "object") {
+    if (typeof switchData.outputData !== "string") {
         const output = new Uint8Array(switchData.outputData),
             types = detectFileType(output);
         let type = "unknown",
@@ -1036,15 +1045,22 @@ self.inputSwitch = function(switchData) {
         }
 
         // ArrayBuffer
-        currentInput.data = {
-            fileBuffer: switchData.outputData,
-            name: `output.${ext}`,
-            size: switchData.outputData.byteLength.toLocaleString(),
-            type: type
-        };
+        self.updateInputObj({
+            inputNum: switchData.inputNum,
+            data: {
+                fileBuffer: switchData.outputData,
+                name: `output.${ext}`,
+                size: switchData.outputData.byteLength.toLocaleString(),
+                type: type
+            }
+        });
     } else {
         // String
-        currentInput.data = switchData.outputData;
+        self.updateInputValue({
+            inputNum: switchData.inputNum,
+            value: switchData.outputData,
+            force: true
+        });
     }
 
     self.postMessage({
@@ -1055,6 +1071,11 @@ self.inputSwitch = function(switchData) {
         }
     });
 
-    self.setInput({inputNum: switchData.inputNum, silent: false});
+    self.postMessage({
+        action: "fileLoaded",
+        data: {
+            inputNum: switchData.inputNum
+        }
+    });
 
 };

tests/browser/nightwatch.js

@@ -75,7 +75,7 @@ module.exports = {
         // Confirm that it has been added to the recipe
         browser
             .useCss()
-            .waitForElementVisible(op)
+            .waitForElementVisible(op, 100)
             .expect.element(op).text.to.contain("To Hex");
 
         // Enter input
@@ -107,6 +107,10 @@ module.exports = {
         loadOp("BSON deserialise", browser)
             .waitForElementNotVisible("#output-loader", 5000);
 
+        // Charts
+        loadOp("Entropy", browser)
+            .waitForElementNotVisible("#output-loader", 5000);
+
         // Ciphers
         loadOp("AES Encrypt", browser)
             .waitForElementNotVisible("#output-loader", 5000);
@@ -135,6 +139,10 @@ module.exports = {
         loadOp("Encode text", browser)
             .waitForElementNotVisible("#output-loader", 5000);
 
+        // Hashing
+        loadOp("Streebog", browser)
+            .waitForElementNotVisible("#output-loader", 5000);
+
         // Image
         loadOp("Extract EXIF", browser)
             .waitForElementNotVisible("#output-loader", 5000);
@@ -162,6 +170,54 @@ module.exports = {
         // UserAgent
         loadOp("Parse User Agent", browser)
             .waitForElementNotVisible("#output-loader", 5000);
+
+        // YARA
+        loadOp("YARA Rules", browser)
+            .waitForElementNotVisible("#output-loader", 5000);
+
+        browser.click("#clr-recipe");
+    },
+
+    "Move around the UI": browser => {
+        const otherCat = "//a[contains(@class, 'category-title') and contains(@data-target, '#catOther')]",
+            genUUID = "//li[contains(@class, 'operation') and text()='Generate UUID']";
+
+        browser.useXpath();
+
+        // Scroll to a lower category
+        browser
+            .getLocationInView(otherCat)
+            .expect.element(otherCat).to.be.visible;
+
+        // Open category
+        browser
+            .click(otherCat)
+            .expect.element(genUUID).to.be.visible;
+
+        // Add op to recipe
+        /* mouseButtonUp drops wherever the actual cursor is, not necessarily in the right place,
+        so we can't test Sortable.js properly using Nightwatch. html-dnd doesn't work either.
+        Instead of relying on drag and drop, we double click on the op to load it. */
+        browser
+            .getLocationInView(genUUID)
+            .moveToElement(genUUID, 10, 10)
+            .doubleClick()
+            .useCss()
+            .waitForElementVisible(".operation .op-title", 1000)
+            .waitForElementNotVisible("#stale-indicator", 1000)
+            .expect.element("#output-text").to.have.value.which.matches(/[\da-f-]{36}/);
+
+        browser.click("#clr-recipe");
+    },
+
+    "Search": browser => {
+        // Search for an op
+        browser
+            .useCss()
+            .clearValue("#search")
+            .setValue("#search", "md5")
+            .useXpath()
+            .waitForElementVisible("//ul[@id='search-results']//u[text()='MD5']", 1000);
     },
 
     after: browser => {

tests/lib/TestRegister.mjs

@@ -104,8 +104,6 @@ class TestRegister {
      * Run all api related tests and wrap results in report format
      */
     runApiTests() {
-        console.log("Running tests...");
-
         return Promise.all(this.apiTests.map(async function(test, i) {
             const result = {
                 test: test,

tests/node/assertionHandler.mjs

@@ -15,9 +15,9 @@
 /**
  * Print useful stack on error
  */
-const wrapRun = (run) => () => {
+const wrapRun = (run) => async () => {
     try {
-        run();
+        await run();
     } catch (e) {
         console.dir(e);
         throw e;

tests/node/tests/nodeApi.mjs

@@ -259,6 +259,13 @@ TestRegister.addApiTests([
         assert.strictEqual(result.toString(), "73:6f:6d:65:20:69:6e:70:75:74");
     }),
 
+    it("chef.bake: should take single JSON object desribing op with optional args", () => {
+        const result = chef.bake("some input", {
+            op: chef.toHex,
+        });
+        assert.strictEqual(result.toString(), "73 6f 6d 65 20 69 6e 70 75 74");
+    }),
+
     it("chef.bake: should take single JSON object describing op and args ARRAY", () => {
         const result = chef.bake("some input", {
             op: chef.toHex,
@@ -295,6 +302,21 @@ TestRegister.addApiTests([
         assert.strictEqual(result.toString(), "67;63;72;66;146;72;66;144;72;66;65;72;62;60;72;66;71;72;66;145;72;67;60;72;67;65;72;67;64");
     }),
 
+    it("chef.bake: should take multiple ops in JSON object form, some without args", () => {
+        const result = chef.bake("some input", [
+            {
+                op: chef.toHex,
+            },
+            {
+                op: "to octal",
+                args: {
+                    delimiter: "Semi-colon",
+                }
+            }
+        ]);
+        assert.strictEqual(result.toString(), "67;63;40;66;146;40;66;144;40;66;65;40;62;60;40;66;71;40;66;145;40;67;60;40;67;65;40;67;64");
+    }),
+
     it("chef.bake: should handle op with multiple args", () => {
         const result = chef.bake("some input", {
             op: "to morse code",
@@ -324,6 +346,17 @@ TestRegister.addApiTests([
         assert.strictEqual(result.toString(), "begin_something_anananaaaaak_da_aaak_da_aaaaananaaaaaaan_da_aaaaaaanan_da_aaak_end_something");
     }),
 
+    it("chef.bake: should accept Clean JSON format from Chef website - args optional", () => {
+        const result = chef.bake("some input", [
+            { "op": "To Morse Code" },
+            { "op": "Hex to PEM",
+                "args": ["SOMETHING"] },
+            { "op": "To Snake case",
+                "args": [false] }
+        ]);
+        assert.strictEqual(result.toString(), "begin_something_aaaaaaaaaaaaaa_end_something");
+    }),
+
     it("Excluded operations: throw a sensible error when you try and call one", () => {
         try {
             chef.fork();