CyberChef/src/web/InputWaiter.mjs

617 lines
19 KiB
JavaScript
Raw Normal View History

2018-05-15 19:36:45 +02:00
/**
* @author n1474335 [n1474335@gmail.com]
* @copyright Crown Copyright 2016
* @license Apache-2.0
*/
import LoaderWorker from "worker-loader?inline&fallback=false!./LoaderWorker";
import Utils from "../core/Utils";
/**
* Waiter to handle events related to the input.
*/
class InputWaiter {
/**
* InputWaiter constructor.
*
* @param {App} app - The main view object for CyberChef.
* @param {Manager} manager - The CyberChef event manager.
*/
constructor(app, manager) {
this.app = app;
this.manager = manager;
// Define keys that don't change the input so we don't have to autobake when they are pressed
this.badKeys = [
16, //Shift
17, //Ctrl
18, //Alt
19, //Pause
20, //Caps
27, //Esc
33, 34, 35, 36, //PgUp, PgDn, End, Home
37, 38, 39, 40, //Directional
44, //PrntScrn
91, 92, //Win
93, //Context
112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, //F1-12
144, //Num
145, //Scroll
];
this.loaderWorkers = {};
this.fileBuffers = {};
this.inputs = {};
2018-05-15 19:36:45 +02:00
}
/**
* Gets the user's input from the active input textarea.
2018-05-15 19:36:45 +02:00
*
* @returns {string}
*/
get() {
const textArea = document.getElementById("input-text");
const value = textArea.value;
const inputNum = this.getActiveTab();
if (this.fileBuffers[inputNum] && this.fileBuffers[inputNum].fileBuffer) {
return this.fileBuffers[inputNum].fileBuffer;
}
return value;
2018-05-15 19:36:45 +02:00
}
/**
* Sets the input in the input area.
*
* @param {string|File} input
* @param {boolean} [silent=false] - Suppress statechange event
2018-05-15 19:36:45 +02:00
*
* @fires Manager#statechange
*/
set(input, silent=false) {
2018-05-15 19:36:45 +02:00
const inputText = document.getElementById("input-text");
const inputNum = this.getActiveTab();
2018-05-15 19:36:45 +02:00
if (input instanceof File) {
this.setFile(input);
inputText.value = "";
this.setInputInfo(input.size, null);
this.displayTabInfo(input);
2018-05-15 19:36:45 +02:00
} else {
inputText.value = input;
this.inputs[inputNum] = input;
this.closeFile(inputNum);
if (!silent) window.dispatchEvent(this.manager.statechange);
2018-05-15 19:36:45 +02:00
const lines = input.length < (this.app.options.ioDisplayThreshold * 1024) ?
input.count("\n") + 1 : null;
this.setInputInfo(input.length, lines);
this.displayTabInfo(input);
2018-05-15 19:36:45 +02:00
}
}
/**
* Shows file details.
*
* @param {File} file
*/
setFile(file) {
// Display file overlay in input area with details
const inputNum = this.getActiveTab();
2018-05-15 19:36:45 +02:00
this.fileBuffers[inputNum] = {
fileBuffer: new ArrayBuffer(),
name: file.name,
size: file.size.toLocaleString(),
type: file.type || "unknown",
loaded: "0%"
};
this.setFileInfo(this.fileBuffers[inputNum]);
2018-05-15 19:36:45 +02:00
}
/**
* Displays information about the input.
*
* @param {number} length - The length of the current input string
* @param {number} lines - The number of the lines in the current input string
*/
setInputInfo(length, lines) {
let width = length.toString().length;
width = width < 2 ? 2 : width;
const lengthStr = length.toString().padStart(width, " ").replace(/ /g, "&nbsp;");
let msg = "length: " + lengthStr;
if (typeof lines === "number") {
const linesStr = lines.toString().padStart(width, " ").replace(/ /g, "&nbsp;");
msg += "<br>lines: " + linesStr;
}
document.getElementById("input-info").innerHTML = msg;
}
/**
* Displays information about the input file.
*
* @param fileObj
*/
setFileInfo(fileObj) {
const fileOverlay = document.getElementById("input-file"),
fileName = document.getElementById("input-file-name"),
fileSize = document.getElementById("input-file-size"),
fileType = document.getElementById("input-file-type"),
fileLoaded = document.getElementById("input-file-loaded");
fileOverlay.style.display = "block";
fileName.textContent = fileObj.name;
fileSize.textContent = fileObj.size + " bytes";
fileType.textContent = fileObj.type;
fileLoaded.textContent = fileObj.loaded;
2018-05-15 19:36:45 +02:00
}
/**
* Handler for input change events.
*
* @param {event} e
*
* @fires Manager#statechange
*/
inputChange(e) {
// Ignore this function if the input is a File
const inputNum = this.getActiveTab();
if (this.fileBuffers[inputNum]) return;
2018-05-15 19:36:45 +02:00
// Remove highlighting from input and output panes as the offsets might be different now
// this.manager.highlighter.removeHighlights();
2018-05-15 19:36:45 +02:00
// Reset recipe progress as any previous processing will be redundant now
this.app.progress = 0;
// Update the input metadata info
const inputText = this.get();
this.inputs[inputNum] = inputText;
2018-05-15 19:36:45 +02:00
const lines = inputText.length < (this.app.options.ioDisplayThreshold * 1024) ?
inputText.count("\n") + 1 : null;
this.setInputInfo(inputText.length, lines);
this.displayTabInfo(inputText);
2018-05-15 19:36:45 +02:00
if (e && this.badKeys.indexOf(e.keyCode) < 0) {
// Fire the statechange event as the input has been modified
window.dispatchEvent(this.manager.statechange);
}
}
/**
* Handler for input paste events.
* Checks that the size of the input is below the display limit, otherwise treats it as a file/blob.
*
* @param {event} e
*/
inputPaste(e) {
const pastedData = e.clipboardData.getData("Text");
if (pastedData.length < (this.app.options.ioDisplayThreshold * 1024)) {
this.inputChange(e);
} else {
e.preventDefault();
e.stopPropagation();
const file = new File([pastedData], "PastedData", {
type: "text/plain",
lastModified: Date.now()
});
this.loaderWorker = new LoaderWorker();
this.loaderWorker.addEventListener("message", this.handleLoaderMessage.bind(this));
this.loaderWorker.postMessage({"file": file, "inputNum": this.getActiveTab()});
2018-05-15 19:36:45 +02:00
this.set(file);
return false;
}
}
/**
* Handler for input dragover events.
* Gives the user a visual cue to show that items can be dropped here.
*
* @param {event} e
*/
inputDragover(e) {
// This will be set if we're dragging an operation
if (e.dataTransfer.effectAllowed === "move")
return false;
e.stopPropagation();
e.preventDefault();
e.target.closest("#input-text,#input-file").classList.add("dropping-file");
}
/**
* Handler for input dragleave events.
* Removes the visual cue.
*
* @param {event} e
*/
inputDragleave(e) {
e.stopPropagation();
e.preventDefault();
e.target.closest("#input-text,#input-file").classList.remove("dropping-file");
2018-05-15 19:36:45 +02:00
}
/**
* Handler for input drop events.
* Loads the dragged data into the input textarea.
*
* @param {event} e
*/
inputDrop(e) {
// This will be set if we're dragging an operation
if (e.dataTransfer.effectAllowed === "move")
return false;
e.stopPropagation();
e.preventDefault();
const text = e.dataTransfer.getData("Text");
e.target.closest("#input-text,#input-file").classList.remove("dropping-file");
2018-05-15 19:36:45 +02:00
if (text) {
this.closeFile(this.getActiveTab());
2018-05-15 19:36:45 +02:00
this.set(text);
return;
}
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
for (let i = 0; i < e.dataTransfer.files.length; i++) {
const file = e.dataTransfer.files[i];
if (i !== 0) {
this.addTab();
}
this.loadFile(file, this.getActiveTab());
}
2018-05-15 19:36:45 +02:00
}
}
/**
* Handler for open input button events
* Loads the opened data into the input textarea
*
* @param {event} e
*/
inputOpen(e) {
e.preventDefault();
// TODO : CHANGE THIS TO HANDLE MULTIPLE FILES
for (let i = 0; i < e.srcElement.files.length; i++) {
const file = e.srcElement.files[i];
if (i !== 0) {
this.addTab();
}
this.loadFile(file, this.getActiveTab());
}
}
2018-05-15 19:36:45 +02:00
/**
* Handler for messages sent back by the LoaderWorker.
*
* @param {MessageEvent} e
*/
handleLoaderMessage(e) {
const r = e.data;
let inputNum;
const tabNum = this.getActiveTab();
if (r.hasOwnProperty("inputNum")) {
inputNum = r.inputNum;
}
2018-05-15 19:36:45 +02:00
if (r.hasOwnProperty("progress")) {
this.fileBuffers[inputNum].loaded = r.progress + "%";
if (tabNum === inputNum) {
const fileLoaded = document.getElementById("input-file-loaded");
fileLoaded.textContent = r.progress + "%";
}
2018-05-15 19:36:45 +02:00
}
if (r.hasOwnProperty("error")) {
this.app.alert(r.error, 10000);
2018-05-15 19:36:45 +02:00
}
if (r.hasOwnProperty("fileBuffer")) {
log.debug("Input file loaded");
this.fileBuffers[inputNum].fileBuffer = r.fileBuffer;
2018-05-15 19:36:45 +02:00
this.displayFilePreview();
window.dispatchEvent(this.manager.statechange);
}
}
/**
* Shows a chunk of the file in the input behind the file overlay.
*/
displayFilePreview() {
const inputNum = this.getActiveTab();
2018-05-15 19:36:45 +02:00
const inputText = document.getElementById("input-text"),
fileSlice = this.fileBuffers[inputNum].fileBuffer.slice(0, 4096);
2018-05-15 19:36:45 +02:00
inputText.style.overflow = "hidden";
inputText.classList.add("blur");
inputText.value = Utils.printable(Utils.arrayBufferToStr(fileSlice));
if (this.fileBuffers[inputNum].fileBuffer.byteLength > 4096) {
2018-05-15 19:36:45 +02:00
inputText.value += "[truncated]...";
}
}
/**
* Handler for file close events.
*/
closeFile(inputNum) {
if (this.loaderWorkers[inputNum]) this.loaderWorkers[inputNum].terminate();
delete this.fileBuffers[inputNum];
2018-05-15 19:36:45 +02:00
document.getElementById("input-file").style.display = "none";
const inputText = document.getElementById("input-text");
inputText.style.overflow = "auto";
inputText.classList.remove("blur");
}
/**
* Loads a file into the input.
*
* @param {File} file
* @param {string} inputNum
*/
loadFile(file, inputNum) {
if (file && inputNum) {
this.closeFile(inputNum);
this.loaderWorkers[inputNum] = new LoaderWorker();
this.loaderWorkers[inputNum].addEventListener("message", this.handleLoaderMessage.bind(this));
this.loaderWorkers[inputNum].postMessage({"file": file, "inputNum": inputNum});
this.set(file);
}
}
2018-05-15 19:36:45 +02:00
/**
* Handler for clear IO events.
* Resets the input, output and info areas.
*
* @fires Manager#statechange
*/
clearIoClick() {
this.closeFile(this.getActiveTab());
2018-05-15 19:36:45 +02:00
this.manager.output.closeFile();
this.manager.highlighter.removeHighlights();
document.getElementById("input-text").value = "";
document.getElementById("output-text").value = "";
document.getElementById("input-info").innerHTML = "";
document.getElementById("output-info").innerHTML = "";
document.getElementById("input-selection-info").innerHTML = "";
document.getElementById("output-selection-info").innerHTML = "";
window.dispatchEvent(this.manager.statechange);
}
/**
* Handler for clear all IO events.
* Resets the input, output and info areas.
*
* @fires Manager#statechange
*/
clearAllIoClick() {
// TODO: Close all tabs here
const tabs = document.getElementById("input-tabs").getElementsByTagName("li");
for (let i = tabs.length - 1; i >= 0; i--) {
const tabItem = tabs.item(i);
this.closeFile(this.getActiveTab(tabItem.id.replace("input-tab-", "")));
this.removeTab(tabItem);
}
this.manager.output.closeFile();
// this.manager.highlighter.removeHighlights();
const inputNum = this.getActiveTab();
document.getElementById(`input-tab-${inputNum}`).firstElementChild.innerText = "New Tab";
document.getElementById("input-text").value = "";
document.getElementById("output-text").value = "";
document.getElementById("input-info").innerHTML = "";
document.getElementById("output-info").innerHTML = "";
document.getElementById("input-selection-info").innerHTML = "";
document.getElementById("output-selection-info").innerHTML = "";
window.dispatchEvent(this.manager.statechange);
}
/**
* Function to create a new tab
*
* @param {boolean} changeTab
*/
addTab(changeTab = true) {
const tabWrapper = document.getElementById("input-tabs");
const tabsList = tabWrapper.children[0];
const lastTabNum = tabsList.lastElementChild.id.replace("input-tab-", "");
const newTabNum = parseInt(lastTabNum, 10) + 1;
tabWrapper.style.display = "block";
document.getElementById("input-wrapper").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
document.getElementById("input-file").style.height = "calc(100% - var(--tab-height) - var(--title-height))";
this.inputs[newTabNum.toString()] = "";
const newTab = document.createElement("li");
newTab.id = `input-tab-${newTabNum}`;
const newTabContent = document.createElement("div");
newTabContent.classList.add("input-tab-content");
newTabContent.innerText = "New Tab";
const newTabCloseBtn = document.createElement("button");
newTabCloseBtn.className = "btn btn-primary bmd-btn-icon btn-close-tab";
newTabCloseBtn.id = `btn-close-tab-${newTabNum}`;
const newTabCloseBtnIcon = document.createElement("i");
newTabCloseBtnIcon.classList.add("material-icons");
newTabCloseBtnIcon.innerText = "clear";
newTabCloseBtn.appendChild(newTabCloseBtnIcon);
newTab.appendChild(newTabContent);
newTab.appendChild(newTabCloseBtn);
tabsList.appendChild(newTab);
if (changeTab) {
this.changeTab(newTabContent);
}
}
/**
* Function to remove a tab
*
* @param {Element} tabLiItem
*/
removeTab(tabLiItem) {
const tabList= tabLiItem.parentElement;
if (tabList.children.length > 1) {
if (tabLiItem.classList.contains("active-input-tab")) {
if (tabLiItem.previousElementSibling) {
this.changeTab(tabLiItem.previousElementSibling.firstElementChild);
window.dispatchEvent(this.manager.statechange);
} else if (tabLiItem.nextElementSibling) {
this.changeTab(tabLiItem.nextElementSibling.firstElementChild);
window.dispatchEvent(this.manager.statechange);
}
}
const tabNum = tabLiItem.id.replace("input-tab-", "");
delete this.fileBuffers[tabNum];
delete this.inputs[tabNum];
tabList.removeChild(tabLiItem);
} else {
const tabNum = tabLiItem.id.replace("input-tab-", "");
delete this.fileBuffers[tabNum];
this.inputs[tabNum] = "";
document.getElementById("input-text").value = "";
tabLiItem.firstElementChild.innerText = "New Tab";
}
if (tabList.children.length === 1) {
document.getElementById("input-tabs").style.display = "none";
document.getElementById("input-wrapper").style.height = "calc(100% - var(--title-height))";
document.getElementById("input-file").style.height = "calc(100% - var(--title-height))";
}
}
/**
* Handler for removing an input tab
*
* @param {event} mouseEvent
*/
removeTabClick(mouseEvent) {
if (!mouseEvent.srcElement) {
return;
}
this.removeTab(mouseEvent.srcElement.parentElement.parentElement);
}
/**
* Change the active tab to tabElement
*
* @param {Element} tabElement The tab element to change to
*/
changeTab(tabElement) {
const liItem = tabElement.parentElement;
const newTabNum = liItem.id.replace("input-tab-", "");
const currentTabNum = this.getActiveTab();
const inputText = document.getElementById("input-text");
document.getElementById(`input-tab-${currentTabNum}`).classList.remove("active-input-tab");
liItem.classList.add("active-input-tab");
this.inputs[currentTabNum] = inputText.value;
if (this.fileBuffers[newTabNum]) {
const fileObj = this.fileBuffers[newTabNum];
this.setInputInfo(fileObj.size, 1);
this.setFileInfo(fileObj);
this.displayFilePreview();
} else {
inputText.value = this.inputs[newTabNum];
inputText.style.overflow = "auto";
inputText.classList.remove("blur");
this.inputChange(null);
document.getElementById("input-file").style.display = "none";
}
window.dispatchEvent(this.manager.statechange);
}
/**
* Handler for changing tabs event
*
* @param {event} mouseEvent
*/
changeTabClick(mouseEvent) {
if (!mouseEvent.srcElement) {
return;
}
this.changeTab(mouseEvent.srcElement);
}
/**
* Display input information in the tab header
*
* @param {string|File} input
*/
displayTabInfo(input) {
const activeTabs = document.getElementsByClassName("active-input-tab");
if (activeTabs.length > 0) {
const activeTabContent = activeTabs.item(0).getElementsByClassName("input-tab-content")[0];
if (input instanceof File) {
activeTabContent.innerText = input.name;
} else {
if (input.length > 0) {
activeTabContent.innerText = input.slice(0, 100);
} else {
activeTabContent.innerText = "New Tab";
}
}
}
}
/**
* Gets the number of the current active tab
*
* @returns {string}
*/
getActiveTab() {
const activeTabs = document.getElementsByClassName("active-input-tab");
if (activeTabs.length > 0) {
const activeTab = activeTabs.item(0);
const activeTabNum = activeTab.id.replace("input-tab-", "");
return activeTabNum;
} else {
throw "Could not find an active tab";
}
}
2018-05-15 19:36:45 +02:00
}
export default InputWaiter;