added standard auth section

This commit is contained in:
Andy L WSL 2026-03-01 19:03:39 +00:00
parent 0ad1a86a98
commit a802a5bffe
16 changed files with 1640 additions and 1024 deletions

View File

@ -1,3 +1,4 @@
# CyberChef Cloud Operations Tests
# Copy this file to `.env` and fill in your valid GCP API Key if you want to run the Nightwatch browser tests against live Cloud APIs.
CYBERCHEF_GCP_TEST_KEY="YOUR_API_KEY_HERE"
CLIENT_ID="YOUR_CLIENT_ID_HERE"

1
.gitignore vendored
View File

@ -14,3 +14,4 @@ src/node/index.mjs
tests/browser/output/*
.node-version
.env
.antigravity

View File

@ -0,0 +1,122 @@
# Guide: Adding New Google Cloud Operations to CyberChef
With the introduction of the Google Identity Services (GIS) Web Application PKCE flow and strict Content Security Policies (CSP), adding new Google Cloud operations requires a few extra steps compared to standard CyberChef operations.
This guide outlines the exact process for creating, securing, and testing a new Google Cloud integration.
## 1. Create the Operation File
Create your new operation in `src/core/operations/` (e.g., `GCloudVisionAnalyze.mjs`).
Include the standard CyberChef operation scaffolding and ensure you import the authentication utilities from `GoogleCloud.mjs`:
```javascript
import Operation from "../Operation.mjs";
import OperationError from "../errors/OperationError.mjs";
import { applyGCPAuth } from "../lib/GoogleCloud.mjs";
class GCloudVisionAnalyze extends Operation {
constructor() {
super();
this.name = "GCloud Vision Analyze";
this.module = "Cloud";
this.description = "Analyzes an image using Google Cloud Vision.";
this.infoURL = "https://cloud.google.com/vision/docs";
this.inputType = "ArrayBuffer";
this.outputType = "JSON";
this.args = [
/* Your args */
];
}
```
## 2. Leverage `applyGCPAuth`
**Do not** add authentication fields (like API keys or tokens) directly into your new operation's `args`.
Instead, instruct the user (via the `description`) to place the `Authenticate Google Cloud` operation at the top of their recipe.
Inside your `run` method, use `applyGCPAuth` to seamlessly inject the credentials. This handles API Keys, Personal Access Tokens (PATs), and the GIS OAuth Tokens interchangeably:
```javascript
async run(input, args) {
let url = "https://vision.googleapis.com/v1/images:annotate";
let headers = { "Content-Type": "application/json" };
// 1. Inject Auth into URL or Headers
try {
[url, headers] = applyGCPAuth(url, headers);
} catch (e) {
throw new OperationError(e.message);
}
// 2. Perform Fetch
const response = await fetch(url, {
method: "POST",
headers: headers,
body: JSON.stringify({ /* payload */ })
});
// 3. Handle response...
}
```
## 3. Update Content Security Policy (CSP)
CyberChef utilizes strict CSP headers to prevent XSS attacks from exfiltrating the OAuth tokens stored in `sessionStorage`.
If your new operation contacts a new Google API endpoint, **the request will be blocked by the browser** unless you whitelist it.
1. Open `src/web/html/index.html`.
2. Locate the `<meta http-equiv="Content-Security-Policy">` tag in the `<head>`.
3. Find the `connect-src` directive.
4. Append your new API endpoint (e.g., `https://vision.googleapis.com`).
Example:
```html
<meta http-equiv="Content-Security-Policy" content="... connect-src 'self' https://accounts.google.com https://oauth2.googleapis.com https://www.googleapis.com https://storage.googleapis.com https://speech.googleapis.com https://translation.googleapis.com https://vision.googleapis.com;" />
```
## 4. Testing End-to-End (Nightwatch)
Because the PKCE OAuth flow relies on a popup protected by anti-bot measures (reCAPTCHA) from Google Identity Services, **it cannot be fully automated** with headless browsers like Nightwatch.
For E2E tests, you **must use** either an API Key or a PAT (`CYBERCHEF_GCP_TEST_KEY` or `CYBERCHEF_GCP_TEST_TOKEN`).
1. Open `tests/browser/03_cloud_ops.js`.
2. Create your test suite.
3. Use the PAT or API Key fallback logic present in other tests to inject credentials into your dummy recipe:
```javascript
"GCloud Vision Analyze: Translates image to text": function (browser) {
let testToken = process.env.CYBERCHEF_GCP_TEST_TOKEN;
// Fallback to gcloud SDK if CYBERCHEF_GCP_TEST_TOKEN isn't set manually
if (!testToken || testToken === "YOUR_OAUTH_TOKEN_HERE") {
try {
testToken = require("child_process").execSync("gcloud auth print-access-token", { stdio: "pipe", encoding: "utf-8" }).trim();
} catch (e) {
console.log("No valid token found. Skipping live Vision API test.");
return;
}
}
browserUtils.loadRecipeConfig(browser, [
{
op: "Authenticate Google Cloud",
args: [
"Personal Access Token (PAT)",
{ option: "UTF8", string: testToken },
"cyberchefcloud",
true
]
},
{
op: "GCloud Vision Analyze",
args: []
}
], "Dummy Input data...");
browser.waitForElementNotVisible("#snackbar-container", 6000);
browserUtils.bake(browser);
browser.pause(5000);
// Assert output
}
```
Run tests with `npm run test:browser` or `npx nightwatch tests/browser/03_cloud_ops.js` (while `npm run start` is running locally).

View File

@ -1,37 +1,58 @@
# Google Cloud Setup Guide for CyberChef
To use Google Cloud capabilities (like Google Translate) within CyberChef, you need to configure a Google Cloud Project and obtain an authentication string (either an API Key or an OAuth Token).
To use Google Cloud capabilities (like Google Translate, Speech-to-Text, or Cloud Storage) within CyberChef, you need to configure a Google Cloud Project and obtain an authentication string. We strongly recommend using **OAuth 2.0 (Web Application: PKCE)** as it is the most secure method for browser-based applications like CyberChef.
## Method 1: API Key (Recommended for simplicity)
By setting up a personal Cloud Project, your CyberChef instance communicates directly with your Google Cloud without a middleman.
1. **Create a Project:**
- Go to the [Google Cloud Console](https://console.cloud.google.com/).
- Click on the project dropdown at the top and select **New Project**.
- Name your project (e.g., `cyberchefcloud`) and click **Create**.
## Method 1: OAuth 2.0 (Web Application: PKCE) - Highly Recommended
2. **Enable the API:**
- In the Cloud Console search bar, type **"Cloud Translation API"** and select it.
- Click **Enable**.
- *(Note: You will need to have billing enabled on your Google Cloud account for the Translation API, even for the free tier).*
This method uses your Google account and Google Identity Services to grant CyberChef temporary, secure access to your Google Cloud Project. Because CyberChef is a client-side architecture web app without a backend server, we use the Authorization Code Flow with Proof Key for Code Exchange (PKCE).
3. **Create the API Key:**
- Navigate to **APIs & Services > Credentials** in the left sidebar.
- Click **+ CREATE CREDENTIALS** at the top and select **API Key**.
- Your API Key will be generated. Copy this key; you will need it for the CyberChef "GCP Auth String" input.
### Step 1: Create a Project
1. Go to the [Google Cloud Console](https://console.cloud.google.com/).
2. Click on the project dropdown at the top and select **New Project**.
3. Name your project (e.g., `cyberchef-personal`) and click **Create**.
4. **Secure the API Key (CRITICAL):**
- Since CyberChef runs entirely in your browser, your API Key will be visible to anyone you share your CyberChef recipe with or who inspects the network traffic. you **MUST** restrict it.
- Click on the newly created API Key to edit its settings.
- Under **Application restrictions**, select **Websites**.
- Under **Website restrictions**, click **ADD**.
- Enter the URLs where your CyberChef instance is hosted (e.g., `https://gchq.github.io/CyberChef/*` or `http://localhost:8080/*` for local testing).
- Under **API restrictions**, select **Restrict key**.
- Check the box for **Cloud Translation API**.
- Click **SAVE**.
### Step 2: Enable Required APIs
You must enable the APIs for any operation you intend to use.
1. In the Cloud Console search bar, type the name of the API and select it, then click **Enable**.
- For **Google Translate**: Enable "Cloud Translation API" (requires billing enabled).
- For **Speech-to-Text**: Enable "Cloud Speech-to-Text API".
- For **Read/List Bucket**: Enable "Cloud Storage JSON API" (usually enabled by default).
## Method 2: Temporary OAuth Token (Recommended for Security)
### Step 3: Configure the OAuth Consent Screen
1. Navigate to **APIs & Services > OAuth consent screen** in the left sidebar.
2. Select **External** user type and click **Create**.
3. Fill in the required fields (App Name, User Support Email, Developer Contact Info). You can use your own email for all of these. Click **Save and Continue**.
4. Skip the **Scopes** section by clicking **Save and Continue**.
5. **CRITICAL STEP: Configure Test Users**.
- Navigate to **APIs & Services > OAuth consent screen** > **Audience** > **Test Users** > **Add Users**
- Type your own Google email address here (the one you use to login to the Cloud Console).
- *(Since we will leave the app in "Testing" state forever, only users listed here can authenticate).*
- **WARNING**: Do **NOT** click "Publish App". Leave the publishing status as "Testing". If you publish it, Google will require your app to undergo a verification process.
If you have the Google Cloud SDK (`gcloud`) installed locally and you are authorized in your project, you can generate a short-lived token to use instead of an API Key. This is much more secure because the token expires automatically.
### Step 4: Create OAuth Client ID
1. Navigate to **APIs & Services > Credentials** in the left sidebar.
2. Click **+ CREATE CREDENTIALS** at the top and select **OAuth client ID**.
3. For **Application type**, select **Web application**.
4. Name it something like "CyberChef PKCE Client".
5. Under **Authorized JavaScript origins**, click **ADD URI**.
- For local testing, add: `http://localhost:8080`
- For production, add your deployed CyberChef URL (e.g., `https://gchq.github.io`).
6. Click **Create**.
7. A box will appear with your **Client ID**. Copy this string. *(Note: You do not need the Client Secret).*
### Step 5: Authenticate in CyberChef
1. In CyberChef, add the **Authenticate Google Cloud** operation to the TOP of your recipe.
2. Set "Auth Type" to **OAuth 2.0 (Web Application: PKCE)**.
3. Paste your Client ID into the "Credentials" box.
4. Click **Bake**. CyberChef will popup a secure Google Login window. Your session token is now securely stored in your browser's Session Storage for the duration of the tab being open.
---
## Method 2: Temporary Personal Access Token (PAT)
If you have the Google Cloud SDK (`gcloud`) installed locally and you are authorized in your project, you can generate a short-lived token to use. This is secure because the token expires automatically.
1. Ensure you are logged into your `gcloud` CLI:
```bash
@ -41,4 +62,26 @@ If you have the Google Cloud SDK (`gcloud`) installed locally and you are author
```bash
gcloud auth print-access-token
```
3. Copy the output token and paste it into the CyberChef "GCP Auth String" input, making sure to change the "Auth Type" dropdown to **OAuth Token**.
3. In CyberChef's **Authenticate Google Cloud** operation, set "Auth Type" to **Personal Access Token (PAT)** and paste the token output into the Credentials box.
---
## Method 3: API Key (For Simple APIs only)
*Warning: API Keys are not recommended for operations that access private data like Cloud Storage. They are best suited for simple APIs like Translation.*
1. **Create the API Key:**
- Navigate to **APIs & Services > Credentials** in the left sidebar.
- Click **+ CREATE CREDENTIALS** at the top and select **API Key**.
- Your API Key will be generated. Copy this key.
2. **Secure the API Key (CRITICAL):**
- Since CyberChef runs entirely in your browser, your API Key will be visible to anyone you share your CyberChef recipe with or who inspects the network traffic. you **MUST** restrict it.
- Click on the newly created API Key to edit its settings.
- Under **Application restrictions**, select **Websites**.
- Under **Website restrictions**, click **ADD**.
- Enter the URLs where your CyberChef instance is hosted (e.g., `https://gchq.github.io/CyberChef/*` or `http://localhost:8080/*` for local testing).
- Under **API restrictions**, select **Restrict key** and check the relevant API (e.g., **Cloud Translation API**).
- Click **SAVE**.
3. In CyberChef's **Authenticate Google Cloud** operation, set "Auth Type" to **API Key** and paste the key into the Credentials box.

View File

@ -58,7 +58,9 @@ npm run test
CyberChef is equipped with Nightwatch for end-to-end testing of features running in a real Chromium browser. This is extremely useful for Cloud Operations that cannot be easily tested within the headless NodeJS environment.
### Setting up API Keys
**Important Note on Authentication:** Google Identity Services (GIS), the library used for the secure **OAuth 2.0 (Web Application: PKCE)** flow, contains strict anti-automation reCAPTCHA logic. Because of this, it is nearly impossible to automate the Google Login popup using standard E2E frameworks like Nightwatch. Therefore, all automated Nightwatch tests utilize either **API Keys** or **Personal Access Tokens (PATs)** to authenticate. Manual testing is still required to verify the PKCE Popup flow works as expected for human users.
### Setting up Credentials
To prevent live API keys from being leaked in CI/CD, the Cloud API browser tests rely on local environment variables:
1. Copy the `.env.template` file to `.env`:
@ -66,6 +68,7 @@ To prevent live API keys from being leaked in CI/CD, the Cloud API browser tests
cp .env.template .env
```
2. Open `.env` and replace `YOUR_API_KEY_HERE` with your actual Google Cloud API key for the `CYBERCHEF_GCP_TEST_KEY` variable. Ensure the API Key restrictions at console.cloud.google.com are set up to accept requests from `http://localhost:8080/*`.
3. If tests require a PAT, you must update `CYBERCHEF_GCP_TEST_TOKEN` with a fresh token obtained via `gcloud auth print-access-token` before running the tests.
### Running Nightwatch Tests

36
docs/Troubleshooting.md Normal file
View File

@ -0,0 +1,36 @@
# Google Cloud Troubleshooting Guide
## Error: "401 Anonymous caller" or "403 Permission 'storage.objects.list' denied"
If you successfully authenticated with the **Authenticate Google Cloud** operation but received a `401` or `403` error when trying to run an operation like **GCloud List Bucket** or **GCloud Read File**, the issue is **Identity and Access Management (IAM)**.
Even though your token is valid (Authentication), your Google Account does not have the necessary permissions (Authorization) to perform that specific action on that specific resource.
### How to Fix IAM Permissions
1. **Verify Your Google Login Account**
Make sure the email address you selected in the Google Login popup is the *exact same* email address that holds permissions in your Google Cloud Project.
2. **Grant Storage Roles**
To read from Cloud Storage, your Google Account must be granted a role that contains the required permissions (like `storage.objects.list` and `storage.objects.get`).
- Go to the [Google Cloud Console](https://console.cloud.google.com).
- Navigate to **IAM & Admin > IAM**.
- Find your email address in the list of principals.
- Click the pencil icon (Edit principal) next to your name.
- Click **Add Another Role**.
- To fully utilize the CyberChef Cloud Storage operations, add the **Storage Object Viewer** role (or **Storage Object Admin** if you plan to write files later).
- Click **Save**.
*Note: IAM changes can take anywhere from 60 seconds to a few minutes to propagate across Google's infrastructure.*
3. **Check Bucket-Level Permissions**
If the bucket belongs to a different project than your OAuth Client ID, or has "fine-grained" access control instead of "Uniform" access control, you may need to grant yourself permission directly on the bucket itself.
- Navigate to **Cloud Storage > Buckets**.
- Click on the bucket you are trying to read.
- Go to the **Permissions** tab.
- Click **Grant Access**.
- Add your Google email address and assign the **Storage Object Viewer** role.
4. **Retry the Operation**
After waiting two minutes for IAM propagation, refresh CyberChef (this forces a new session and drops the old token). Re-authenticate with **Authenticate Google Cloud**, then bake the recipe again.

View File

@ -6,17 +6,38 @@
import OperationError from "../errors/OperationError.mjs";
/**
* Global store for GCP credentials in this web worker session.
*/
globalThis.__gcpAuthStore = globalThis.__gcpAuthStore || null;
/**
* Retrieves the currently active GCP credentials.
* @returns {Object|null} { authType, authString, quotaProject }
*/
export function get_gcp_credentials() {
if (globalThis.__gcpAuthStore) {
return globalThis.__gcpAuthStore;
}
return null;
}
/**
* Sets the active GCP credentials for the web worker session.
* @param {Object} credObj { authType, authString, quotaProject }
*/
export function set_gcp_credentials(credObj) {
globalThis.__gcpAuthStore = credObj;
}
/**
* Lists objects in a GCS bucket under a given prefix.
*
* @param {string} bucket - The GCS bucket name (without gs://).
* @param {string} prefix - The folder prefix to filter by (e.g. "audio/").
* @param {string} authType - "API Key" or "OAuth Token".
* @param {Object|string} authStringObj - The auth credential.
* @param {string} quotaProject - Optional quota project for ADC OAuth tokens.
* @returns {Promise<Array>} Array of GCS object metadata { name, gs_uri, size, contentType }.
*/
export async function listGCSBucket(bucket, prefix, authType, authStringObj, quotaProject) {
export async function listGCSBucket(bucket, prefix) {
let url = `https://storage.googleapis.com/storage/v1/b/${encodeURIComponent(bucket)}/o`;
const params = new URLSearchParams();
if (prefix) params.set("prefix", prefix);
@ -25,7 +46,7 @@ export async function listGCSBucket(bucket, prefix, authType, authStringObj, quo
if (paramStr) url += `?${paramStr}`;
const headers = new Headers();
const authed = applyGCPAuth(url, headers, authType, authStringObj, quotaProject);
const authed = applyGCPAuth(url, headers);
const response = await fetch(authed.url, { method: "GET", headers: authed.headers, mode: "cors", cache: "no-cache" });
let data;
@ -54,12 +75,9 @@ export async function listGCSBucket(bucket, prefix, authType, authStringObj, quo
* Downloads a file from GCS and returns its raw bytes.
*
* @param {string} gcsUri - Full gs:// URI of the file.
* @param {string} authType - "API Key" or "OAuth Token".
* @param {Object|string} authStringObj - The auth credential.
* @param {string} quotaProject - Optional quota project.
* @returns {Promise<ArrayBuffer>} Raw file bytes.
*/
export async function readGCSFile(gcsUri, authType, authStringObj, quotaProject) {
export async function readGCSFile(gcsUri) {
const match = gcsUri.match(/^gs:\/\/([^/]+)\/(.+)$/);
if (!match) throw new OperationError(`GCloud Read File: Invalid GCS URI: ${gcsUri}`);
const [, bucket, object] = match;
@ -67,7 +85,7 @@ export async function readGCSFile(gcsUri, authType, authStringObj, quotaProject)
let url = `https://storage.googleapis.com/storage/v1/b/${encodeURIComponent(bucket)}/o/${encodedObject}?alt=media`;
const headers = new Headers();
const authed = applyGCPAuth(url, headers, authType, authStringObj, quotaProject);
const authed = applyGCPAuth(url, headers);
const response = await fetch(authed.url, { method: "GET", headers: authed.headers, mode: "cors", cache: "no-cache" });
if (!response.ok) {
@ -84,18 +102,15 @@ export async function readGCSFile(gcsUri, authType, authStringObj, quotaProject)
* @param {string} bucket - Destination bucket name (without gs://).
* @param {string} objectPath - Destination object path within the bucket.
* @param {string} content - Text content to write.
* @param {string} authType - "API Key" or "OAuth Token".
* @param {Object|string} authStringObj - The auth credential.
* @param {string} quotaProject - Optional quota project.
* @returns {Promise<string>} The gs:// URI of the written file.
*/
export async function writeGCSFile(bucket, objectPath, content, authType, authStringObj, quotaProject) {
export async function writeGCSFile(bucket, objectPath, content) {
const encodedObject = encodeURIComponent(objectPath).replace(/%2F/g, "%2F");
let url = `https://storage.googleapis.com/upload/storage/v1/b/${encodeURIComponent(bucket)}/o?uploadType=media&name=${encodedObject}`;
const headers = new Headers();
headers.set("Content-Type", "text/plain; charset=utf-8");
const authed = applyGCPAuth(url, headers, authType, authStringObj, quotaProject);
const authed = applyGCPAuth(url, headers);
const response = await fetch(authed.url, {
method: "POST",
@ -117,15 +132,12 @@ export async function writeGCSFile(bucket, objectPath, content, authType, authSt
*
* @param {string} operationName - The operation ID (numeric string from the API response).
* @param {string} pollUrl - The base polling URL (e.g. https://speech.googleapis.com/v1/operations/).
* @param {string} authType - "API Key" or "OAuth Token".
* @param {Object|string} authStringObj - The auth credential.
* @param {string} quotaProject - Optional quota project.
* @param {number} maxMs - Maximum wait time in milliseconds (default 30 minutes).
* @param {number} intervalMs - Poll interval in milliseconds (default 10 seconds).
* @param {Function} onProgress - Optional callback(elapsedSeconds) called on each poll tick.
* @returns {Promise<Object>} The completed operation response object.
*/
export async function pollLongRunningOperation(operationName, pollUrl, authType, authStringObj, quotaProject, maxMs = 30 * 60 * 1000, intervalMs = 10000, onProgress = null) {
export async function pollLongRunningOperation(operationName, pollUrl, maxMs = 30 * 60 * 1000, intervalMs = 10000, onProgress = null) {
const startTime = Date.now();
const url = `${pollUrl}${operationName}`;
@ -136,7 +148,7 @@ export async function pollLongRunningOperation(operationName, pollUrl, authType,
}
const headers = new Headers();
const authed = applyGCPAuth(url, headers, authType, authStringObj, quotaProject);
const authed = applyGCPAuth(url, headers);
const response = await fetch(authed.url, { method: "GET", headers: authed.headers, mode: "cors", cache: "no-cache" });
let data;
@ -158,52 +170,26 @@ export async function pollLongRunningOperation(operationName, pollUrl, authType,
}
/**
* Common arguments for Google Cloud Platform operations
*
* Spread these into the `args` array of any new GCP operation.
*/
export const GCP_AUTH_ARGS = [
{
"name": "Auth Type",
"type": "option",
"value": ["API Key", "OAuth Token"]
},
{
"name": "GCP Auth String",
"type": "toggleString",
"value": "",
"toggleValues": ["UTF8", "Latin1", "Base64", "Hex"]
},
{
"name": "Quota Project (ADC only)",
"type": "string",
"value": ""
}
];
/**
* Validates and applies GCP authentication to a URL and Headers object.
* Validates and applies GCP authentication to a URL and Headers object
* using the globally cached credentials from AuthenticateGoogleCloud.
*
* @param {string} url - The base URL of the API endpoint.
* @param {Headers} headers - The Headers object for the request.
* @param {string} authType - "API Key" or "OAuth Token".
* @param {Object|string} authStringObj - The authentication string (can be a toggleString object).
* @param {string} quotaProject - Optional quota project for ADC OAuth tokens.
* @returns {Object} An object containing the modified { url, headers }
*/
export function applyGCPAuth(url, headers, authType, authStringObj, quotaProject) {
const authString = typeof authStringObj === "string" ? authStringObj : (authStringObj.string || "");
export function applyGCPAuth(url, headers) {
const creds = get_gcp_credentials();
if (!authString) {
throw new OperationError("Error: Please provide a valid GCP Auth String (API Key or OAuth Token).");
if (!creds || !creds.authString) {
throw new OperationError("No Google Cloud credentials found. Please add the 'Authenticate Google Cloud' operation before this one.");
}
if (authType === "API Key") {
url += `${url.includes('?') ? '&' : '?'}key=${encodeURIComponent(authString)}`;
} else if (authType === "OAuth Token") {
headers.set("Authorization", `Bearer ${authString}`);
if (quotaProject) {
headers.set("x-goog-user-project", quotaProject);
if (creds.authType === "API Key") {
url += `${url.includes('?') ? '&' : '?'}key=${encodeURIComponent(creds.authString)}`;
} else if (creds.authType === "OAuth 2.0 (Web Application: PKCE)" || creds.authType === "Personal Access Token (PAT)") {
headers.set("Authorization", `Bearer ${creds.authString}`);
if (creds.quotaProject) {
headers.set("x-goog-user-project", creds.quotaProject);
}
}

View File

@ -0,0 +1,167 @@
/**
* @author CyberChefCloud
* @copyright Crown Copyright 2026
* @license Apache-2.0
*/
import Operation from "../Operation.mjs";
import OperationError from "../errors/OperationError.mjs";
import { set_gcp_credentials, get_gcp_credentials } from "../lib/GoogleCloud.mjs";
import { isWorkerEnvironment } from "../Utils.mjs";
/**
* Authenticate Google Cloud operation
*/
class AuthenticateGoogleCloud extends Operation {
/**
* AuthenticateGoogleCloud constructor
*/
constructor() {
super();
this.name = "Authenticate Google Cloud";
this.module = "Cloud";
this.description = [
"Authenticates with Google Cloud Platform.",
"<br><br>",
"This operation should be placed at the top of your recipe. It securely manages credentials for downstream Google Cloud operations (e.g. List Bucket, Read File, Speech-to-Text).",
"<br><br>",
"You can authenticate using:",
"<ul>",
"<li><b>OAuth 2.0 (Web Application: PKCE)</b>: The recommended, secure method. Provide your Web Application Client ID. CyberChef will popup a secure Google login window. The token is stored per-session and cleared when you close the tab.</li>",
"<li><b>Personal Access Token (PAT)</b>: Provide a short-lived bearer token (e.g. from <code>gcloud auth print-access-token</code>).</li>",
"<li><b>API Key</b>: Provide a Google Cloud API key. (Less secure, ensure it is restricted).</li>",
"</ul>"
].join("\n");
this.infoURL = "https://cloud.google.com/docs/authentication";
this.inputType = "string";
this.outputType = "string";
this.manualBake = true; // AutoBake must be disabled to prevent spamming the OAuth API
this.args = [
{
"name": "Auth Type",
"type": "option",
"value": ["OAuth 2.0 (Web Application: PKCE)", "Personal Access Token (PAT)", "API Key"]
},
{
"name": "Credentials (Client ID, PAT, or API Key)",
"type": "toggleString",
"value": "",
"toggleValues": ["UTF8", "Latin1", "Base64", "Hex"]
},
{
"name": "Quota Project (OAuth only)",
"type": "string",
"value": ""
},
{
"name": "Output Logs",
"type": "boolean",
"value": true
}
];
}
/**
* @param {string} input
* @param {Object[]} args
* @returns {string}
*/
async run(input, args) {
const [authType, credObj, quotaProject, outputLogs] = args;
const credString = typeof credObj === "string" ? credObj : (credObj.string || "");
if (!credString) {
throw new OperationError("Please provide Google Cloud credentials (Client ID, PAT, or API Key).");
}
let logs = "";
const log = (msg) => {
if (outputLogs) logs += msg + "\n";
// Also send to the UI status bar if in worker
if (isWorkerEnvironment()) self.sendStatusMessage(msg);
};
log("Starting Google Cloud Authentication...");
// If not using the Web App PKCE Flow, just cache the PAT/API Key and return.
if (authType !== "OAuth 2.0 (Web Application: PKCE)") {
set_gcp_credentials({
authType: authType,
authString: credString,
quotaProject: quotaProject
});
log(`Successfully configured ${authType}.`);
return logs ? (logs + "\n" + input) : input;
}
// --- OAuth 2.0 Web Application (PKCE) Flow ---
// 1. Check if we already have a valid token for this Client ID in the session
const existingCreds = get_gcp_credentials();
if (existingCreds && existingCreds.authType === "OAuth 2.0 (Web Application: PKCE)" && existingCreds.clientId === credString) {
if (existingCreds.expiresAt > Date.now()) {
log("Reusing valid existing OAuth session token.");
return logs ? (logs + "\n" + input) : input;
}
log("Existing OAuth token expired. A new authorization is required.");
}
// 2. Pause the Web Worker and ask the Main UI to pop the GIS login window
log("Requesting Google Login Popup (Check your browser windows)...");
// We use a Promise to halt the `run` method until the UI sends back the token
const tokenData = await new Promise((resolve, reject) => {
// Temporary message listener to catch the response from the UI
const messageHandler = function (e) {
const r = e.data;
if (r.action === "gcpAuthResponse") {
self.removeEventListener("message", messageHandler);
if (r.data.error) {
reject(new OperationError(`Google OAuth Error: ${r.data.error}`));
} else if (r.data.token) {
resolve(r.data);
} else {
reject(new OperationError("Google OAuth Error: UI returned unexpected empty token payload."));
}
}
};
self.addEventListener("message", messageHandler);
// Trigger the UI
// Assuming this operation is executed within a ChefWorker, we bubble up `gcpAuthRequest`
// and we must include `inputNum` so WorkerWaiter knows which worker to send the response back to.
if (!isWorkerEnvironment()) {
reject(new OperationError("OAuth PKCE Flow can only run in a Web Worker environment. For manual node testing, use PAT or API Key auth types."));
return;
}
self.postMessage({
action: "gcpAuthRequest",
data: {
clientId: credString,
inputNum: self.inputNum || 0
}
});
});
log("Authorization successful!");
log(`Access token retrieved. Expires in ${tokenData.expires_in} seconds.`);
// 3. Cache the credentials for downstream operations
set_gcp_credentials({
authType: "OAuth 2.0 (Web Application: PKCE)",
authString: tokenData.token,
quotaProject: quotaProject,
clientId: credString,
expiresAt: Date.now() + (tokenData.expires_in * 1000)
});
return logs ? (logs + "\n" + input) : input;
}
}
export default AuthenticateGoogleCloud;

View File

@ -6,7 +6,7 @@
import Operation from "../Operation.mjs";
import OperationError from "../errors/OperationError.mjs";
import { GCP_AUTH_ARGS, applyGCPAuth, listGCSBucket } from "../lib/GoogleCloud.mjs";
import { listGCSBucket } from "../lib/GoogleCloud.mjs";
/**
* GCloud List Bucket operation
@ -44,8 +44,7 @@ class GCloudListBucket extends Operation {
"name": "Output Format",
"type": "option",
"value": ["GCS URIs (one per line)", "Filenames only", "JSON"]
},
...GCP_AUTH_ARGS
}
];
}
@ -55,7 +54,7 @@ class GCloudListBucket extends Operation {
* @returns {string}
*/
async run(input, args) {
const [prefix, outputFormat, authType, authStringObj, quotaProject] = args;
const [prefix, outputFormat] = args;
if (!input || !input.trim()) throw new OperationError("Please provide a GCS bucket name.");
@ -63,7 +62,7 @@ class GCloudListBucket extends Operation {
let bucket = input.trim().replace(/^gs:\/\//, "").split("/")[0];
try {
const items = await listGCSBucket(bucket, prefix, authType, authStringObj, quotaProject);
const items = await listGCSBucket(bucket, prefix);
if (items.length === 0) {
return `No objects found in gs://${bucket}/${prefix || ""}`;

View File

@ -6,7 +6,7 @@
import Operation from "../Operation.mjs";
import OperationError from "../errors/OperationError.mjs";
import { GCP_AUTH_ARGS, readGCSFile } from "../lib/GoogleCloud.mjs";
import { readGCSFile } from "../lib/GoogleCloud.mjs";
/**
* GCloud Read File operation
@ -35,9 +35,7 @@ class GCloudReadFile extends Operation {
this.inputType = "string";
this.outputType = "ArrayBuffer";
this.manualBake = true;
this.args = [
...GCP_AUTH_ARGS
];
this.args = [];
}
/**
@ -46,15 +44,13 @@ class GCloudReadFile extends Operation {
* @returns {ArrayBuffer}
*/
async run(input, args) {
const [authType, authStringObj, quotaProject] = args;
const uri = input.trim();
if (!uri.startsWith("gs://")) {
throw new OperationError("Input must be a GCS URI starting with gs://");
}
try {
return await readGCSFile(uri, authType, authStringObj, quotaProject);
return await readGCSFile(uri);
} catch (e) {
if (e.name === "OperationError") throw e;
throw new OperationError(e.message || e.toString());

View File

@ -6,7 +6,7 @@
import Operation from "../Operation.mjs";
import OperationError from "../errors/OperationError.mjs";
import { GCP_AUTH_ARGS, applyGCPAuth, pollLongRunningOperation, writeGCSFile } from "../lib/GoogleCloud.mjs";
import { applyGCPAuth, pollLongRunningOperation, writeGCSFile } from "../lib/GoogleCloud.mjs";
/**
* GCloud Speech to Text operation
@ -73,8 +73,7 @@ class GCloudSpeechToText extends Operation {
"name": "Max Poll Minutes",
"type": "number",
"value": 30
},
...GCP_AUTH_ARGS
}
];
}
@ -85,16 +84,12 @@ class GCloudSpeechToText extends Operation {
*/
async run(input, args) {
const [
inputMode, languageCode, model, outputDest, outputBucket, maxPollMinutes,
authType, authStringObj, quotaProject
inputMode, languageCode, model, outputDest, outputBucket, maxPollMinutes
] = args;
const uri = input.trim();
if (!uri) throw new OperationError("Please provide a GCS URI or Base64 audio input.");
const authString = typeof authStringObj === "string" ? authStringObj : (authStringObj.string || "");
if (!authString) throw new OperationError("Please provide a valid GCP Auth String (API Key or OAuth Token).");
const maxMs = maxPollMinutes * 60 * 1000;
let transcript;
@ -102,10 +97,10 @@ class GCloudSpeechToText extends Operation {
if (!uri.startsWith("gs://")) {
throw new OperationError("Input Mode is set to GCS URI but input does not start with gs://");
}
transcript = await this._transcribeGcsUri(uri, languageCode, model, authType, authStringObj, quotaProject, maxMs);
transcript = await this._transcribeGcsUri(uri, languageCode, model, maxMs);
} else {
// Raw audio bytes (Base64)
transcript = await this._transcribeRawAudio(uri, languageCode, model, authType, authStringObj, quotaProject);
transcript = await this._transcribeRawAudio(uri, languageCode, model);
}
if (outputDest === "Write to GCS") {
@ -115,7 +110,7 @@ class GCloudSpeechToText extends Operation {
: "raw_audio";
const objectPath = `output/audio/${sourceFilename}/speech-to-text/text.txt`;
const destUri = await writeGCSFile(outputBucket, objectPath, transcript, authType, authStringObj, quotaProject);
const destUri = await writeGCSFile(outputBucket, objectPath, transcript);
return destUri;
}
@ -128,17 +123,14 @@ class GCloudSpeechToText extends Operation {
* @param {string} gcsUri
* @param {string} languageCode
* @param {string} model
* @param {string} authType
* @param {Object|string} authStringObj
* @param {string} quotaProject
* @param {number} maxMs
* @returns {Promise<string>}
*/
async _transcribeGcsUri(gcsUri, languageCode, model, authType, authStringObj, quotaProject, maxMs) {
async _transcribeGcsUri(gcsUri, languageCode, model, maxMs) {
let url = "https://speech.googleapis.com/v1/speech:longrunningrecognize";
const headers = new Headers();
headers.set("Content-Type", "application/json; charset=utf-8");
const authed = applyGCPAuth(url, headers, authType, authStringObj, quotaProject);
const authed = applyGCPAuth(url, headers);
const body = JSON.stringify({
config: {
@ -174,9 +166,6 @@ class GCloudSpeechToText extends Operation {
const completed = await pollLongRunningOperation(
operationName,
POLL_URL,
authType,
authStringObj,
quotaProject,
maxMs,
10000,
(elapsedSec) => {
@ -195,16 +184,13 @@ class GCloudSpeechToText extends Operation {
* @param {string} base64Audio
* @param {string} languageCode
* @param {string} model
* @param {string} authType
* @param {Object|string} authStringObj
* @param {string} quotaProject
* @returns {Promise<string>}
*/
async _transcribeRawAudio(base64Audio, languageCode, model, authType, authStringObj, quotaProject) {
async _transcribeRawAudio(base64Audio, languageCode, model) {
let url = "https://speech.googleapis.com/v1/speech:recognize";
const headers = new Headers();
headers.set("Content-Type", "application/json; charset=utf-8");
const authed = applyGCPAuth(url, headers, authType, authStringObj, quotaProject);
const authed = applyGCPAuth(url, headers);
const body = JSON.stringify({
config: {

View File

@ -6,7 +6,7 @@
import Operation from "../Operation.mjs";
import OperationError from "../errors/OperationError.mjs";
import { GCP_AUTH_ARGS, applyGCPAuth } from "../lib/GoogleCloud.mjs";
import { applyGCPAuth } from "../lib/GoogleCloud.mjs";
/**
* Google Translate operation
@ -41,8 +41,7 @@ class GoogleTranslate extends Operation {
"name": "Target Language (ISO-639-1)",
"type": "string",
"value": "es"
},
...GCP_AUTH_ARGS
}
];
}
@ -52,7 +51,7 @@ class GoogleTranslate extends Operation {
* @returns {string}
*/
async run(input, args) {
const [sourceLanguage, targetLanguage, authType, authStringObj, quotaProject] = args;
const [sourceLanguage, targetLanguage] = args;
if (input.length === 0) return "";
@ -60,7 +59,7 @@ class GoogleTranslate extends Operation {
let headers = new Headers();
headers.set("Content-Type", "application/json; charset=utf-8");
({ url, headers } = applyGCPAuth(url, headers, authType, authStringObj, quotaProject));
({ url, headers } = applyGCPAuth(url, headers));
const body = JSON.stringify({
q: input,

View File

@ -21,15 +21,21 @@
<!-- htmlmin:ignore -->
<!DOCTYPE html>
<html lang="en" class="classic">
<head>
<meta charset="UTF-8">
<title>CyberChef</title>
<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="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="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 http-equiv="Content-Security-Policy"
content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://accounts.google.com blob:; worker-src 'self' blob:; frame-src 'self' https://accounts.google.com blob: data:; connect-src 'self' https://accounts.google.com https://oauth2.googleapis.com https://www.googleapis.com https://storage.googleapis.com https://speech.googleapis.com https://translation.googleapis.com;" />
<link rel="icon" type="image/ico" href="<%- require('../static/images/favicon.ico') %>" />
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script type="application/javascript">
"use strict";
@ -134,6 +140,7 @@
window.addEventListener("error", loadingErrorHandler);
</script>
</head>
<body>
<!-- Preloader overlay -->
<div id="loader-wrapper">
@ -142,13 +149,16 @@
<div id="preloader-error" class="loading-error"></div>
</div>
<!-- End preloader overlay -->
<button type="button" aria-label="Edit Favourites" class="btn btn-warning bmd-btn-icon" id="edit-favourites" data-toggle="tooltip" title="Edit favourites">
<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 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>
<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 class="col-md-6" id="notice-wrapper">
<span id="notice">
@ -163,35 +173,54 @@
</span>
</div>
<div class="col" style="text-align: right; padding-right: 0;">
<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="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" 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>">
<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
<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="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" 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 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">
<button type="button" aria-label="Hide arguments" class="btn btn-primary bmd-btn-icon" id="hide-icon" data-toggle="tooltip" title="Hide arguments" hide-args="false" data-help-title="Hiding every Operation's argument view in a Recipe" data-help="Clicking 'Hide arguments' will hide all the argument views for every Operation in the Recipe, to save space when you have too many Operation in your Recipe">
<button type="button" aria-label="Hide arguments" class="btn btn-primary bmd-btn-icon"
id="hide-icon" data-toggle="tooltip" title="Hide arguments" hide-args="false"
data-help-title="Hiding every Operation's argument view in a Recipe"
data-help="Clicking 'Hide arguments' will hide all the argument views for every Operation in the Recipe, to save space when you have too many Operation in your Recipe">
<i class="material-icons">keyboard_arrow_up</i>
</button>
<button type="button" aria-label="Save recipe" class="btn btn-primary bmd-btn-icon" id="save" data-toggle="tooltip" title="Save recipe" data-help-title="Saving a recipe" data-help="<p>Recipes can be represented in a few different formats and saved for use at a later date. You can either copy the Recipe configuration and save it somewhere offline for later use, or use your browser's local storage.</p><ul><li><b>Deep link:</b> The easiest way to share a CyberChef Recipe is to copy the deep link, either from the address bar (which is updated as the Recipe or Input changes), or from the 'Save recipe' pane. When you visit this link, the Recipe and Input will be populated from where you left off.</li><li><b>Chef format:</b> This custom format is designed to be compact and easily readable. It is the format used in CyberChef's URL, so it largely uses characters that do not have to be escaped in URL encoding, making it a little easier to understand what a CyberChef URL contains.</li><li><b>Clean JSON:</b> This JSON format uses whitespace and indentation in a way that makes the Recipe easy to read.</li><li><b>Compact JSON:</b> This is the most compact way that the Recipe can be represented in JSON.</li><li><b>Local storage:</b> Alternatively, you can enter a name into the 'Recipe name' field and save to your browser's local storage. The Recipe will then be available to load from the 'Load Recipe' pane as long as you are using the same browser profile. Be aware that if your browser profile is cleaned, you may lose this data.</li></ul>">
<button type="button" aria-label="Save recipe" class="btn btn-primary bmd-btn-icon" id="save"
data-toggle="tooltip" title="Save recipe" data-help-title="Saving a recipe"
data-help="<p>Recipes can be represented in a few different formats and saved for use at a later date. You can either copy the Recipe configuration and save it somewhere offline for later use, or use your browser's local storage.</p><ul><li><b>Deep link:</b> The easiest way to share a CyberChef Recipe is to copy the deep link, either from the address bar (which is updated as the Recipe or Input changes), or from the 'Save recipe' pane. When you visit this link, the Recipe and Input will be populated from where you left off.</li><li><b>Chef format:</b> This custom format is designed to be compact and easily readable. It is the format used in CyberChef's URL, so it largely uses characters that do not have to be escaped in URL encoding, making it a little easier to understand what a CyberChef URL contains.</li><li><b>Clean JSON:</b> This JSON format uses whitespace and indentation in a way that makes the Recipe easy to read.</li><li><b>Compact JSON:</b> This is the most compact way that the Recipe can be represented in JSON.</li><li><b>Local storage:</b> Alternatively, you can enter a name into the 'Recipe name' field and save to your browser's local storage. The Recipe will then be available to load from the 'Load Recipe' pane as long as you are using the same browser profile. Be aware that if your browser profile is cleaned, you may lose this data.</li></ul>">
<i class="material-icons" aria-hidden="true">save</i>
</button>
<button type="button" aria-label="Load recipe" class="btn btn-primary bmd-btn-icon" id="load" data-toggle="tooltip" title="Load recipe" data-help-title="Loading a recipe" data-help="<p>Saved recipes can be loaded using one of the following methods:</p><ul><li>If you have a CyberChef deep link, simply visit that link and the Recipe and Input will be populated automatically.</li><li>If you have a Recipe string in any of the accepted formats, paste it into the 'Load recipe' pane textbox and click 'Load'.</li><li>If you have saved a Recipe to your browser's local storage, it should be available in the dropdown menu in the 'Load recipe' pane. If it is not there, you may not be using the same browser profile, or your profile may have been cleared.</li></ul>">
<button type="button" aria-label="Load recipe" class="btn btn-primary bmd-btn-icon" id="load"
data-toggle="tooltip" title="Load recipe" data-help-title="Loading a recipe"
data-help="<p>Saved recipes can be loaded using one of the following methods:</p><ul><li>If you have a CyberChef deep link, simply visit that link and the Recipe and Input will be populated automatically.</li><li>If you have a Recipe string in any of the accepted formats, paste it into the 'Load recipe' pane textbox and click 'Load'.</li><li>If you have saved a Recipe to your browser's local storage, it should be available in the dropdown menu in the 'Load recipe' pane. If it is not there, you may not be using the same browser profile, or your profile may have been cleared.</li></ul>">
<i class="material-icons" aria-hidden="true">folder</i>
</button>
<button type="button" aria-label="Clear recipe" class="btn btn-primary bmd-btn-icon" id="clr-recipe" data-toggle="tooltip" title="Clear recipe" data-help-title="Clearing a recipe" data-help="Clicking the 'Clear recipe' button will remove all operations from the Recipe. It will not clear the Input, but it will trigger a Bake if Auto-bake is turned on, which will change the value of the Output.">
<button type="button" aria-label="Clear recipe" class="btn btn-primary bmd-btn-icon"
id="clr-recipe" data-toggle="tooltip" title="Clear recipe"
data-help-title="Clearing a recipe"
data-help="Clicking the 'Clear recipe' button will remove all operations from the Recipe. It will not clear the Input, but it will trigger a Bake if Auto-bake is turned on, which will change the value of the Output.">
<i class="material-icons" aria-hidden="true">delete</i>
</button>
</span>
@ -200,17 +229,23 @@
<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" 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>">
<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" 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"/>
<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" 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">
<input type="checkbox" checked="checked" id="auto-bake">
<br>Auto Bake
@ -222,37 +257,56 @@
</div>
<div class="split split-horizontal" id="IO">
<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 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">
<div class="io-info" id="input-files-info"></div>
<button type="button" aria-label="Add new input tab" class="btn btn-primary bmd-btn-icon" id="btn-new-tab" data-toggle="tooltip" title="Add a new input tab" data-help-title="Tabs" data-help="<p>New tabs can be created to support multiple Inputs. These tabs have their own associated character encodings and EOL separators, as defined in their status bars.</p><p>The deep link in the URL bar only contains information about the currently active tab.</p>">
<button type="button" aria-label="Add new input tab" class="btn btn-primary bmd-btn-icon"
id="btn-new-tab" data-toggle="tooltip" title="Add a new input tab"
data-help-title="Tabs"
data-help="<p>New tabs can be created to support multiple Inputs. These tabs have their own associated character encodings and EOL separators, as defined in their status bars.</p><p>The deep link in the URL bar only contains information about the currently active tab.</p>">
<i class="material-icons" aria-hidden="true">add</i>
</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>
<input type="file" id="open-folder" style="display: none" multiple directory webkitdirectory>
<input type="file" id="open-folder" style="display: none" multiple directory
webkitdirectory>
</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>
<input type="file" id="open-file" style="display: none" multiple>
</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>
</button>
<button type="button" aria-label="Reset pane layout" class="btn btn-primary bmd-btn-icon" id="reset-layout" data-toggle="tooltip" title="Reset pane layout" data-help-title="Resetting the pane layout" data-help="CyberChef's panes can be resized to suit your area of focus. This button will reset the pane sizes to their default configuration.">
<button type="button" aria-label="Reset pane layout" class="btn btn-primary bmd-btn-icon"
id="reset-layout" data-toggle="tooltip" title="Reset pane layout"
data-help-title="Resetting the pane layout"
data-help="CyberChef's panes can be resized to suit your area of focus. This button will reset the pane sizes to their default configuration.">
<i class="material-icons" aria-hidden="true">view_compact</i>
</button>
</span>
</div>
<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" style="display: none;" class="no-select"
data-help-proxy="#btn-new-tab">
<span id="btn-previous-input-tab" class="input-tab-buttons">
&lt;
</span>
<span id="btn-input-tab-dropdown" class="input-tab-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span id="btn-input-tab-dropdown" class="input-tab-buttons" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
···
</span>
<div class="dropdown-menu" aria-labelledby="btn-input-tab-dropdown">
@ -276,34 +330,56 @@
</div>
</div>
<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 will be copied into your clipboard, rather than the control character picture itself.</p>">
<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 will 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">
<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" 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>">
<i class="material-icons">archive</i>
</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.">
<i class="material-icons" aria-hidden="true">save</i>
</button>
<button type="button" aria-label="copy content" class="btn btn-primary bmd-btn-icon" id="copy-output" data-toggle="tooltip" title="Copy raw output to the clipboard" data-help-title="Copying raw output to the clipboard" data-help="<p>Data can be copied from the Output in the normal way by selecting text and copying it. This button provides a quick way of copying the entire output to the clipboard without having to select it. It directly copies the raw data rather than selecting text in the Output editor. Each method will have the same result, but the button may be more efficient for large Outputs as it does not require any DOM interaction.</p>">
<button type="button" aria-label="copy content" class="btn btn-primary bmd-btn-icon"
id="copy-output" data-toggle="tooltip" title="Copy raw output to the clipboard"
data-help-title="Copying raw output to the clipboard"
data-help="<p>Data can be copied from the Output in the normal way by selecting text and copying it. This button provides a quick way of copying the entire output to the clipboard without having to select it. It directly copies the raw data rather than selecting text in the Output editor. Each method will have the same result, but the button may be more efficient for large Outputs as it does not require any DOM interaction.</p>">
<i class="material-icons" aria-hidden="true">content_copy</i>
</button>
<button type="button" aria-label="replace input with output" class="btn btn-primary bmd-btn-icon" id="switch" data-toggle="tooltip" title="Replace input with output" data-help-title="Replacing input with output" data-help="<p>This button moves the currently active Output data into the currently active Input tab, overwriting whatever data was already there.</p><p>The Input character encoding and EOL sequence will be changed to match the current Output values, so that the data is interpreted correctly.</p>">
<button type="button" aria-label="replace input with output"
class="btn btn-primary bmd-btn-icon" id="switch" data-toggle="tooltip"
title="Replace input with output" data-help-title="Replacing input with output"
data-help="<p>This button moves the currently active Output data into the currently active Input tab, overwriting whatever data was already there.</p><p>The Input character encoding and EOL sequence will be changed to match the current Output values, so that the data is interpreted correctly.</p>">
<i class="material-icons" aria-hidden="true">open_in_browser</i>
</button>
<button type="button" aria-label="maximise output pane" class="btn btn-primary bmd-btn-icon" id="maximise-output" data-toggle="tooltip" title="Maximise output pane" data-help-title="Maximising the Output pane" data-help="This button allows you to view the Output pane at maximum size, hiding the Operations, Recipe and Input panes. You can restore the pane to its normal size by clicking the same button again.">
<button type="button" aria-label="maximise output pane" class="btn btn-primary bmd-btn-icon"
id="maximise-output" data-toggle="tooltip" title="Maximise output pane"
data-help-title="Maximising the Output pane"
data-help="This button allows you to view the Output pane at maximum size, hiding the Operations, Recipe and Input panes. You can restore the pane to its normal size by clicking the same button again.">
<i class="material-icons" aria-hidden="true">fullscreen</i>
</button>
</span>
<button type="button" class="btn btn-primary bmd-btn-icon hidden" id="magic" data-toggle="tooltip" title="Magic!" data-html="true" data-help-title="CyberChef Magic!" data-help="<p>One of CyberChef's best features is its ability to automatically detect which Operations might make more sense of your data. The Magic button appears when CyberChef has a suggested Operation for you based on the data in the Output.</p><p>Clicking on the button will add the suggested Operation(s) to your Recipe.</p><p>This background Magic detection will inspect your Output up to three levels deep and attempt to unwrap it using a range of techniques. For more control, use the 'Magic' operation, which allows you to configure greater depth and filter based on various parameters.</p><p>Further information about CyberChef Magic can be found <a href='https://github.com/gchq/CyberChef/wiki/Automatic-detection-of-encoded-data-using-CyberChef-Magic'>here</a>.</p>">
<button type="button" class="btn btn-primary bmd-btn-icon hidden" id="magic"
data-toggle="tooltip" title="Magic!" data-html="true" data-help-title="CyberChef Magic!"
data-help="<p>One of CyberChef's best features is its ability to automatically detect which Operations might make more sense of your data. The Magic button appears when CyberChef has a suggested Operation for you based on the data in the Output.</p><p>Clicking on the button will add the suggested Operation(s) to your Recipe.</p><p>This background Magic detection will inspect your Output up to three levels deep and attempt to unwrap it using a range of techniques. For more control, use the 'Magic' operation, which allows you to configure greater depth and filter based on various parameters.</p><p>Further information about CyberChef Magic can be found <a href='https://github.com/gchq/CyberChef/wiki/Automatic-detection-of-encoded-data-using-CyberChef-Magic'>here</a>.</p>">
<svg width="22" height="22" viewBox="0 0 24 24">
<path d="M7.5,5.6L5,7L6.4,4.5L5,2L7.5,3.4L10,2L8.6,4.5L10,7L7.5,5.6M19.5,15.4L22,14L20.6,16.5L22,19L19.5,17.6L17,19L18.4,16.5L17,14L19.5,15.4M22,2L20.6,4.5L22,7L19.5,5.6L17,7L18.4,4.5L17,2L19.5,3.4L22,2M13.34,12.78L15.78,10.34L13.66,8.22L11.22,10.66L13.34,12.78M14.37,7.29L16.71,9.63C17.1,10 17.1,10.65 16.71,11.04L5.04,22.71C4.65,23.1 4,23.1 3.63,22.71L1.29,20.37C0.9,20 0.9,19.35 1.29,18.96L12.96,7.29C13.35,6.9 14,6.9 14.37,7.29Z" />
<path
d="M7.5,5.6L5,7L6.4,4.5L5,2L7.5,3.4L10,2L8.6,4.5L10,7L7.5,5.6M19.5,15.4L22,14L20.6,16.5L22,19L19.5,17.6L17,19L18.4,16.5L17,14L19.5,15.4M22,2L20.6,4.5L22,7L19.5,5.6L17,7L18.4,4.5L17,2L19.5,3.4L22,2M13.34,12.78L15.78,10.34L13.66,8.22L11.22,10.66L13.34,12.78M14.37,7.29L16.71,9.63C17.1,10 17.1,10.65 16.71,11.04L5.04,22.71C4.65,23.1 4,23.1 3.63,22.71L1.29,20.37C0.9,20 0.9,19.35 1.29,18.96L12.96,7.29C13.35,6.9 14,6.9 14.37,7.29Z" />
</svg>
</button>
<span id="stale-indicator" class="hidden" data-toggle="tooltip" title="The output is stale. The input or recipe has changed since this output was generated. Bake again to get the new value." data-help-title="Staleness indicator" data-help="The staleness indicator is displayed when the Recipe or Input has changed but the Output has not yet been updated to reflect this. It is most commonly displayed when Auto-bake is turned off and indicates that you need to Bake in order to see an accurate Output.">
<span id="stale-indicator" class="hidden" data-toggle="tooltip"
title="The output is stale. The input or recipe has changed since this output was generated. Bake again to get the new value."
data-help-title="Staleness indicator"
data-help="The staleness indicator is displayed when the Recipe or Input has changed but the Output has not yet been updated to reflect this. It is most commonly displayed when Auto-bake is turned off and indicates that you need to Bake in order to see an accurate Output.">
<i class="material-icons">access_time</i>
</span>
</div>
@ -313,7 +389,8 @@
<span id="btn-previous-output-tab" class="output-tab-buttons">
&lt;
</span>
<span id="btn-output-tab-dropdown" class="output-tab-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span id="btn-output-tab-dropdown" class="output-tab-buttons" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
···
</span>
<div class="dropdown-menu" aria-labelledby="btn-input-tab-dropdown">
@ -333,7 +410,9 @@
<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%" 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>
<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>
@ -353,7 +432,8 @@
<div class="form-group">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#chef-format" role="tab" data-toggle="tab">Chef format</a>
<a class="nav-link active" href="#chef-format" role="tab" data-toggle="tab">Chef
format</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#clean-json" role="tab" data-toggle="tab">Clean JSON</a>
@ -377,7 +457,8 @@
<div class="form-group">
<label for="save-name" class="bmd-label-floating">Recipe name</label>
<input type="text" class="form-control" id="save-name">
<span class="bmd-help">Save your recipe to local storage using this name, or copy it to load later</span>
<span class="bmd-help">Save your recipe to local storage using this name, or copy it to load
later</span>
</div>
</div>
<div class="modal-footer" id="save-footer">
@ -413,7 +494,8 @@
<div class="form-group">
<label for="load-name" class="bmd-label-floating">Recipe name</label>
<select class="form-control" id="load-name"></select>
<span class="bmd-help">Load your recipe from local storage by selecting its name from the drop-down</span>
<span class="bmd-help">Load your recipe from local storage by selecting its name from the
drop-down</span>
</div>
<div class="form-group">
<label for="load-text" class="bmd-label-floating">Recipe</label>
@ -491,7 +573,8 @@
</div>
<div class="form-group option-item">
<label for="errorTimeout" class="bmd-label-floating">Operation error timeout in ms (0 for never)</label>
<label for="errorTimeout" class="bmd-label-floating">Operation error timeout in ms (0 for
never)</label>
<input type="number" class="form-control" option="errorTimeout" id="errorTimeout">
</div>
@ -546,9 +629,11 @@
</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 and drop it</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 delete button 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>
@ -556,8 +641,10 @@
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="reset-favourites">Reset favourites to default</button>
<button type="button" class="btn btn-success" data-dismiss="modal" id="save-favourites">Save</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="reset-favourites">Reset
favourites to default</button>
<button type="button" class="btn btn-success" data-dismiss="modal"
id="save-favourites">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
@ -571,7 +658,8 @@
<h5 class="modal-title">CyberChef - The Cyber Swiss Army Knife</h5>
</div>
<div class="modal-body">
<img aria-hidden="true" class="about-img-left" src="<%- require('../static/images/cyberchef-128x128.png') %>" alt="CyberChef Logo"/>
<img aria-hidden="true" class="about-img-left"
src="<%- require('../static/images/cyberchef-128x128.png') %>" alt="CyberChef Logo" />
<p class="subtext">
Version <%= htmlWebpackPlugin.options.version %><br>
Compile time: <%= htmlWebpackPlugin.options.compileTime %>
@ -584,12 +672,14 @@
<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 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 class="nav-link" href="#report-bug" aria-controls="messages" role="tab"
data-toggle="tab">
Report a bug
</a>
</li>
@ -599,19 +689,25 @@
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" href="#keybindings" aria-controls="messages" role="tab" data-toggle="tab">
<a class="nav-link" href="#keybindings" aria-controls="messages" role="tab"
data-toggle="tab">
Keybindings
</a>
</li>
</ul>
<div class="tab-content">
<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.">
<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>
<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>
@ -619,16 +715,33 @@
What sort of things can I do with CyberChef?
</a>
<div class="collapse" id="faq-examples">
<p>There are <span class="num-ops">hundreds of</span> operations in CyberChef allowing you to carry out simple and complex tasks easily. Here are some examples:</p>
<p>There are <span class="num-ops">hundreds of</span> operations in CyberChef allowing
you to carry out simple and complex tasks easily. Here are some examples:</p>
<ul>
<li><a href="#recipe=From_Base64('A-Za-z0-9%2B/%3D',true)&input=VTI4Z2JHOXVaeUJoYm1RZ2RHaGhibXR6SUdadmNpQmhiR3dnZEdobElHWnBjMmd1">Decode a Base64-encoded string</a></li>
<li><a href="#recipe=Translate_DateTime_Format('Standard%20date%20and%20time','DD/MM/YYYY%20HH:mm:ss','UTC','dddd%20Do%20MMMM%20YYYY%20HH:mm:ss%20Z%20z','Australia/Queensland')&input=MTUvMDYvMjAxNSAyMDo0NTowMA">Convert a date and time to a different time zone</a></li>
<li><a href="#recipe=Parse_IPv6_address()&input=MjAwMTowMDAwOjQxMzY6ZTM3ODo4MDAwOjYzYmY6M2ZmZjpmZGQy">Parse a Teredo IPv6 address</a></li>
<li><a href="#recipe=From_Hexdump()Gunzip()&input=MDAwMDAwMDAgIDFmIDhiIDA4IDAwIDEyIGJjIGYzIDU3IDAwIGZmIDBkIGM3IGMxIDA5IDAwIDIwICB8Li4uLi6881cu/y7HwS4uIHwKMDAwMDAwMTAgIDA4IDA1IGQwIDU1IGZlIDA0IDJkIGQzIDA0IDFmIGNhIDhjIDQ0IDIxIDViIGZmICB8Li7QVf4uLdMuLsouRCFb/3wKMDAwMDAwMjAgIDYwIGM3IGQ3IDAzIDE2IGJlIDQwIDFmIDc4IDRhIDNmIDA5IDg5IDBiIDlhIDdkICB8YMfXLi6%2BQC54Sj8uLi4ufXwKMDAwMDAwMzAgIDRlIGM4IDRlIDZkIDA1IDFlIDAxIDhiIDRjIDI0IDAwIDAwIDAwICAgICAgICAgICB8TshObS4uLi5MJC4uLnw">Convert data from a hexdump, then decompress</a></li>
<li><a href="#recipe=RC4(%7B'option':'UTF8','string':'secret'%7D,'Hex','Hex')Disassemble_x86('64','Full%20x86%20architecture',16,0,true,true)&input=MjFkZGQyNTQwMTYwZWU2NWZlMDc3NzEwM2YyYTM5ZmJlNWJjYjZhYTBhYWJkNDE0ZjkwYzZjYWY1MzEyNzU0YWY3NzRiNzZiM2JiY2QxOTNjYjNkZGZkYmM1YTI2NTMzYTY4NmI1OWI4ZmVkNGQzODBkNDc0NDIwMWFlYzIwNDA1MDcxMzhlMmZlMmIzOTUwNDQ2ZGIzMWQyYmM2MjliZTRkM2YyZWIwMDQzYzI5M2Q3YTVkMjk2MmMwMGZlNmRhMzAwNzJkOGM1YTZiNGZlN2Q4NTlhMDQwZWVhZjI5OTczMzYzMDJmNWEwZWMxOQ">Decrypt and disassemble shellcode</a></li>
<li><a href="#recipe=Fork('%5C%5Cn','%5C%5Cn',false)From_UNIX_Timestamp('Seconds%20(s)')&input=OTc4MzQ2ODAwCjEwMTI2NTEyMDAKMTA0NjY5NjQwMAoxMDgxMDg3MjAwCjExMTUzMDUyMDAKMTE0OTYwOTYwMA">Display multiple timestamps as full dates</a></li>
<li><a href="#recipe=Fork('%5C%5Cn','%5C%5Cn',false)Conditional_Jump('1',false,'base64',10)To_Hex('Space')Return()Label('base64')To_Base64('A-Za-z0-9%2B/%3D')&input=U29tZSBkYXRhIHdpdGggYSAxIGluIGl0ClNvbWUgZGF0YSB3aXRoIGEgMiBpbiBpdA">Carry out different operations on data of different types</a></li>
<li><a href="#recipe=Register('key%3D(%5B%5C%5Cda-f%5D*)',true,false)Find_/_Replace(%7B'option':'Regex','string':'.*data%3D(.*)'%7D,'$1',true,false,true)RC4(%7B'option':'Hex','string':'$R0'%7D,'Hex','Latin1')&input=aHR0cDovL21hbHdhcmV6LmJpei9iZWFjb24ucGhwP2tleT0wZTkzMmE1YyZkYXRhPThkYjdkNWViZTM4NjYzYTU0ZWNiYjMzNGUzZGIxMQ">Use parts of the input as arguments to operations</a></li>
<li><a
href="#recipe=From_Base64('A-Za-z0-9%2B/%3D',true)&input=VTI4Z2JHOXVaeUJoYm1RZ2RHaGhibXR6SUdadmNpQmhiR3dnZEdobElHWnBjMmd1">Decode
a Base64-encoded string</a></li>
<li><a
href="#recipe=Translate_DateTime_Format('Standard%20date%20and%20time','DD/MM/YYYY%20HH:mm:ss','UTC','dddd%20Do%20MMMM%20YYYY%20HH:mm:ss%20Z%20z','Australia/Queensland')&input=MTUvMDYvMjAxNSAyMDo0NTowMA">Convert
a date and time to a different time zone</a></li>
<li><a
href="#recipe=Parse_IPv6_address()&input=MjAwMTowMDAwOjQxMzY6ZTM3ODo4MDAwOjYzYmY6M2ZmZjpmZGQy">Parse
a Teredo IPv6 address</a></li>
<li><a
href="#recipe=From_Hexdump()Gunzip()&input=MDAwMDAwMDAgIDFmIDhiIDA4IDAwIDEyIGJjIGYzIDU3IDAwIGZmIDBkIGM3IGMxIDA5IDAwIDIwICB8Li4uLi6881cu/y7HwS4uIHwKMDAwMDAwMTAgIDA4IDA1IGQwIDU1IGZlIDA0IDJkIGQzIDA0IDFmIGNhIDhjIDQ0IDIxIDViIGZmICB8Li7QVf4uLdMuLsouRCFb/3wKMDAwMDAwMjAgIDYwIGM3IGQ3IDAzIDE2IGJlIDQwIDFmIDc4IDRhIDNmIDA5IDg5IDBiIDlhIDdkICB8YMfXLi6%2BQC54Sj8uLi4ufXwKMDAwMDAwMzAgIDRlIGM4IDRlIDZkIDA1IDFlIDAxIDhiIDRjIDI0IDAwIDAwIDAwICAgICAgICAgICB8TshObS4uLi5MJC4uLnw">Convert
data from a hexdump, then decompress</a></li>
<li><a
href="#recipe=RC4(%7B'option':'UTF8','string':'secret'%7D,'Hex','Hex')Disassemble_x86('64','Full%20x86%20architecture',16,0,true,true)&input=MjFkZGQyNTQwMTYwZWU2NWZlMDc3NzEwM2YyYTM5ZmJlNWJjYjZhYTBhYWJkNDE0ZjkwYzZjYWY1MzEyNzU0YWY3NzRiNzZiM2JiY2QxOTNjYjNkZGZkYmM1YTI2NTMzYTY4NmI1OWI4ZmVkNGQzODBkNDc0NDIwMWFlYzIwNDA1MDcxMzhlMmZlMmIzOTUwNDQ2ZGIzMWQyYmM2MjliZTRkM2YyZWIwMDQzYzI5M2Q3YTVkMjk2MmMwMGZlNmRhMzAwNzJkOGM1YTZiNGZlN2Q4NTlhMDQwZWVhZjI5OTczMzYzMDJmNWEwZWMxOQ">Decrypt
and disassemble shellcode</a></li>
<li><a
href="#recipe=Fork('%5C%5Cn','%5C%5Cn',false)From_UNIX_Timestamp('Seconds%20(s)')&input=OTc4MzQ2ODAwCjEwMTI2NTEyMDAKMTA0NjY5NjQwMAoxMDgxMDg3MjAwCjExMTUzMDUyMDAKMTE0OTYwOTYwMA">Display
multiple timestamps as full dates</a></li>
<li><a
href="#recipe=Fork('%5C%5Cn','%5C%5Cn',false)Conditional_Jump('1',false,'base64',10)To_Hex('Space')Return()Label('base64')To_Base64('A-Za-z0-9%2B/%3D')&input=U29tZSBkYXRhIHdpdGggYSAxIGluIGl0ClNvbWUgZGF0YSB3aXRoIGEgMiBpbiBpdA">Carry
out different operations on data of different types</a></li>
<li><a
href="#recipe=Register('key%3D(%5B%5C%5Cda-f%5D*)',true,false)Find_/_Replace(%7B'option':'Regex','string':'.*data%3D(.*)'%7D,'$1',true,false,true)RC4(%7B'option':'Hex','string':'$R0'%7D,'Hex','Latin1')&input=aHR0cDovL21hbHdhcmV6LmJpei9iZWFjb24ucGhwP2tleT0wZTkzMmE1YyZkYXRhPThkYjdkNWViZTM4NjYzYTU0ZWNiYjMzNGUzZGIxMQ">Use
parts of the input as arguments to operations</a></li>
</ul>
</div>
<br>
@ -638,8 +751,12 @@
</a>
<div class="collapse" id="faq-load-files">
<p>Yes! Just drag your file over the input box and drop it.</p>
<p>CyberChef can handle files up to around 2GB (depending on your browser), however some of the operations may take a very long time to run over this much data.</p>
<p>If the output is larger than a certain threshold (default <a href="#recipe=Multiply('Line%20feed')Convert_data_units('Bytes%20(B)','Mebibytes%20(MiB)')&input=MTAyNAoxMDI0">1MiB</a>), it will be presented to you as a file available for download. Slices of the file can be viewed in the output if you need to inspect them.</p>
<p>CyberChef can handle files up to around 2GB (depending on your browser), however some
of the operations may take a very long time to run over this much data.</p>
<p>If the output is larger than a certain threshold (default <a
href="#recipe=Multiply('Line%20feed')Convert_data_units('Bytes%20(B)','Mebibytes%20(MiB)')&input=MTAyNAoxMDI0">1MiB</a>),
it will be presented to you as a file available for download. Slices of the file can
be viewed in the output if you need to inspect them.</p>
</div>
<br>
@ -647,9 +764,16 @@
How do I run operation X over multiple inputs at once?
</a>
<div class="collapse" id="faq-fork">
<p>Maybe you have 10 timestamps that you want to parse or 16 encoded strings that all have the same key.</p>
<p>The 'Fork' operation (found in the 'Flow control' category) splits up the input line by line and runs all subsequent operations on each line separately. Each output is then displayed on a separate line. These delimiters can be changed, so if your inputs are separated by commas, you can change the split delimiter to a comma instead.</p>
<p><a href="#recipe=Fork('%5C%5Cn','%5C%5Cn',false)From_UNIX_Timestamp('Seconds%20(s)')&input=OTc4MzQ2ODAwCjEwMTI2NTEyMDAKMTA0NjY5NjQwMAoxMDgxMDg3MjAwCjExMTUzMDUyMDAKMTE0OTYwOTYwMA">Click here</a> for an example.</p>
<p>Maybe you have 10 timestamps that you want to parse or 16 encoded strings that all
have the same key.</p>
<p>The 'Fork' operation (found in the 'Flow control' category) splits up the input line
by line and runs all subsequent operations on each line separately. Each output is
then displayed on a separate line. These delimiters can be changed, so if your
inputs are separated by commas, you can change the split delimiter to a comma
instead.</p>
<p><a
href="#recipe=Fork('%5C%5Cn','%5C%5Cn',false)From_UNIX_Timestamp('Seconds%20(s)')&input=OTc4MzQ2ODAwCjEwMTI2NTEyMDAKMTA0NjY5NjQwMAoxMDgxMDg3MjAwCjExMTUzMDUyMDAKMTE0OTYwOTYwMA">Click
here</a> for an example.</p>
</div>
<br>
@ -657,40 +781,62 @@
How does the 'Magic' operation work?
</a>
<div class="collapse" id="faq-magic">
<p>The 'Magic' operation uses a number of methods to detect encoded data and the operations which can be used to make sense of it. A technical description of these methods can be found <a href="https://github.com/gchq/CyberChef/wiki/Automatic-detection-of-encoded-data-using-CyberChef-Magic">here</a>.</p>
<p>The 'Magic' operation uses a number of methods to detect encoded data and the
operations which can be used to make sense of it. A technical description of these
methods can be found <a
href="https://github.com/gchq/CyberChef/wiki/Automatic-detection-of-encoded-data-using-CyberChef-Magic">here</a>.
</p>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="report-bug">
<br>
<p>If you find a bug in CyberChef, please raise an issue in our GitHub repository explaining it in as much detail as possible. Copy and include the following information if relevant.</p>
<p>If you find a bug in CyberChef, please raise an issue in our GitHub repository explaining
it in as much detail as possible. Copy and include the following information if
relevant.</p>
<br>
<pre id="report-bug-info"></pre>
<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 role="tabpanel" class="tab-pane" id="about" style="padding: 20px;">
<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>
<h5><strong>Why</strong></h5>
<p>Digital data comes in all shapes, sizes and formats in the modern world CyberChef helps to make sense of this data all on one easy-to-use platform.</p><br>
<p>Digital data comes in all shapes, sizes and formats in the modern world CyberChef helps
to make sense of this data all on one easy-to-use platform.</p><br>
<h5><strong>How</strong></h5>
<p>The interface is designed with simplicity at its heart. Complex techniques are now as trivial as drag-and-drop. Simple functions can be combined to build up a "recipe", potentially resulting in complex analysis, which can be shared with other users and used with their input.</p>
<p>For those comfortable writing code, CyberChef is a quick and efficient way to prototype solutions to a problem which can then be scripted once proven to work.</p><br>
<p>The interface is designed with simplicity at its heart. Complex techniques are now as
trivial as drag-and-drop. Simple functions can be combined to build up a "recipe",
potentially resulting in complex analysis, which can be shared with other users and used
with their input.</p>
<p>For those comfortable writing code, CyberChef is a quick and efficient way to prototype
solutions to a problem which can then be scripted once proven to work.</p><br>
<h5><strong>Who</strong></h5>
<p>It is expected that CyberChef will be useful for cybersecurity and antivirus companies. It should also appeal to the academic world and any individuals or companies involved in the analysis of digital data, be that software developers, analysts, mathematicians or casual puzzle solvers.</p><br>
<p>It is expected that CyberChef will be useful for cybersecurity and antivirus companies.
It should also appeal to the academic world and any individuals or companies involved in
the analysis of digital data, be that software developers, analysts, mathematicians or
casual puzzle solvers.</p><br>
<h5><strong>Aim</strong></h5>
<p>It is hoped that by releasing CyberChef through <a href="https://github.com/gchq/CyberChef">GitHub</a>, contributions can be added which can be rolled out into future versions of the tool.</p><br>
<p>It is hoped that by releasing CyberChef through <a
href="https://github.com/gchq/CyberChef">GitHub</a>, contributions can be added
which can be rolled out into future versions of the tool.</p><br>
<br>
<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>Its the Cyber Swiss Army Knife.</p>
</div>
<div role="tabpanel" class="tab-pane" id="keybindings" style="padding: 20px;">
@ -702,7 +848,8 @@
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
<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" style="position: absolute; top: 0; right: 0; border: 0;"
src="<%- require('../static/images/fork_me.png') %>" alt="Fork me on GitHub">
</a>
</div>
</div>
@ -763,7 +910,8 @@
<input type="text" class="form-control toggle-string" id="input-filter">
</div>
<div class="input-group-append">
<button class="btn btn-secondary dropdown-toggle" id="input-filter-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">CONTENT</button>
<button class="btn btn-secondary dropdown-toggle" id="input-filter-button" type="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">CONTENT</button>
<div class="dropdown-menu toggle-dropdown">
<a class="dropdown-item" id="input-filter-content">Content</a>
<a class="dropdown-item" id="input-filter-filename">Filename</a>
@ -856,27 +1004,43 @@
</div>
<div class="modal-body">
<p>
CyberChef runs entirely within your browser with no server-side component, meaning that your Input data and Recipe configuration are not sent anywhere, whether you use the live, official version of CyberChef or a downloaded, standalone version (assuming it is unmodified).
CyberChef runs entirely within your browser with no server-side component, meaning that your
Input data and Recipe configuration are not sent anywhere, whether you use the live, official
version of CyberChef or a downloaded, standalone version (assuming it is unmodified).
</p>
<p>
There are three operations that make calls to external services, those being the 'Show on map' operation which downloads map tiles from wikimedia.org, the 'DNS over HTTPS' operation which resolves DNS requests using either Google or Cloudflare services, and the 'HTTP request' operation that calls out to the configured URL you enter. You can confirm what network requests are made using your browser's developer console (F12) and viewing the Network tab.
There are three operations that make calls to external services, those being the 'Show on map'
operation which downloads map tiles from wikimedia.org, the 'DNS over HTTPS' operation which
resolves DNS requests using either Google or Cloudflare services, and the 'HTTP request'
operation that calls out to the configured URL you enter. You can confirm what network requests
are made using your browser's developer console (F12) and viewing the Network tab.
</p>
<p>
If you would like to download your own standalone copy of CyberChef to run in a segregated network or where there is limited or no Internet connectivity, you can get a ZIP file containing the whole web app below. This can be run locally or hosted on a web server with no configuration required.
If you would like to download your own standalone copy of CyberChef to run in a segregated
network or where there is limited or no Internet connectivity, you can get a ZIP file containing
the whole web app below. 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.
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>
<h6>CyberChef v<%= htmlWebpackPlugin.options.version %></h6>
<h6>CyberChef v<%= htmlWebpackPlugin.options.version %>
</h6>
<ul>
<li>Build time: <%= htmlWebpackPlugin.options.compileTime %></li>
<li>The changelog for this version can be viewed <a href="https://github.com/gchq/CyberChef/blob/v<%= htmlWebpackPlugin.options.version %>/CHANGELOG.md">here</a></li>
<li>&copy; Crown Copyright 2016-<%= htmlWebpackPlugin.options.compileYear %></li>
<li>Build time: <%= htmlWebpackPlugin.options.compileTime %>
</li>
<li>The changelog for this version can be viewed <a
href="https://github.com/gchq/CyberChef/blob/v<%= htmlWebpackPlugin.options.version %>/CHANGELOG.md">here</a>
</li>
<li>&copy; Crown Copyright 2016-<%= htmlWebpackPlugin.options.compileYear %>
</li>
<li>Released under the Apache Licence, Version 2.0</li>
<li>SHA256 hash: DOWNLOAD_HASH_PLACEHOLDER</li>
</ul>
<a href="CyberChef_v<%= htmlWebpackPlugin.options.version %>.zip" download class="btn btn-outline-primary">Download ZIP file</a>
<a href="CyberChef_v<%= htmlWebpackPlugin.options.version %>.zip" download
class="btn btn-outline-primary">Download ZIP file</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
@ -906,4 +1070,5 @@
</div>
</body>
</html>

View File

@ -1686,7 +1686,7 @@ class InputWaiter {
*/
handlePostMessage(e) {
log.debug(e);
if ("data" in e && "id" in e.data && "value" in e.data) {
if (e && e.data && typeof e.data === "object" && "id" in e.data && "value" in e.data) {
if (e.data.id === "setInput") {
this.setInput(e.data.value);
}

View File

@ -252,6 +252,39 @@ class WorkerWaiter {
case "highlightsCalculated":
this.manager.highlighter.displayHighlights(r.data.pos, r.data.direction);
break;
case "gcpAuthRequest":
log.debug("Initializing Google Identity Services for PKCE Auth...");
try {
const client = google.accounts.oauth2.initTokenClient({
client_id: r.data.clientId,
scope: "https://www.googleapis.com/auth/cloud-platform",
callback: (response) => {
if (response.error) {
currentWorker.worker.postMessage({
action: "gcpAuthResponse",
data: { error: response.error_description || response.error }
});
} else if (response.access_token) {
// Store temporarily in sessionStorage for anti-XSS posture
sessionStorage.setItem("gcp_access_token", response.access_token);
currentWorker.worker.postMessage({
action: "gcpAuthResponse",
data: {
token: response.access_token,
expires_in: response.expires_in
}
});
}
}
});
client.requestAccessToken();
} catch (e) {
currentWorker.worker.postMessage({
action: "gcpAuthResponse",
data: { error: `Failed to initialize Google Auth popup: ${e.message}` }
});
}
break;
default:
log.error("Unrecognised message from ChefWorker", e);
break;

View File

@ -24,13 +24,24 @@ module.exports = {
},
"Google Translate: Missing Key Validation": function (browser) {
browserUtils.loadRecipe(browser, "Google Translate", "Hello World", [
"en",
"es",
browserUtils.loadRecipeConfig(browser, [
{
op: "Authenticate Google Cloud",
args: [
"API Key",
{ option: "UTF8", string: "" },
""
]);
"",
true
]
},
{
op: "Google Translate",
args: [
"en",
"es"
]
}
], "Hello World");
browser.waitForElementNotVisible("#snackbar-container", 6000);
browserUtils.bake(browser);
@ -38,38 +49,50 @@ module.exports = {
browser.execute(function () {
return window.app.manager.output.outputEditorView.state.doc.toString();
}, [], function ({ value }) {
browser.assert.ok(value.includes("Please provide a valid GCP Auth String"));
browser.assert.ok(value.includes("No Google Cloud credentials found") || value.includes("Please provide Google Cloud credentials"), "Expected auth missing error.");
});
},
"Google Translate: Successful OAuth Token Translation": function (browser) {
"Google Translate: Successful PAT Translation": function (browser) {
let testToken = process.env.CYBERCHEF_GCP_TEST_TOKEN;
if (!testToken || testToken === "YOUR_OAUTH_TOKEN_HERE") {
try {
testToken = require('child_process').execSync('gcloud auth print-access-token', { stdio: 'pipe', encoding: 'utf-8' }).trim();
} catch (e) {
console.log("No valid CYBERCHEF_GCP_TEST_TOKEN found and gcloud failed. Skipping live API test.");
console.log("No valid CYBERCHEF_GCP_TEST_TOKEN found and gcloud failed. Skipping live PAT API test.");
return;
}
}
browserUtils.loadRecipe(browser, "Google Translate", "Hello", [
"en",
"es",
"OAuth Token",
browserUtils.loadRecipeConfig(browser, [
{
op: "Authenticate Google Cloud",
args: [
"Personal Access Token (PAT)",
{ option: "UTF8", string: testToken },
"cyberchefcloud"
]);
"cyberchefcloud",
true
]
},
{
op: "Google Translate",
args: [
"en",
"es"
]
}
], "Hello");
browser.waitForElementNotVisible("#snackbar-container", 6000);
browserUtils.bake(browser);
browser.pause(2000);
browser.saveScreenshot("tests/browser/output/success_oauth_debug.png");
browser.saveScreenshot("tests/browser/output/success_pat_debug.png");
browser.execute(function () {
return window.app.manager.output.outputEditorView.state.doc.toString();
}, [], function ({ value }) {
browser.assert.equal(value, "Hola");
browser.assert.ok(value.includes("Hola"), "Expected translation 'Hola'");
});
},
@ -81,13 +104,24 @@ module.exports = {
return;
}
browserUtils.loadRecipe(browser, "Google Translate", "Hello", [
"en",
"es",
browserUtils.loadRecipeConfig(browser, [
{
op: "Authenticate Google Cloud",
args: [
"API Key",
{ option: "UTF8", string: testKey },
""
]);
"",
true
]
},
{
op: "Google Translate",
args: [
"en",
"es"
]
}
], "Hello");
browser.waitForElementNotVisible("#snackbar-container", 6000);
browserUtils.bake(browser);
@ -96,20 +130,31 @@ module.exports = {
browser.execute(function () {
return window.app.manager.output.outputEditorView.state.doc.toString();
}, [], function ({ value }) {
browser.assert.equal(value, "Hola");
browser.assert.ok(value.includes("Hola"), "Expected translation 'Hola'");
});
},
// ─── GCloud List Bucket ────────────────────────────────────────────────────
"GCloud List Bucket: Missing Key Validation": function (browser) {
browserUtils.loadRecipe(browser, "GCloud List Bucket", "cyber-chef-cloud-examples", [
"audio/",
"GCS URIs (one per line)",
"GCloud List Bucket: Missing Creds Validation": function (browser) {
browserUtils.loadRecipeConfig(browser, [
{
op: "Authenticate Google Cloud",
args: [
"API Key",
{ option: "UTF8", string: "" },
""
]);
"",
true
]
},
{
op: "GCloud List Bucket",
args: [
"audio/",
"GCS URIs (one per line)"
]
}
], "cyber-chef-cloud-examples");
browser.waitForElementNotVisible("#snackbar-container", 6000);
browserUtils.bake(browser);
@ -118,7 +163,7 @@ module.exports = {
browser.execute(function () {
return window.app.manager.output.outputEditorView.state.doc.toString();
}, [], function ({ value }) {
browser.assert.ok(value.includes("Please provide a valid GCP Auth String"));
browser.assert.ok(value.includes("No Google Cloud credentials found") || value.includes("Please provide Google Cloud credentials"));
});
},
@ -134,13 +179,24 @@ module.exports = {
}
}
browserUtils.loadRecipe(browser, "GCloud List Bucket", "cyber-chef-cloud-examples", [
"audio/",
"GCS URIs (one per line)",
"OAuth Token",
browserUtils.loadRecipeConfig(browser, [
{
op: "Authenticate Google Cloud",
args: [
"Personal Access Token (PAT)",
{ option: "UTF8", string: testToken },
"cyberchefcloud"
]);
"cyberchefcloud",
true
]
},
{
op: "GCloud List Bucket",
args: [
"audio/",
"GCS URIs (one per line)"
]
}
], "cyber-chef-cloud-examples");
browser.waitForElementNotVisible("#snackbar-container", 6000);
browserUtils.bake(browser);
@ -170,17 +226,29 @@ module.exports = {
const gcsUri = "gs://cyber-chef-cloud-examples/audio/she_achieves_great_results_f55548.mp3";
browserUtils.loadRecipe(browser, "GCloud Speech to Text", gcsUri, [
browserUtils.loadRecipeConfig(browser, [
{
op: "Authenticate Google Cloud",
args: [
"Personal Access Token (PAT)",
{ option: "UTF8", string: testToken },
"cyberchefcloud",
true
]
},
{
op: "GCloud Speech to Text",
args: [
"GCS URI (gs://...)",
"en-US",
"latest_long",
"Return to CyberChef",
"cyber-chef-cloud-examples",
30,
"OAuth Token",
{ option: "UTF8", string: testToken },
"cyberchefcloud"
]);
30
]
}
], gcsUri);
browser.waitForElementNotVisible("#snackbar-container", 6000);
browserUtils.bake(browser);
@ -211,17 +279,28 @@ module.exports = {
const gcsUri = "gs://cyber-chef-cloud-examples/audio/she_achieves_great_results_f55548.mp3";
browserUtils.loadRecipe(browser, "GCloud Speech to Text", gcsUri, [
browserUtils.loadRecipeConfig(browser, [
{
op: "Authenticate Google Cloud",
args: [
"Personal Access Token (PAT)",
{ option: "UTF8", string: testToken },
"cyberchefcloud",
true
]
},
{
op: "GCloud Speech to Text",
args: [
"GCS URI (gs://...)",
"en-US",
"latest_long",
"Write to GCS",
"cyber-chef-cloud-examples",
30,
"OAuth Token",
{ option: "UTF8", string: testToken },
"cyberchefcloud"
]);
30
]
}
], gcsUri);
browser.waitForElementNotVisible("#snackbar-container", 6000);
browserUtils.bake(browser);