cyberchef 10.22.0 → 10.23.0

package/src/web/HTMLIngredient.mjs

@@ -49,15 +49,14 @@ class HTMLIngredient {
     toHtml() {
         let html = "",
             i, m, eventFn;
+        const hintHtml = this.hint ? `data-toggle="tooltip" title="${this.hint}"` : "";
 
         switch (this.type) {
             case "string":
             case "binaryString":
             case "byteArray":
-                html += `<div class="form-group ing-wide">
-                    <label for="${this.id}"
-                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                        class="bmd-label-floating">${this.name}</label>
+                html += `<div class="form-group ing-wide" ${hintHtml}>
+                    <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
                     <input type="text"
                         class="form-control arg"
                         id="${this.id}"
@@ -70,10 +69,8 @@ class HTMLIngredient {
                 break;
             case "shortString":
             case "binaryShortString":
-                html += `<div class="form-group ing-short">
-                    <label for="${this.id}"
-                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                        class="bmd-label-floating inline">${this.name}</label>
+                html += `<div class="form-group ing-short" ${hintHtml}>
+                    <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
                     <input type="text"
                         class="form-control arg inline"
                         id="${this.id}"
@@ -85,11 +82,9 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "toggleString":
-                html += `<div class="form-group input-group ing-wide" data-help-title="Multi-type ingredients" data-help="Selecting a data type from the dropdown will change how the ingredient is interpreted by the operation.">
+                html += `<div class="form-group input-group ing-wide" data-help-title="Multi-type ingredients" data-help="Selecting a data type from the dropdown will change how the ingredient is interpreted by the operation." ${hintHtml}>
                     <div class="toggle-string">
-                        <label for="${this.id}"
-                            ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                            class="bmd-label-floating toggle-string">${this.name}</label>
+                        <label for="${this.id}" class="bmd-label-floating toggle-string">${this.name}</label>
                         <input type="text"
                             class="form-control arg toggle-string"
                             id="${this.id}"
@@ -111,10 +106,8 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "number":
-                html += `<div class="form-group inline ing-medium">
-                    <label for="${this.id}"
-                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                        class="bmd-label-floating inline">${this.name}</label>
+                html += `<div class="form-group inline ing-medium" ${hintHtml}>
+                    <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
                     <input type="number"
                         class="form-control arg inline"
                         id="${this.id}"
@@ -128,9 +121,9 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "boolean":
-                html += `<div class="form-group inline boolean-arg ing-flexible">
+                html += `<div class="form-group inline boolean-arg ing-flexible" ${hintHtml}>
                     <div class="checkbox">
-                        <label ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}>
+                        <label>
                             <input type="checkbox"
                                 class="arg"
                                 id="${this.id}"
@@ -144,10 +137,8 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "option":
-                html += `<div class="form-group ing-medium">
-                    <label for="${this.id}"
-                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                        class="bmd-label-floating inline">${this.name}</label>
+                html += `<div class="form-group ing-medium" ${hintHtml}>
+                    <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
                     <select
                         class="form-control arg inline"
                         id="${this.id}"
@@ -168,10 +159,8 @@ class HTMLIngredient {
                 break;
             case "populateOption":
             case "populateMultiOption":
-                html += `<div class="form-group ing-medium" data-help-title="Population dropdowns" data-help="Selecting a value from this dropdown will populate some of the other ingredients for this operation with pre-canned values.">
-                    <label for="${this.id}"
-                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                        class="bmd-label-floating">${this.name}</label>
+                html += `<div class="form-group ing-medium" data-help-title="Population dropdowns" data-help="Selecting a value from this dropdown will populate some of the other ingredients for this operation with pre-canned values." ${hintHtml}>
+                    <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
                     <select
                         class="form-control arg no-state-change populate-option"
                         id="${this.id}"
@@ -199,10 +188,8 @@ class HTMLIngredient {
                 this.manager.addDynamicListener("#" + this.id, "change", eventFn, this);
                 break;
             case "editableOption":
-                html += `<div class="form-group input-group ing-wide">
-                    <label for="${this.id}"
-                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                        class="bmd-label-floating">${this.name}</label>
+                html += `<div class="form-group input-group ing-wide" ${hintHtml}>
+                    <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
                     <input type="text"
                         class="form-control arg"
                         id="${this.id}"
@@ -230,10 +217,8 @@ class HTMLIngredient {
                 this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this);
                 break;
             case "editableOptionShort":
-                html += `<div class="form-group input-group ing-short">
-                    <label for="${this.id}"
-                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                        class="bmd-label-floating inline">${this.name}</label>
+                html += `<div class="form-group input-group ing-short" ${hintHtml}>
+                    <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
                     <input type="text"
                         class="form-control arg inline"
                         id="${this.id}"
@@ -261,10 +246,8 @@ class HTMLIngredient {
                 this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this);
                 break;
             case "text":
-                html += `<div class="form-group ing-very-wide">
-                    <label for="${this.id}"
-                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                        class="bmd-label-floating">${this.name}</label>
+                html += `<div class="form-group ing-very-wide" ${hintHtml}>
+                    <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
                     <textarea
                         class="form-control arg"
                         id="${this.id}"
@@ -275,10 +258,8 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "argSelector":
-                html += `<div class="form-group inline ing-medium" data-help-title="Ingredient selector" data-help="Selecting options in this dropdown will configure which operation ingredients are visible.">
-                    <label for="${this.id}"
-                        ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
-                        class="bmd-label-floating inline">${this.name}</label>
+                html += `<div class="form-group inline ing-medium" data-help-title="Ingredient selector" data-help="Selecting options in this dropdown will configure which operation ingredients are visible." ${hintHtml}>
+                    <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
                     <select
                         class="form-control arg inline arg-selector"
                         id="${this.id}"
@@ -298,7 +279,7 @@ class HTMLIngredient {
                 this.manager.addDynamicListener(".arg-selector", "change", this.argSelectorChange, this);
                 break;
             case "label":
-                html += `<div class="form-group ing-flexible">
+                html += `<div class="form-group ing-flexible" ${hintHtml}>
                     <label>${this.name}</label>
                     <input type="hidden"
                         class="form-control arg"

package/src/web/Manager.mjs

@@ -130,6 +130,7 @@ class Manager {
         // Controls
         document.getElementById("bake").addEventListener("click", this.controls.bakeClick.bind(this.controls));
         document.getElementById("auto-bake").addEventListener("change", this.controls.autoBakeChange.bind(this.controls));
+        document.getElementById("auto-bake").addEventListener("keydown", this.controls.autoBakeKeyboardHandler.bind(this.controls));
         document.getElementById("step").addEventListener("click", this.controls.stepClick.bind(this.controls));
         document.getElementById("clr-recipe").addEventListener("click", this.controls.clearRecipeClick.bind(this.controls));
         document.getElementById("save").addEventListener("click", this.controls.saveClick.bind(this.controls));

package/src/web/html/index.html

@@ -145,7 +145,7 @@
         <button type="button" aria-label="Edit Favourites" class="btn btn-warning bmd-btn-icon" id="edit-favourites" data-toggle="tooltip" title="Edit favourites">
             <i class="material-icons" aria-hidden="true">star</i>
         </button>
-        <div id="content-wrapper">
+        <div tabindex="0" id="content-wrapper">
             <div id="banner" class="row">
                 <div class="col" style="text-align: left; padding-left: 10px;">
                     <a href="#" data-toggle="modal" data-target="#download-modal" data-help-title="Downloading CyberChef" data-help="<p>CyberChef can be downloaded to run locally or hosted within your own network. It has no server-side component so all that is required is that the ZIP file is uncompressed and the files are accessible.</p><p>As a user, it is worth noting that unofficial versions of CyberChef could have been modified to introduce Input and/or Recipe exfiltration. We recommend always using the official, open source, up-to-date version of CyberChef hosted at <a href='https://gchq.github.io/CyberChef'>https://gchq.github.io/CyberChef</a> if accessible.</p><p>The Network tab in your browser's Developer console (F12) can be used to inspect the network requests made by a website. This can confirm that no data is uploaded when a CyberChef recipe is baked.</p>">Download CyberChef <i class="material-icons">file_download</i></a>
@@ -173,7 +173,7 @@
                         Operations
                         <span class="op-count"></span>
                     </div>
-                    <input id="search" type="search" class="form-control" placeholder="Search..." autocomplete="off" tabindex="2" data-help-title="Searching for operations" data-help="<p>Use the search box to find useful operations.</p><p>Both operation names and descriptions are queried using a fuzzy matching algorithm.</p>">
+                    <input id="search" type="search" class="form-control" placeholder="Search..." autocomplete="off" tabindex="0" data-help-title="Searching for operations" data-help="<p>Use the search box to find useful operations.</p><p>Both operation names and descriptions are queried using a fuzzy matching algorithm.</p>">
                     <ul id="search-results" class="op-list"></ul>
                     <div id="categories" class="panel-group no-select"></div>
                 </div>
@@ -584,22 +584,22 @@
 
                         <ul class="nav nav-tabs" role="tablist">
                             <li class="nav-item" role="presentation">
-                                <a class="nav-link active" href="#faqs" aria-controls="profile" role="tab" data-toggle="tab">
+                                <a id="tab-1" class="nav-link active" href="#faqs" aria-controls="profile" role="tab" data-toggle="tab">
                                     FAQs
                                 </a>
                             </li>
                             <li class="nav-item" role="presentation">
-                                <a class="nav-link" href="#report-bug" aria-controls="messages" role="tab" data-toggle="tab">
+                                <a id="tab-2" class="nav-link" href="#report-bug" aria-controls="messages" role="tab" data-toggle="tab">
                                     Report a bug
                                 </a>
                             </li>
                             <li class="nav-item" role="presentation">
-                                <a class="nav-link" href="#about" aria-controls="messages" role="tab" data-toggle="tab">
+                                <a id="tab-3" class="nav-link" href="#about" aria-controls="messages" role="tab" data-toggle="tab">
                                     About
                                 </a>
                             </li>
                             <li class="nav-item" role="presentation">
-                                <a class="nav-link" href="#keybindings" aria-controls="messages" role="tab" data-toggle="tab">
+                                <a id="tab-4" class="nav-link" href="#keybindings" aria-controls="messages" role="tab" data-toggle="tab">
                                     Keybindings
                                 </a>
                             </li>