5.11.6

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cyberchef",
-  "version": "5.11.3",
+  "version": "5.11.6",
   "lockfileVersion": 1,
   "dependencies": {
     "abab": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cyberchef",
-  "version": "5.11.3",
+  "version": "5.11.6",
   "description": "The Cyber Swiss Army Knife for encryption, encoding, compression and data analysis.",
   "author": "n1474335 <n1474335@gmail.com>",
   "homepage": "https://gchq.github.io/CyberChef",

src/core/Utils.js

@@ -1000,9 +1000,14 @@ const Utils = {
         if (paramStr === "") return {};
 
         // Cut off ? or # and split on &
-        const params = paramStr.substr(1).split("&");
+        if (paramStr[0] === "?" ||
+            paramStr[0] === "#") {
+            paramStr = paramStr.substr(1);
+        }
 
+        const params = paramStr.split("&");
         const result = {};
+
         for (let i = 0; i < params.length; i++) {
             const param = params[i].split("=");
             if (param.length !== 2) {

src/core/operations/StrUtils.js

@@ -359,9 +359,9 @@ const StrUtils = {
 
         for (let i = 0; i < diff.length; i++) {
             if (diff[i].added) {
-                if (showAdded) output += "<span class='hlgreen'>" + Utils.escapeHtml(diff[i].value) + "</span>";
+                if (showAdded) output += "<span class='hl5'>" + Utils.escapeHtml(diff[i].value) + "</span>";
             } else if (diff[i].removed) {
-                if (showRemoved) output += "<span class='hlred'>" + Utils.escapeHtml(diff[i].value) + "</span>";
+                if (showRemoved) output += "<span class='hl3'>" + Utils.escapeHtml(diff[i].value) + "</span>";
             } else {
                 output += Utils.escapeHtml(diff[i].value);
             }
@@ -424,7 +424,7 @@ const StrUtils = {
                 }
 
                 if (match && !inMatch) {
-                    outputs[s] += "<span class='hlgreen'>" + Utils.escapeHtml(samples[s][i]);
+                    outputs[s] += "<span class='hl5'>" + Utils.escapeHtml(samples[s][i]);
                     if (samples[s].length === i + 1) outputs[s] += "</span>";
                     if (s === samples.length - 1) inMatch = true;
                 } else if (!match && inMatch) {

src/web/App.js

@@ -400,7 +400,12 @@ App.prototype.addFavourite = function(name) {
  */
 App.prototype.loadURIParams = function() {
     // Load query string or hash from URI (depending on which is populated)
-    const params = window.location.search || window.location.hash;
+    // We prefer getting the hash by splitting the href rather than referencing
+    // location.hash as some browsers (Firefox) automatically URL decode it,
+    // which cause issues.
+    const params = window.location.search ||
+        window.location.href.split("#")[1] ||
+        window.location.hash;
     this.uriParams = Utils.parseURIParams(params);
 
     // Pause auto-bake while loading but don't modify `this.autoBake_`

src/web/html/index.html

@@ -272,32 +272,32 @@
                             <label for="theme"> Theme (only supported in modern browsers)</label>
                         </div>
                         <div class="option-item">
-                            <input type="checkbox" option="update_url" id="update_url" checked />
-                            <label for="update_url"> Update the URL when the input or recipe changes </label>
+                            <input type="checkbox" option="updateUrl" id="updateUrl" checked />
+                            <label for="updateUrl"> Update the URL when the input or recipe changes </label>
                         </div>
                         <div class="option-item">
-                            <input type="checkbox" option="show_highlighter" id="show_highlighter" checked />
-                            <label for="show_highlighter"> Highlight selected bytes in output and input (when possible) </label>
+                            <input type="checkbox" option="showHighlighter" id="showHighlighter" checked />
+                            <label for="showHighlighter"> Highlight selected bytes in output and input (when possible) </label>
                         </div>
                         <div class="option-item">
-                            <input type="checkbox" option="treat_as_utf8" id="treat_as_utf8" checked />
-                            <label for="treat_as_utf8"> Treat output as UTF-8 if possible </label>
+                            <input type="checkbox" option="treatAsUtf8" id="treatAsUtf8" checked />
+                            <label for="treatAsUtf8"> Treat output as UTF-8 if possible </label>
                         </div>
                         <div class="option-item">
-                            <input type="checkbox" option="word_wrap" id="word_wrap" checked />
-                            <label for="word_wrap"> Word wrap the input and output </label>
+                            <input type="checkbox" option="wordWrap" id="wordWrap" checked />
+                            <label for="wordWrap"> Word wrap the input and output </label>
                         </div>
                         <div class="option-item">
-                            <input type="checkbox" option="show_errors" id="show_errors" checked />
-                            <label for="show_errors"> Operation error reporting (recommended) </label>
+                            <input type="checkbox" option="showErrors" id="showErrors" checked />
+                            <label for="showErrors"> Operation error reporting (recommended) </label>
                         </div>
                         <div class="option-item">
-                            <input type="number" option="error_timeout" id="error_timeout" />
-                            <label for="error_timeout"> Operation error timeout in ms (0 for never) </label>
+                            <input type="number" option="errorTimeout" id="errorTimeout" />
+                            <label for="errorTimeout"> Operation error timeout in ms (0 for never) </label>
                         </div>
                         <div class="option-item">
-                            <input type="number" option="auto_bake_threshold" id="auto_bake_threshold"/>
-                            <label for="auto_bake_threshold"> Auto Bake threshold in ms </label>
+                            <input type="number" option="autoBakeThreshold" id="autoBakeThreshold"/>
+                            <label for="autoBakeThreshold"> Auto Bake threshold in ms </label>
                         </div>
                     </div>
                     <div class="modal-footer">

src/web/stylesheets/components/_operation.css

@@ -59,6 +59,7 @@
     background-color: var(--arg-background);
     border: 1px solid var(--arg-border-colour);
     font-family: var(--fixed-width-font-family);
+    text-overflow: ellipsis;
 }
 
 .short-string {

test/tests/operations/StrUtils.js

@@ -26,7 +26,7 @@ TestRegister.addTests([
     {
         name: "Diff, basic usage",
         input: "testing23\n\ntesting123",
-        expectedOutput: "testing<span class='hlgreen'>1</span>23",
+        expectedOutput: "testing<span class='hl5'>1</span>23",
         recipeConfig: [
             {
                 "op": "Diff",