exlim/cyberchef
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge a86b55f94bad2cbcb8e6d715fec776d113d32c6b into a0a369a7efa9ace61b8114afcd5184f653a05e48

Browse Source
This commit is contained in:
Fra3zz 2026-06-21 01:09:51 -04:00 committed by GitHub
commit ca380e07fd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 213 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
src/web/html/index.html
View File

@ -25,114 +25,15 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>CyberChef</title> <title>CyberChef</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self'; img-src 'self' data:; font-src 'self'; object-src 'self'; frame-src 'self'; worker-src 'self'">
<meta name="copyright" content="Crown Copyright 2016-<%= htmlWebpackPlugin.options.compileYear %>" /> <meta name="copyright" content="Crown Copyright 2016-<%= htmlWebpackPlugin.options.compileYear %>" />
<meta name="description" content="The Cyber Swiss Army Knife - a web app for encryption, encoding, compression and data analysis" /> <meta name="description" content="The Cyber Swiss Army Knife - a web app for encryption, encoding, compression and data analysis" />
<meta name="keywords" content="base64, hex, decode, encode, encrypt, decrypt, compress, decompress, regex, regular expressions, hash, crypt, hexadecimal, user agent, url, certificate, x.509, parser, JSON, gzip, md5, sha1, aes, des, blowfish, xor" /> <meta name="keywords" content="base64, hex, decode, encode, encrypt, decrypt, compress, decompress, regex, regular expressions, hash, crypt, hexadecimal, user agent, url, certificate, x.509, parser, JSON, gzip, md5, sha1, aes, des, blowfish, xor" />
<link rel="icon" type="image/ico" href="<%- require('../static/images/favicon.ico') %>" /> <link rel="icon" type="image/ico" href="<%- require('../static/images/favicon.ico') %>" />
<link rel="stylesheet" href="assets/index_assets/style.css">
<script type="application/javascript">
"use strict"; <script type="text/javascript" src="assets/index_assets/loadTheme.js"></script>
// Load theme before the preloader is shown
try {
document.querySelector(":root").className = (JSON.parse(localStorage.getItem("options")) || {}).theme;
} catch (err) {
// LocalStorage access is denied by security settings
}
// Define loading messages
var loadingMsgs = [
"Proving P = NP...",
"Computing 6 x 9...",
"Mining bitcoin...",
"Dividing by 0...",
"Initialising Skynet...",
"[REDACTED]",
"Downloading more RAM...",
"Ordering 1s and 0s...",
"Navigating neural network...",
"Importing machine learning...",
"Issuing Alice and Bob one-time pads...",
"Mining bitcoin cash...",
"Generating key material by trying to escape vim...",
"for i in range(additional): Pylon()",
"(creating unresolved tension...",
"Symlinking emacs and vim to ed...",
"Training branch predictor...",
"Timing cache hits...",
"Speculatively executing recipes...",
"Adding LLM hallucinations...",
"Decompressing malware..."
];
// Shuffle array using Durstenfeld algorithm
for (let i = loadingMsgs.length - 1; i > 0; --i) {
var j = Math.floor(Math.random() * (i + 1));
var temp = loadingMsgs[i];
loadingMsgs[i] = loadingMsgs[j];
loadingMsgs[j] = temp;
}
// Show next loading message and move it to the end of the array
function changeLoadingMsg() {
var msg = loadingMsgs.shift();
loadingMsgs.push(msg);
try {
var el = document.getElementById("preloader-msg");
if (!el.classList.contains("loading"))
el.classList.add("loading"); // Causes CSS transition on first message
el.innerHTML = msg;
} catch (err) {
// This error was likely caused by the DOM not being ready yet,
// so we wait another second and then try again.
setTimeout(changeLoadingMsg, 1000);
}
}
changeLoadingMsg();
window.loadingMsgsInt = setInterval(changeLoadingMsg, (Math.random() * 2000) + 1500);
// If any errors are thrown during loading, handle them here
function loadingErrorHandler(e) {
function escapeHtml(str) {
var HTML_CHARS = {
"&": "&amp;",
"<": "&lt;",
">": "&gt;",
'"': "&quot;",
"'": "&#x27;", // &apos; not recommended because it's not in the HTML spec
"/": "&#x2F;", // forward slash is included as it helps end an HTML entity
"`": "&#x60;"
};
return str.replace(/[&<>"'/`]/g, function (match) {
return HTML_CHARS[match];
});
}
var msg = e.message +
(e.filename ? "\nFilename: " + e.filename : "") +
(e.lineno ? "\nLine: " + e.lineno : "") +
(e.colno ? "\nColumn: " + e.colno : "") +
(e.error ? "\nError: " + e.error : "") +
"\nUser-Agent: " + navigator.userAgent +
"\nCyberChef version: <%= htmlWebpackPlugin.options.version %>";
clearInterval(window.loadingMsgsInt);
document.getElementById("preloader").remove();
document.getElementById("preloader-msg").remove();
document.getElementById("preloader-error").innerHTML =
"CyberChef encountered an error while loading.<br><br>" +
"The following browser versions are supported:" +
"<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/choose'>" +
"raise an issue</a> including the following details:<br><br>" +
"<pre>" + escapeHtml(msg) + "</pre>";
};
window.addEventListener("error", loadingErrorHandler);
</script>
</head> </head>
<body> <body>
<!-- Preloader overlay --> <!-- Preloader overlay -->
@ -147,22 +48,16 @@
</button> </button>
<div tabindex="0" id="content-wrapper"> <div tabindex="0" id="content-wrapper">
<div id="banner" class="row"> <div id="banner" class="row">
<div class="col" style="text-align: left; padding-left: 10px;"> <div class="col">
<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> <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>
</div> </div>
<div class="col-md-6" id="notice-wrapper"> <div class="col-md-6" id="notice-wrapper">
<span id="notice"> <span id="notice">
<script type="text/javascript"> <script type="text/javascript" src="assets/index_assets/ieCheck.js"></script>
// Must be text/javascript rather than application/javascript otherwise IE won't recognise it...
if (navigator.userAgent && navigator.userAgent.match(/Trident/)) {
document.getElementById("notice").innerHTML += "Internet Explorer is not supported, please use Firefox or Chrome instead";
alert("Internet Explorer is not supported, please use Firefox or Chrome instead");
}
</script>
<noscript>JavaScript is not enabled. Good luck.</noscript> <noscript>JavaScript is not enabled. Good luck.</noscript>
</span> </span>
</div> </div>
<div class="col" style="text-align: right; padding-right: 0;"> <div class="col">
<a href="#" id="options" data-help-title="Options and Settings" data-help="Configurable options to change how CyberChef behaves. These settings are stored in your browser's local storage, meaning they will persist between sessions that use the same browser profile.">Options <i class="material-icons">settings</i></a> <a href="#" id="options" data-help-title="Options and Settings" data-help="Configurable options to change how CyberChef behaves. These settings are stored in your browser's local storage, meaning they will persist between sessions that use the same browser profile.">Options <i class="material-icons">settings</i></a>
<a href="#" id="support" data-toggle="modal" data-target="#support-modal" data-help-title="About / Support" data-help="This pane provides information about the CyberChef web app, how to use some of the features, and how to raise bug reports.">About / Support <i class="material-icons">help</i></a> <a href="#" id="support" data-toggle="modal" data-target="#support-modal" data-help-title="About / Support" data-help="This pane provides information about the CyberChef web app, how to use some of the features, and how to raise bug reports.">About / Support <i class="material-icons">help</i></a>
</div> </div>
@ -209,7 +104,7 @@
<span>Bake!</span> <span>Bake!</span>
</button> </button>
<div class="form-group" style="display: contents;"> <div class="form-group">
<div class="mx-1 checkbox" data-help-title="Auto-bake" data-help="<p>When Auto-bake is turned on, CyberChef will bake the Input using the Recipe whenever anything in the Input or Recipe changes.</p>This includes:<ul><li>Adding or removing operations</li><li>Modifying operation arguments</li><li>Editing the Input</li><li>Changing the Input character encoding</li></ul><p>If there are multiple inputs, only the currently active tab will be baked when Auto-bake triggers. You can bake all inputs manually using the Bake button.</p>"> <div class="mx-1 checkbox" data-help-title="Auto-bake" data-help="<p>When Auto-bake is turned on, CyberChef will bake the Input using the Recipe whenever anything in the Input or Recipe changes.</p>This includes:<ul><li>Adding or removing operations</li><li>Modifying operation arguments</li><li>Editing the Input</li><li>Changing the Input character encoding</li></ul><p>If there are multiple inputs, only the currently active tab will be baked when Auto-bake triggers. You can bake all inputs manually using the Bake button.</p>">
<label id="auto-bake-label"> <label id="auto-bake-label">
<input type="checkbox" checked="checked" id="auto-bake"> <input type="checkbox" checked="checked" id="auto-bake">
@ -232,11 +127,11 @@
</button> </button>
<button type="button" aria-label="Open folder as input" class="btn btn-primary bmd-btn-icon" id="btn-open-folder" data-toggle="tooltip" title="Open folder as input" data-help-title="Opening a folder" data-help="<p>You can open a whole folder into CyberChef, which will result in each file being loaded into a separate Input tab.</p><p>CyberChef can handle lots of Input files, but be aware that performance may suffer, especially if the files are large in size.</p><p>Folders can also be loaded by dragging them over the Input pane and dropping them.</p>"> <button type="button" aria-label="Open folder as input" class="btn btn-primary bmd-btn-icon" id="btn-open-folder" data-toggle="tooltip" title="Open folder as input" data-help-title="Opening a folder" data-help="<p>You can open a whole folder into CyberChef, which will result in each file being loaded into a separate Input tab.</p><p>CyberChef can handle lots of Input files, but be aware that performance may suffer, especially if the files are large in size.</p><p>Folders can also be loaded by dragging them over the Input pane and dropping them.</p>">
<i class="material-icons" aria-hidden="true">folder_open</i> <i class="material-icons" aria-hidden="true">folder_open</i>
<input type="file" id="open-folder" style="display: none" multiple directory webkitdirectory> <input type="file" id="open-folder" multiple directory webkitdirectory>
</button> </button>
<button type="button" aria-label="Open file as input" class="btn btn-primary bmd-btn-icon" id="btn-open-file" data-toggle="tooltip" title="Open file as input" data-help-title="Opening a file" data-help="<p>Files can be loaded into CyberChef individually or in groups, either using the 'Open file as input' button, or by dragging and dropping them over the Input pane.</p><p>CyberChef can handle reasonably large files (at least 500MB, depending on hardware), but performance may be impacted and some Operations will run very slowly over large Inputs.</p>"> <button type="button" aria-label="Open file as input" class="btn btn-primary bmd-btn-icon" id="btn-open-file" data-toggle="tooltip" title="Open file as input" data-help-title="Opening a file" data-help="<p>Files can be loaded into CyberChef individually or in groups, either using the 'Open file as input' button, or by dragging and dropping them over the Input pane.</p><p>CyberChef can handle reasonably large files (at least 500MB, depending on hardware), but performance may be impacted and some Operations will run very slowly over large Inputs.</p>">
<i class="material-icons" aria-hidden="true">input</i> <i class="material-icons" aria-hidden="true">input</i>
<input type="file" id="open-file" style="display: none" multiple> <input type="file" id="open-file" multiple>
</button> </button>
<button type="button" aria-label="Clear input and output" class="btn btn-primary bmd-btn-icon" id="clr-io" data-toggle="tooltip" title="Clear input and output" data-help-title="Clearing the Input and Output" data-help="Clicking the 'Clear input and output' button will remove all Inputs and Outputs. It will not clear the Recipe."> <button type="button" aria-label="Clear input and output" class="btn btn-primary bmd-btn-icon" id="clr-io" data-toggle="tooltip" title="Clear input and output" data-help-title="Clearing the Input and Output" data-help="Clicking the 'Clear input and output' button will remove all Inputs and Outputs. It will not clear the Recipe.">
<i class="material-icons" aria-hidden="true">delete</i> <i class="material-icons" aria-hidden="true">delete</i>
@ -248,7 +143,7 @@
</div> </div>
<div id="input-wrapper" class="no-select"> <div id="input-wrapper" class="no-select">
<div id="input-tabs-wrapper" style="display: none;" class="no-select" data-help-proxy="#btn-new-tab"> <div id="input-tabs-wrapper" class="no-select" data-help-proxy="#btn-new-tab">
<span id="btn-previous-input-tab" class="input-tab-buttons"> <span id="btn-previous-input-tab" class="input-tab-buttons">
&lt; &lt;
</span> </span>
@ -281,7 +176,7 @@
<label for="output-text">Output</label> <label for="output-text">Output</label>
<span class="pane-controls"> <span class="pane-controls">
<div class="io-info" id="bake-info"></div> <div class="io-info" id="bake-info"></div>
<button type="button" class="btn btn-primary bmd-btn-icon" id="save-all-to-file" data-toggle="tooltip" title="Save all outputs to a zip file" style="display: none" data-help-title="Saving all outputs to a zip file" data-help="<p>When operating with multiple tabbed Inputs and Outputs, you can use this button to save off all the Outputs at once in a ZIP file.</p><p>Use the 'Bake' button to bake all Inputs at once.</p><p>You will be given the choice to specify the file extension for the Outputs, or you can let CyberChef attempt to detect the filetype of each one. If an Output's type is not clear, CyberChef will use the '.dat' extension.</p>"> <button type="button" class="btn btn-primary bmd-btn-icon" id="save-all-to-file" data-toggle="tooltip" title="Save all outputs to a zip file" data-help-title="Saving all outputs to a zip file" data-help="<p>When operating with multiple tabbed Inputs and Outputs, you can use this button to save off all the Outputs at once in a ZIP file.</p><p>Use the 'Bake' button to bake all Inputs at once.</p><p>You will be given the choice to specify the file extension for the Outputs, or you can let CyberChef attempt to detect the filetype of each one. If an Output's type is not clear, CyberChef will use the '.dat' extension.</p>">
<i class="material-icons">archive</i> <i class="material-icons">archive</i>
</button> </button>
<button type="button" aria-label="save" class="btn btn-primary bmd-btn-icon" id="save-to-file" data-toggle="tooltip" title="Save output to file" data-help-title="Saving output to a file" data-help="The currently active Output can be saved to a file. You will be asked to specify a filename. CyberChef will attempt to guess the correct file extension based on the data. If a file type cannot be detected, the extension defaults to '.dat' but can be changed manually."> <button type="button" aria-label="save" class="btn btn-primary bmd-btn-icon" id="save-to-file" data-toggle="tooltip" title="Save output to file" data-help-title="Saving output to a file" data-help="The currently active Output can be saved to a file. You will be asked to specify a filename. CyberChef will attempt to guess the correct file extension based on the data. If a file type cannot be detected, the extension defaults to '.dat' but can be changed manually.">
@ -309,7 +204,7 @@
</div> </div>
<div id="output-wrapper" class="no-select"> <div id="output-wrapper" class="no-select">
<div id="output-tabs-wrapper" style="display: none" class="no-select"> <div id="output-tabs-wrapper" class="no-select">
<span id="btn-previous-output-tab" class="output-tab-buttons"> <span id="btn-previous-output-tab" class="output-tab-buttons">
&lt; &lt;
</span> </span>
@ -386,7 +281,7 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="form-group" id="save-link-group"> <div class="form-group" id="save-link-group">
<h6 style="display: inline">Deep link</h6> <h6>Deep link</h6>
<div class="save-link-options"> <div class="save-link-options">
<label class="checkbox-inline"> <label class="checkbox-inline">
<input type="checkbox" id="save-link-recipe-checkbox" checked> Include recipe <input type="checkbox" id="save-link-recipe-checkbox" checked> Include recipe
@ -396,7 +291,7 @@
</label> </label>
</div> </div>
<br><br> <br><br>
<a id="save-link" style="word-wrap: break-word;"></a> <a id="save-link"></a>
</div> </div>
</div> </div>
</div> </div>
@ -437,7 +332,7 @@
<h5 class="modal-title">Options</h5> <h5 class="modal-title">Options</h5>
</div> </div>
<div class="modal-body" id="options-body"> <div class="modal-body" id="options-body">
<p style="font-weight: bold">Please note that these options will persist between sessions.</p> <p>Please note that these options will persist between sessions.</p>
<div class="form-group option-item"> <div class="form-group option-item">
<label for="theme" class="bmd-label-floating"> Theme (only supported in modern browsers)</label> <label for="theme" class="bmd-label-floating"> Theme (only supported in modern browsers)</label>
@ -546,9 +441,9 @@
</div> </div>
<div class="modal-body" id="favourites-body"> <div class="modal-body" id="favourites-body">
<ul> <ul>
<li><span style="font-weight: bold">To add:</span> drag the operation over the favourites category and drop it</li> <li><span class="favourites-action-label">To add:</span> drag the operation over the favourites category and drop it</li>
<li><span style="font-weight: bold">To reorder:</span> drag up and down in the list below</li> <li><span class="favourites-action-label">To reorder:</span> drag up and down in the list below</li>
<li><span style="font-weight: bold">To remove:</span> hit the delete button or drag out of the list below</li> <li><span class="favourites-action-label">To remove:</span> hit the delete button or drag out of the list below</li>
</ul> </ul>
<br> <br>
<ul id="edit-favourites-list" class="op-list"></ul> <ul id="edit-favourites-list" class="op-list"></ul>
@ -668,7 +563,7 @@
<br> <br>
<a class="btn btn-primary" href="https://github.com/gchq/CyberChef/issues/new/choose" 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>
<div role="tabpanel" class="tab-pane" id="about" style="padding: 20px;"> <div role="tabpanel" class="tab-pane" id="about">
<h5><strong>What</strong></h5> <h5><strong>What</strong></h5>
<p>A simple, intuitive web app for analysing and decoding data without having to deal with complex tools or programming languages. CyberChef encourages both technical and non-technical people to explore data formats, encryption and compression.</p><br> <p>A simple, intuitive web app for analysing and decoding data without having to deal with complex tools or programming languages. CyberChef encourages both technical and non-technical people to explore data formats, encryption and compression.</p><br>
@ -693,7 +588,7 @@
<p>There are <span class="num-ops">hundreds of</span> useful operations in CyberChef for anyone working on anything vaguely Internet-related, whether you just want to convert a timestamp to a different format, decompress gzipped data, create a SHA3 hash, or parse an X.509 certificate to find out who issued it.</p> <p>There are <span class="num-ops">hundreds of</span> useful operations in CyberChef for anyone working on anything vaguely Internet-related, whether you just want to convert a timestamp to a different format, decompress gzipped data, create a SHA3 hash, or parse an X.509 certificate to find out who issued it.</p>
<p>It’s the Cyber Swiss Army Knife.</p> <p>It’s the Cyber Swiss Army Knife.</p>
</div> </div>
<div role="tabpanel" class="tab-pane" id="keybindings" style="padding: 20px;"> <div role="tabpanel" class="tab-pane" id="keybindings">
<table class="table table-condensed table-bordered table-hover" id="keybList"></table> <table class="table table-condensed table-bordered table-hover" id="keybList"></table>
</div> </div>
</div> </div>
@ -702,7 +597,7 @@
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div> </div>
<a href="https://github.com/gchq/CyberChef"> <a href="https://github.com/gchq/CyberChef">
<img aria-hidden="true" style="position: absolute; top: 0; right: 0; border: 0;" src="<%- require('../static/images/fork_me.png') %>" alt="Fork me on GitHub"> <img aria-hidden="true" class="fork-me-ribbon" src="<%- require('../static/images/fork_me.png') %>" alt="Fork me on GitHub">
</a> </a>
</div> </div>
</div> </div>
@ -774,7 +669,7 @@
<label for="input-num-results" class="bmd-label-floating">Number of results</label> <label for="input-num-results" class="bmd-label-floating">Number of results</label>
<input type="number" class="form-control" id="input-num-results" value="20" min="1"> <input type="number" class="form-control" id="input-num-results" value="20" min="1">
</div> </div>
<div style="clear:both"></div> <div class="clear-both"></div>
<h6>Results</h6> <h6>Results</h6>
<ul id="input-search-results"></ul> <ul id="input-search-results"></ul>
</div> </div>

5
src/web/index_assets/ieCheck.js Normal file
View File

@ -0,0 +1,5 @@
// Must be text/javascript rather than application/javascript otherwise IE won't recognise it...
if (navigator.userAgent && navigator.userAgent.match(/Trident/)) {
document.getElementById("notice").innerHTML += "Internet Explorer is not supported, please use Firefox or Chrome instead";
alert("Internet Explorer is not supported, please use Firefox or Chrome instead");
}

108
src/web/index_assets/loadTheme.js Normal file
View File

@ -0,0 +1,108 @@
"use strict";
// Load theme before the preloader is shown
try {
document.querySelector(":root").className = (JSON.parse(localStorage.getItem("options")) || {}).theme;
} catch (err) {
// LocalStorage access is denied by security settings
}
// Define loading messages
const loadingMsgs = [
"Proving P = NP...",
"Computing 6 x 9...",
"Mining bitcoin...",
"Dividing by 0...",
"Initialising Skynet...",
"[REDACTED]",
"Downloading more RAM...",
"Ordering 1s and 0s...",
"Navigating neural network...",
"Importing machine learning...",
"Issuing Alice and Bob one-time pads...",
"Mining bitcoin cash...",
"Generating key material by trying to escape vim...",
"for i in range(additional): Pylon()",
"(creating unresolved tension...",
"Symlinking emacs and vim to ed...",
"Training branch predictor...",
"Timing cache hits...",
"Speculatively executing recipes...",
"Adding LLM hallucinations...",
"Decompressing malware..."
];
// Shuffle array using Durstenfeld algorithm
for (let i = loadingMsgs.length - 1; i > 0; --i) {
const j = Math.floor(Math.random() * (i + 1));
const temp = loadingMsgs[i];
loadingMsgs[i] = loadingMsgs[j];
loadingMsgs[j] = temp;
}
/**
* Show next loading message and move it to the end of the array
**/
function changeLoadingMsg() {
const msg = loadingMsgs.shift();
loadingMsgs.push(msg);
try {
const el = document.getElementById("preloader-msg");
if (!el.classList.contains("loading"))
el.classList.add("loading"); // Causes CSS transition on first message
el.innerHTML = msg;
} catch (err) {
// This error was likely caused by the DOM not being ready yet,
// so we wait another second and then try again.
setTimeout(changeLoadingMsg, 1000);
}
}
changeLoadingMsg();
window.loadingMsgsInt = setInterval(changeLoadingMsg, (Math.random() * 2000) + 1500);
/**
* If any errors are thrown during loading, handle them here
*/
function loadingErrorHandler(e) {
/**
* Escape HTMLs
*/
function escapeHtml(str) {
const HTML_CHARS = {
"&": "&amp;",
"<": "&lt;",
">": "&gt;",
'"': "&quot;",
"'": "&#x27;", // &apos; not recommended because it's not in the HTML spec
"/": "&#x2F;", // forward slash is included as it helps end an HTML entity
"`": "&#x60;"
};
return str.replace(/[&<>"'/`]/g, function (match) {
return HTML_CHARS[match];
});
}
const msg = e.message +
(e.filename ? "\nFilename: " + e.filename : "") +
(e.lineno ? "\nLine: " + e.lineno : "") +
(e.colno ? "\nColumn: " + e.colno : "") +
(e.error ? "\nError: " + e.error : "") +
"\nUser-Agent: " + navigator.userAgent +
"\nCyberChef version: <%= htmlWebpackPlugin.options.version %>";
clearInterval(window.loadingMsgsInt);
document.getElementById("preloader").remove();
document.getElementById("preloader-msg").remove();
document.getElementById("preloader-error").innerHTML =
"CyberChef encountered an error while loading.<br><br>" +
"The following browser versions are supported:" +
"<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/choose'>" +
"raise an issue</a> including the following details:<br><br>" +
"<pre>" + escapeHtml(msg) + "</pre>";
};
window.addEventListener("error", loadingErrorHandler);

59
src/web/index_assets/style.css Normal file
View File

@ -0,0 +1,59 @@
#banner .col:first-child {
text-align: left;
padding-left: 10px;
}
#banner .col:last-child {
text-align: right;
padding-right: 0;
}
#controls-content .form-group {
display: contents;
}
#open-folder,
#open-file {
display: none;
}
#input-tabs-wrapper,
#output-tabs-wrapper {
display: none;
}
#save-all-to-file {
display: none;
}
#save-link-group h6 {
display: inline;
}
#save-link {
word-wrap: break-word;
}
#options-body > p:first-child {
font-weight: bold;
}
.favourites-action-label {
font-weight: bold;
}
#about,
#keybindings {
padding: 20px;
}
.fork-me-ribbon {
position: absolute;
top: 0;
right: 0;
border: 0;
}
.clear-both {
clear: both;
}

2
src/web/waiters/BackgroundWorkerWaiter.mjs
View File

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

4
src/web/waiters/InputWaiter.mjs
View File

@ -5,8 +5,8 @@
* @license Apache-2.0 * @license Apache-2.0
*/ */
import LoaderWorker from "worker-loader?inline=no-fallback!../workers/LoaderWorker.js"; import LoaderWorker from "worker-loader!../workers/LoaderWorker.js";
import InputWorker from "worker-loader?inline=no-fallback!../workers/InputWorker.mjs"; import InputWorker from "worker-loader!../workers/InputWorker.mjs";
import Utils, {debounce} from "../../core/Utils.mjs"; import Utils, {debounce} from "../../core/Utils.mjs";
import {toBase64} from "../../core/lib/Base64.mjs"; import {toBase64} from "../../core/lib/Base64.mjs";
import cptable from "codepage"; import cptable from "codepage";

2
src/web/waiters/OutputWaiter.mjs
View File

@ -10,7 +10,7 @@ import Dish from "../../core/Dish.mjs";
import {isUTF8, CHR_ENC_SIMPLE_REVERSE_LOOKUP} from "../../core/lib/ChrEnc.mjs"; import {isUTF8, CHR_ENC_SIMPLE_REVERSE_LOOKUP} from "../../core/lib/ChrEnc.mjs";
import {detectFileType} from "../../core/lib/FileType.mjs"; import {detectFileType} from "../../core/lib/FileType.mjs";
import FileSaver from "file-saver"; import FileSaver from "file-saver";
import ZipWorker from "worker-loader?inline=no-fallback!../workers/ZipWorker.mjs"; import ZipWorker from "worker-loader!../workers/ZipWorker.mjs";
import { import {
EditorView, EditorView,

4
src/web/waiters/WorkerWaiter.mjs
View File

@ -5,8 +5,8 @@
* @license Apache-2.0 * @license Apache-2.0
*/ */
import ChefWorker from "worker-loader?inline=no-fallback!../../core/ChefWorker.js"; import ChefWorker from "worker-loader!../../core/ChefWorker.js";
import DishWorker from "worker-loader?inline=no-fallback!../workers/DishWorker.mjs"; import DishWorker from "worker-loader!../workers/DishWorker.mjs";
import { debounce } from "../../core/Utils.mjs"; import { debounce } from "../../core/Utils.mjs";
/** /**

15
webpack.config.js
View File

@ -99,6 +99,9 @@ module.exports = {
context: "node_modules/node-forge/dist", context: "node_modules/node-forge/dist",
from: "prime.worker.min.js", from: "prime.worker.min.js",
to: "assets/forge/" to: "assets/forge/"
}, {
from: "src/web/index_assets/",
to: "assets/index_assets/"
} }
] ]
}), }),
@ -202,7 +205,10 @@ module.exports = {
}, },
{ {
test: /\.svg$/, test: /\.svg$/,
type: "asset/inline", type: "asset/resource",
generator: {
filename: "assets/[hash][ext]"
}
}, },
{ // Store font .fnt and .png files in a separate fonts folder { // Store font .fnt and .png files in a separate fonts folder
test: /(\.fnt$|bmfonts\/.+\.png$)/, test: /(\.fnt$|bmfonts\/.+\.png$)/,
@ -219,10 +225,13 @@ module.exports = {
filename: "images/[name][ext]" filename: "images/[name][ext]"
} }
}, },
{ // Third party images are inlined { // Third party images served as files
test: /\.(png|jpg|gif)$/, test: /\.(png|jpg|gif)$/,
exclude: /web\/static/, exclude: /web\/static/,
type: "asset/inline", type: "asset/resource",
generator: {
filename: "assets/[hash][ext]"
}
}, },
] ]
}, },