/** * @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 = {}; } /** * Gets the user's input from the active input textarea. * * @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; } /** * Sets the input in the input area. * * @param {string|File} input * @param {boolean} [silent=false] - Suppress statechange event * * @fires Manager#statechange */ set(input, silent=false) { const inputText = document.getElementById("input-text"); const inputNum = this.getActiveTab(); if (input instanceof File) { this.setFile(input); inputText.value = ""; this.setInputInfo(input.size, null); this.displayTabInfo(input); } else { inputText.value = input; this.inputs[inputNum] = input; this.closeFile(inputNum); if (!silent) window.dispatchEvent(this.manager.statechange); const lines = input.length < (this.app.options.ioDisplayThreshold * 1024) ? input.count("\n") + 1 : null; this.setInputInfo(input.length, lines); this.displayTabInfo(input); } } /** * Shows file details. * * @param {File} file */ setFile(file) { // Display file overlay in input area with details const inputNum = this.getActiveTab(); this.fileBuffers[inputNum] = { fileBuffer: new ArrayBuffer(), name: file.name, size: file.size.toLocaleString(), type: file.type || "unknown", loaded: "0%" }; this.setFileInfo(this.fileBuffers[inputNum]); } /** * 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, " "); let msg = "length: " + lengthStr; if (typeof lines === "number") { const linesStr = lines.toString().padStart(width, " ").replace(/ /g, " "); msg += "
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; } /** * 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; // Remove highlighting from input and output panes as the offsets might be different now // this.manager.highlighter.removeHighlights(); // 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; const lines = inputText.length < (this.app.options.ioDisplayThreshold * 1024) ? inputText.count("\n") + 1 : null; this.setInputInfo(inputText.length, lines); this.displayTabInfo(inputText); 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()}); 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"); } /** * 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"); if (text) { this.closeFile(this.getActiveTab()); 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()); } } } /** * 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()); } } /** * 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; } if (r.hasOwnProperty("progress")) { this.fileBuffers[inputNum].loaded = r.progress + "%"; if (tabNum === inputNum) { const fileLoaded = document.getElementById("input-file-loaded"); fileLoaded.textContent = r.progress + "%"; } } if (r.hasOwnProperty("error")) { this.app.alert(r.error, 10000); } if (r.hasOwnProperty("fileBuffer")) { log.debug("Input file loaded"); this.fileBuffers[inputNum].fileBuffer = r.fileBuffer; 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(); const inputText = document.getElementById("input-text"), fileSlice = this.fileBuffers[inputNum].fileBuffer.slice(0, 4096); inputText.style.overflow = "hidden"; inputText.classList.add("blur"); inputText.value = Utils.printable(Utils.arrayBufferToStr(fileSlice)); if (this.fileBuffers[inputNum].fileBuffer.byteLength > 4096) { inputText.value += "[truncated]..."; } } /** * Handler for file close events. */ closeFile(inputNum) { if (this.loaderWorkers[inputNum]) this.loaderWorkers[inputNum].terminate(); delete this.fileBuffers[inputNum]; 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); } } /** * Handler for clear IO events. * Resets the input, output and info areas. * * @fires Manager#statechange */ clearIoClick() { this.closeFile(this.getActiveTab()); 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"; } } } export default InputWaiter;