mirror of
https://github.com/gchq/CyberChef.git
synced 2025-04-23 00:06:17 -04:00
Added a contextual help feature and started writing help descriptions
This commit is contained in:
n1474335
parent
a24fdf4250
commit
d6f8e0a520
7 changed files with 142 additions and 37 deletions
|
|
@ -146,7 +146,9 @@
|
|||
<div id="content-wrapper">
|
||||
<div id="banner" class="row">
|
||||
<div class="col" style="text-align: left; padding-left: 10px;">
|
||||
<a href="CyberChef_v<%= htmlWebpackPlugin.options.version %>.zip" download>Download CyberChef <i class="material-icons">file_download</i></a>
|
||||
<a href="CyberChef_v<%= htmlWebpackPlugin.options.version %>.zip" download data-help-title="Downloading CyberChef" data-help="<p>CyberChef runs entirely within your browser with no server-side component, meaning that none of your input data or Recipe configuration is sent anywhere, whether you use the live, official version of CyberChef or a downloaded, standalone version (assuming it is unmodified).</p><p>If you would like to download your own standalone copy of CyberChef, you can click the 'Download CyberChef' link and get a ZIP file containing the whole web app. This can be run locally or hosted on a web server with no configuration required.</p><p>Be aware that the standalone version will never update itself, meaning it will not receive bug fixes or new features until you re-download newer versions manually.</p><p>As a user, it is also worth noting that downloaded, standalone 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 class="col-md-6" id="notice-wrapper">
|
||||
<span id="notice">
|
||||
|
|
@ -161,19 +163,25 @@
|
|||
</span>
|
||||
</div>
|
||||
<div class="col" style="text-align: right; padding-right: 0;">
|
||||
<a href="#" id="options">Options <i class="material-icons">settings</i></a>
|
||||
<a href="#" id="support" data-toggle="modal" data-target="#support-modal">About / Support <i class="material-icons">help</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>
|
||||
</div>
|
||||
</div>
|
||||
<div id="workspace-wrapper">
|
||||
<div id="operations" class="split split-horizontal no-select">
|
||||
<div class="title no-select">Operations</div>
|
||||
<input id="search" type="search" class="form-control" placeholder="Search..." autocomplete="off" tabindex="2">
|
||||
<div class="title no-select" data-help-title="Operations list" data-help="<p>The Operations list contains all the operations in CyberChef arranged into categories. Some operations may be present in multiple categories. You can search for operations using the search box.</p><p>To use an operation, either double click it, or drag it into the Recipe pane. You will then be able to configure its arguments (or 'Ingredients' in CyberChef terminology).</p>">
|
||||
Operations
|
||||
</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>">
|
||||
<ul id="search-results" class="op-list"></ul>
|
||||
<div id="categories" class="panel-group no-select"></div>
|
||||
</div>
|
||||
|
||||
<div id="recipe" class="split split-horizontal no-select">
|
||||
<div id="recipe" class="split split-horizontal no-select" data-help-title="Recipe pane" data-help="<p>The Recipe pane is where your chosen Operations are configured. If you are a programmer, think of these as functions. If you are not a programmer, these are like steps in a cake recipe. The Input data will be processed based on the Operations in your Recipe.</p><ul><li>To reorder, simply drag and drop the Operations into the order your require</li><li>To remove an operation, either double click it, or drag it outside of the Recipe pane</li></ul><p>The arguments (or 'Ingredients' in CyberChef terminology) can be configured to change how an Operation processes the data.</p>">
|
||||
<div class="title no-select">
|
||||
Recipe
|
||||
<span class="pane-controls hide-on-maximised-output">
|
||||
|
|
@ -192,17 +200,17 @@
|
|||
|
||||
<div id="controls" class="no-select hide-on-maximised-output">
|
||||
<div id="controls-content">
|
||||
<button type="button" class="mx-2 btn btn-lg btn-secondary" id="step" data-toggle="tooltip" title="Step through the recipe">
|
||||
<button type="button" class="mx-2 btn btn-lg btn-secondary" id="step" data-toggle="tooltip" title="Step through the recipe" data-help-title="Stepping through the Recipe" data-help="<p>The Step button allows you to execute one operation at a time, rather than running the whole Recipe from beginning to end.</p><p>Step allows you to inspect the data at each stage of the Recipe and understand what is being passed to the next operation.</p>">
|
||||
Step
|
||||
</button>
|
||||
|
||||
<button type="button" class="mx-2 btn btn-lg btn-success btn-raised btn-block" id="bake">
|
||||
<button type="button" class="mx-2 btn btn-lg btn-success btn-raised btn-block" id="bake" data-help-title="Baking" data-help="<p>Baking causes CyberChef to run the Recipe against your data. This involves three steps:</p><ol><li>The data in the Input is encoded into bytes using the character encoding selected in the Input status bar.</li><li>The data is run through each of the operations in the Recipe in turn with the output of one operation being fed into the next operation as its input.</li><li>The outcome of the final operation in the Recipe is decoded into Output text using the character encoding selected in the Output status bar.</li></ol><p>If there are multiple Inputs, the Bake button causes every Input to be baked simultaneously.</p>">
|
||||
<img aria-hidden="true" src="<%- require('../static/images/cook_male-32x32.png') %>" alt="Chef Icon"/>
|
||||
<span>Bake!</span>
|
||||
</button>
|
||||
|
||||
<div class="form-group" style="display: contents;">
|
||||
<div class="mx-1 checkbox">
|
||||
<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">
|
||||
<input type="checkbox" checked="checked" id="auto-bake">
|
||||
<br>Auto Bake
|
||||
|
|
@ -214,7 +222,7 @@
|
|||
</div>
|
||||
|
||||
<div class="split split-horizontal" id="IO">
|
||||
<div id="input" class="split no-select">
|
||||
<div id="input" class="split no-select" data-help-title="Input pane" data-help="<p>Input data can be entered by typing it in, pasting it in, dragging it in, or using the 'Load file' or 'Load folder' buttons.</p><p>CyberChef does its best to represent data as accurately as possible to ensure you know exactly what you are working with. Non-printable characters are represented using control character pictures, for example a null byte (0x00) is displayed like this: <span title='Control character null' aria-label='Control character null' class='cm-specialChar'>␀</span>.</p>">
|
||||
<div class="title no-select">
|
||||
<label for="input-text">Input</label>
|
||||
<span class="pane-controls">
|
||||
|
|
@ -268,7 +276,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="output" class="split">
|
||||
<div id="output" class="split" data-help-title="Output pane" data-help="<p>This pane displays the results of the Recipe after it has processed your Input.</p><p>CyberChef does its best to represent data as accurately as possible to ensure you know exactly what you are working with. Non-printable characters are represented using control character pictures, for example a null byte (0x00) is displayed like this: <span title='Control character null' aria-label='Control character null' class='cm-specialChar'>␀</span>.</p><p>When copying these characters from the Output, the original byte value should be copied into your clipboard, rather than the control character picture itself.</p>">
|
||||
<div class="title no-select">
|
||||
<label for="output-text">Output</label>
|
||||
<span class="pane-controls">
|
||||
|
|
@ -325,7 +333,7 @@
|
|||
<div id="output-text"></div>
|
||||
<div id="output-loader">
|
||||
<div id="output-loader-animation">
|
||||
<object id="bombe" data="<%- require('../static/images/bombe.svg') %>" width="100%" height="100%"></object>
|
||||
<object id="bombe" data="<%- require('../static/images/bombe.svg') %>" width="100%" height="100%" data-help-title="Loading animation" data-help="This loading animation shows an accurate representation of how rotors moved on The Bombe, an electro-mechanical device built at Bletchley Park in 1939 by Alan Turing with refinements by Gordon Welchman in 1940. The Bombe was used by the Government Code and Cipher School (the precursor to GCHQ) to discover daily settings of Enigma machines used by the German military in World War 2.<br><br>More information can be found on <a href='https://wikipedia.org/wiki/Bombe'>Wikipedia</a>."></object>
|
||||
</div>
|
||||
<div class="loading-msg"></div>
|
||||
</div>
|
||||
|
|
@ -531,9 +539,9 @@
|
|||
</div>
|
||||
<div class="modal-body" id="favourites-body">
|
||||
<ul>
|
||||
<li><span style="font-weight: bold">To add:</span> drag the operation over the favourites category</li>
|
||||
<li><span style="font-weight: bold">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 style="font-weight: bold">To remove:</span> hit the red cross or drag out of 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>
|
||||
</ul>
|
||||
<br>
|
||||
<ul id="edit-favourites-list" class="op-list"></ul>
|
||||
|
|
@ -590,8 +598,16 @@
|
|||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="faqs">
|
||||
<div role="tabpanel" class="tab-pane active" id="faqs" data-help-title="FAQ pane" data-help="The Frequently Asked Questions pane provides answers to some of the most common queries people have about CyberChef.">
|
||||
<br>
|
||||
<a class="btn btn-primary" data-toggle="collapse" data-target="#faq-contextual-help">
|
||||
How does X feature work?
|
||||
</a>
|
||||
<div class="collapse" id="faq-contextual-help">
|
||||
<p>CyberChef has a contextual help feature. Just hover your cursor over a feature that you want to learn more about and press <code>F1</code> on your keyboard to get some information about it. Give it a try by hovering over this text and pressing <code>F1</code> now!</code></p>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<a class="btn btn-primary" data-toggle="collapse" data-target="#faq-examples">
|
||||
What sort of things can I do with CyberChef?
|
||||
</a>
|
||||
|
|
@ -704,6 +720,25 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="help-modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">
|
||||
<i class="material-icons modal-icon">info_outline</i>
|
||||
<span id="help-title"></span>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" id="help-ok" data-dismiss="modal">Ok</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="input-tab-modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue