214 lines
7.6 KiB
JavaScript
Executable File
214 lines
7.6 KiB
JavaScript
Executable File
/**
|
|
* Object to handle the creation of operation ingredients.
|
|
*
|
|
* @author n1474335 [n1474335@gmail.com]
|
|
* @copyright Crown Copyright 2016
|
|
* @license Apache-2.0
|
|
*
|
|
* @constructor
|
|
* @param {Object} config - The configuration object for this ingredient.
|
|
* @param {HTMLApp} app - The main view object for CyberChef.
|
|
* @param {Manager} manager - The CyberChef event manager.
|
|
*/
|
|
const HTMLIngredient = function (config, app, manager) {
|
|
this.app = app;
|
|
this.manager = manager;
|
|
|
|
this.name = config.name;
|
|
this.type = config.type;
|
|
this.value = config.value;
|
|
this.disabled = config.disabled || false;
|
|
this.disable_args = config.disable_args || false;
|
|
this.placeholder = config.placeholder || false;
|
|
this.target = config.target;
|
|
this.toggle_values = config.toggle_values;
|
|
this.id = `ing-${this.app.next_ing_id()}`;
|
|
};
|
|
|
|
|
|
/**
|
|
* Renders the ingredient in HTML.
|
|
*
|
|
* @returns {string}
|
|
*/
|
|
HTMLIngredient.prototype.to_html = function () {
|
|
let inline = (this.type == 'boolean' ||
|
|
this.type == 'number' ||
|
|
this.type == 'option' ||
|
|
this.type == 'short_string' ||
|
|
this.type == 'binary_short_string'),
|
|
html = inline ? '' : "<div class='clearfix'> </div>",
|
|
i,
|
|
m;
|
|
|
|
html += `<div class='arg-group${inline ? ' inline-args' : ''
|
|
}${this.type == 'text' ? ' arg-group-text' : ''}'><label class='arg-label' for='${
|
|
this.id}'>${this.name}</label>`;
|
|
|
|
switch (this.type) {
|
|
case 'string':
|
|
case 'binary_string':
|
|
case 'byte_array':
|
|
html += `<input type='text' id='${this.id}' class='arg arg-input' arg_name='${
|
|
this.name}' value='${this.value}'${
|
|
this.disabled ? " disabled='disabled'" : ''
|
|
}${this.placeholder ? ` placeholder='${this.placeholder}'` : ''}>`;
|
|
break;
|
|
case 'short_string':
|
|
case 'binary_short_string':
|
|
html += `<input type='text' id='${this.id
|
|
}'class='arg arg-input short-string' arg_name='${this.name}'value='${
|
|
this.value}'${this.disabled ? " disabled='disabled'" : ''
|
|
}${this.placeholder ? ` placeholder='${this.placeholder}'` : ''}>`;
|
|
break;
|
|
case 'toggle_string':
|
|
html += `<div class='input-group'><div class='input-group-btn'>\
|
|
<button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'\
|
|
aria-haspopup='true' aria-expanded='false'${
|
|
this.disabled ? " disabled='disabled'" : ''}>${this.toggle_values[0]
|
|
} <span class='caret'></span></button><ul class='dropdown-menu'>`;
|
|
for (i = 0; i < this.toggle_values.length; i++) {
|
|
html += `<li><a href='#'>${this.toggle_values[i]}</a></li>`;
|
|
}
|
|
html += `</ul></div><input type='text' class='arg arg-input toggle-string'${
|
|
this.disabled ? " disabled='disabled'" : ''
|
|
}${this.placeholder ? ` placeholder='${this.placeholder}'` : ''}></div>`;
|
|
break;
|
|
case 'number':
|
|
html += `<input type='number' id='${this.id}'class='arg arg-input' arg_name='${
|
|
this.name}'value='${this.value}'${
|
|
this.disabled ? " disabled='disabled'" : ''
|
|
}${this.placeholder ? ` placeholder='${this.placeholder}'` : ''}>`;
|
|
break;
|
|
case 'boolean':
|
|
html += `<input type='checkbox' id='${this.id}'class='arg' arg_name='${
|
|
this.name}'${this.value ? " checked='checked' " : ''
|
|
}${this.disabled ? " disabled='disabled'" : ''}>`;
|
|
|
|
if (this.disable_args) {
|
|
this.manager.add_dynamic_listener(`#${this.id}`, 'click', this.toggle_disable_args, this);
|
|
}
|
|
break;
|
|
case 'option':
|
|
html += `<select class='arg' id='${this.id}'arg_name='${this.name}'${
|
|
this.disabled ? " disabled='disabled'" : ''}>`;
|
|
for (i = 0; i < this.value.length; i++) {
|
|
if (m = this.value[i].match(/\[([a-z0-9 -()^]+)\]/i)) {
|
|
html += `<optgroup label='${m[1]}'>`;
|
|
} else if (m = this.value[i].match(/\[\/([a-z0-9 -()^]+)\]/i)) {
|
|
html += '</optgroup>';
|
|
} else {
|
|
html += `<option>${this.value[i]}</option>`;
|
|
}
|
|
}
|
|
html += '</select>';
|
|
break;
|
|
case 'populate_option':
|
|
html += `<select class='arg' id='${this.id}'arg_name='${this.name}'${
|
|
this.disabled ? " disabled='disabled'" : ''}>`;
|
|
for (i = 0; i < this.value.length; i++) {
|
|
if (m = this.value[i].name.match(/\[([a-z0-9 -()^]+)\]/i)) {
|
|
html += `<optgroup label='${m[1]}'>`;
|
|
} else if (m = this.value[i].name.match(/\[\/([a-z0-9 -()^]+)\]/i)) {
|
|
html += '</optgroup>';
|
|
} else {
|
|
html += `<option populate-value='${this.value[i].value}'>${
|
|
this.value[i].name}</option>`;
|
|
}
|
|
}
|
|
html += '</select>';
|
|
|
|
this.manager.add_dynamic_listener(`#${this.id}`, 'change', this.populate_option_change, this);
|
|
break;
|
|
case 'editable_option':
|
|
html += "<div class='editable-option'>";
|
|
html += `<select class='editable-option-select' id='sel-${this.id}'${
|
|
this.disabled ? " disabled='disabled'" : ''}>`;
|
|
for (i = 0; i < this.value.length; i++) {
|
|
html += `<option value='${this.value[i].value}'>${this.value[i].name}</option>`;
|
|
}
|
|
html += '</select>';
|
|
html += `<input class='arg arg-input editable-option-input' id='${this.id
|
|
}'arg_name='${this.name}'` + ` value='${this.value[0].value}'${
|
|
this.disabled ? " disabled='disabled'" : ''
|
|
}${this.placeholder ? ` placeholder='${this.placeholder}'` : ''}>`;
|
|
html += '</div>';
|
|
|
|
|
|
this.manager.add_dynamic_listener(`#sel-${this.id}`, 'change', this.editable_option_change, this);
|
|
break;
|
|
case 'text':
|
|
html += `<textarea id='${this.id}' class='arg' arg_name='${
|
|
this.name}'${this.disabled ? " disabled='disabled'" : ''
|
|
}${this.placeholder ? ` placeholder='${this.placeholder}'` : ''}>${
|
|
this.value}</textarea>`;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
html += '</div>';
|
|
|
|
return html;
|
|
};
|
|
|
|
|
|
/**
|
|
* Handler for argument disable toggle.
|
|
* Toggles disabled state for all arguments in the disable_args list for this ingredient.
|
|
*
|
|
* @param {event} e
|
|
*/
|
|
HTMLIngredient.prototype.toggle_disable_args = function (e) {
|
|
let el = e.target,
|
|
op = el.parentNode.parentNode,
|
|
args = op.querySelectorAll('.arg-group'),
|
|
els;
|
|
|
|
for (let i = 0; i < this.disable_args.length; i++) {
|
|
els = args[this.disable_args[i]].querySelectorAll('input, select, button');
|
|
|
|
for (let j = 0; j < els.length; j++) {
|
|
if (els[j].getAttribute('disabled')) {
|
|
els[j].removeAttribute('disabled');
|
|
} else {
|
|
els[j].setAttribute('disabled', 'disabled');
|
|
}
|
|
}
|
|
}
|
|
|
|
this.manager.recipe.ing_change();
|
|
};
|
|
|
|
|
|
/**
|
|
* Handler for populate option changes.
|
|
* Populates the relevant argument with the specified value.
|
|
*
|
|
* @param {event} e
|
|
*/
|
|
HTMLIngredient.prototype.populate_option_change = function (e) {
|
|
let el = e.target,
|
|
op = el.parentNode.parentNode,
|
|
target = op.querySelectorAll('.arg-group')[this.target].querySelector('input, select, textarea');
|
|
|
|
target.value = el.childNodes[el.selectedIndex].getAttribute('populate-value');
|
|
|
|
this.manager.recipe.ing_change();
|
|
};
|
|
|
|
|
|
/**
|
|
* Handler for editable option changes.
|
|
* Populates the input box with the selected value.
|
|
*
|
|
* @param {event} e
|
|
*/
|
|
HTMLIngredient.prototype.editable_option_change = function (e) {
|
|
let select = e.target,
|
|
input = select.nextSibling;
|
|
|
|
input.value = select.childNodes[select.selectedIndex].value;
|
|
|
|
this.manager.recipe.ing_change();
|
|
};
|