infosecn1nja
/
CyberChef
mirror of https://github.com/infosecn1nja/CyberChef.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed all HTML operations

feature-extract-files
n1474335 2018-07-15 13:25:44 +01:00
parent ab44100312
commit 651ca6cf5d
13 changed files with 62 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/core/Utils.mjs
View File

@ -828,11 +828,11 @@ class Utils {
*/ */
static async displayFilesAsHTML(files) { static async displayFilesAsHTML(files) {
const formatDirectory = function(file) { const formatDirectory = function(file) {
const html = `<div class='panel panel-default' style='white-space: normal;'> const html = `<div class='card' style='white-space: normal;'>
<div class='panel-heading' role='tab'> <div class='card-header'>
<h4 class='panel-title'> <h6 class="mb-0">
${Utils.escapeHtml(file.name)} ${Utils.escapeHtml(file.name)}
</h4> </h6>
</div> </div>
</div>`; </div>`;
return html; return html;
@ -845,29 +845,29 @@ class Utils {
{type: "octet/stream"} {type: "octet/stream"}
); );
const html = `<div class='panel panel-default' style='white-space: normal;'> const html = `<div class='card' style='white-space: normal;'>
<div class='panel-heading' role='tab' id='heading${i}'> <div class='card-header' id='heading${i}'>
<h4 class='panel-title'> <h6 class='mb-0'>
<div> <a class='collapsed'
<a href='#collapse${i}' data-toggle='collapse'
class='collapsed' href='#collapse${i}'
data-toggle='collapse' aria-expanded='false'
aria-expanded='true' aria-controls='collapse${i}'
aria-controls='collapse${i}' title="Show/hide contents of '${Utils.escapeHtml(file.name)}'">
title="Show/hide contents of '${Utils.escapeHtml(file.name)}'">${Utils.escapeHtml(file.name)}</a> ${Utils.escapeHtml(file.name)}</a>
<a href='${URL.createObjectURL(blob)}' <span class='float-right' style="margin-top: -3px">
title='Download ${Utils.escapeHtml(file.name)}' ${file.size.toLocaleString()} bytes
download='${Utils.escapeHtml(file.name)}'>&#x1f4be;</a> <a title="Download ${Utils.escapeHtml(file.name)}"
<span class='pull-right'> href='${URL.createObjectURL(blob)}'
${file.size.toLocaleString()} bytes download='${Utils.escapeHtml(file.name)}'>
</span> <i class="material-icons" style="vertical-align: bottom">save</i>
</div> </a>
</h4> </span>
</h6>
</div> </div>
<div id='collapse${i}' class='panel-collapse collapse' <div id='collapse${i}' class='collapse' aria-labelledby='heading${i}' data-parent="#files">
role='tabpanel' aria-labelledby='heading${i}'> <div class='card-body'>
<div class='panel-body'> <pre>${Utils.escapeHtml(Utils.arrayBufferToStr(buff.buffer))}</pre>
<pre><code>${Utils.escapeHtml(Utils.arrayBufferToStr(buff.buffer))}</code></pre>
</div> </div>
</div> </div>
</div>`; </div>`;
@ -875,8 +875,8 @@ class Utils {
}; };
let html = `<div style='padding: 5px; white-space: normal;'> let html = `<div style='padding: 5px; white-space: normal;'>
${files.length} file(s) found<NL> ${files.length} file(s) found
</div>`; </div><div id="files" style="padding: 20px">`;
for (let i = 0; i < files.length; i++) { for (let i = 0; i < files.length; i++) {
if (files[i].name.endsWith("/")) { if (files[i].name.endsWith("/")) {
@ -886,7 +886,7 @@ class Utils {
} }
} }
return html; return html += "</div>";
} }

4
src/core/lib/CanvasComponents.mjs
View File

@ -48,7 +48,7 @@ export function drawBarChart(canvas, scores, xAxisLabel, yAxisLabel, numXLabels,
leftPadding = canvas.width * 0.08, leftPadding = canvas.width * 0.08,
rightPadding = canvas.width * 0.03, rightPadding = canvas.width * 0.03,
topPadding = canvas.height * 0.08, topPadding = canvas.height * 0.08,
bottomPadding = canvas.height * 0.15, bottomPadding = canvas.height * 0.2,
graphHeight = canvas.height - topPadding - bottomPadding, graphHeight = canvas.height - topPadding - bottomPadding,
graphWidth = canvas.width - leftPadding - rightPadding, graphWidth = canvas.width - leftPadding - rightPadding,
base = topPadding + graphHeight, base = topPadding + graphHeight,
@ -146,7 +146,7 @@ export function drawScaleBar(canvas, score, max, markings) {
leftPadding = canvas.width * 0.01, leftPadding = canvas.width * 0.01,
rightPadding = canvas.width * 0.01, rightPadding = canvas.width * 0.01,
topPadding = canvas.height * 0.1, topPadding = canvas.height * 0.1,
bottomPadding = canvas.height * 0.3, bottomPadding = canvas.height * 0.35,
barHeight = canvas.height - topPadding - bottomPadding, barHeight = canvas.height - topPadding - bottomPadding,
barWidth = canvas.width - leftPadding - rightPadding; barWidth = canvas.width - leftPadding - rightPadding;

2
src/core/lib/DateTime.mjs
View File

@ -50,7 +50,7 @@ export const DATETIME_FORMATS = [
*/ */
export const FORMAT_EXAMPLES = `Format string tokens: export const FORMAT_EXAMPLES = `Format string tokens:
<table class="table table-striped table-hover table-sm table-bordered" style="font-family: sans-serif"> <table class="table table-striped table-hover table-sm table-bordered" style="font-family: sans-serif">
<thead> <thead class="thead-dark">
<tr> <tr>
<th>Category</th> <th>Category</th>
<th>Token</th> <th>Token</th>

5
src/core/operations/Diff.mjs
View File

@ -47,9 +47,10 @@ class Diff extends Operation {
"value": true "value": true
}, },
{ {
"name": "Ignore whitespace (relevant for word and line)", "name": "Ignore whitespace",
"type": "boolean", "type": "boolean",
"value": false "value": false,
"hint": "Relevant for word and line"
} }
]; ];
} }

2
src/core/operations/ParseColourCode.mjs
View File

@ -113,7 +113,7 @@ CMYK: ${cmyk}
document.getElementById('input-text').value = 'rgba(' + document.getElementById('input-text').value = 'rgba(' +
color.r + ', ' + color.g + ', ' + color.b + ', ' + color.a + ')'; color.r + ', ' + color.g + ', ' + color.b + ', ' + color.a + ')';
window.app.autoBake(); window.app.autoBake();
}); }).children(".colorpicker").removeClass('dropdown-menu');
</script>`; </script>`;
} }

3
src/core/operations/ParseDateTime.mjs
View File

@ -7,7 +7,6 @@
import Operation from "../Operation"; import Operation from "../Operation";
import moment from "moment-timezone"; import moment from "moment-timezone";
import {DATETIME_FORMATS, FORMAT_EXAMPLES} from "../lib/DateTime"; import {DATETIME_FORMATS, FORMAT_EXAMPLES} from "../lib/DateTime";
import OperationError from "../errors/OperationError";
/** /**
* Parse DateTime operation * Parse DateTime operation
@ -60,7 +59,7 @@ class ParseDateTime extends Operation {
date = moment.tz(input, inputFormat, inputTimezone); date = moment.tz(input, inputFormat, inputTimezone);
if (!date || date.format() === "Invalid date") throw Error; if (!date || date.format() === "Invalid date") throw Error;
} catch (err) { } catch (err) {
throw new OperationError(`Invalid format.\n\n${FORMAT_EXAMPLES}`); return `Invalid format.\n\n${FORMAT_EXAMPLES}`;
} }
output += "Date: " + date.format("dddd Do MMMM YYYY") + output += "Date: " + date.format("dddd Do MMMM YYYY") +

2
src/core/operations/ToTable.mjs
View File

@ -152,7 +152,7 @@ class ToTable extends Operation {
// If the first row is a header then put it in <thead> with <th> cells. // If the first row is a header then put it in <thead> with <th> cells.
if (firstRowHeader) { if (firstRowHeader) {
const row = tableData.shift(); const row = tableData.shift();
output += "<thead>"; output += "<thead class='thead-light'>";
output += outputRow(row, "th"); output += outputRow(row, "th");
output += "</thead>"; output += "</thead>";
} }

2
src/core/operations/TranslateDateTimeFormat.mjs
View File

@ -68,7 +68,7 @@ class TranslateDateTimeFormat extends Operation {
date = moment.tz(input, inputFormat, inputTimezone); date = moment.tz(input, inputFormat, inputTimezone);
if (!date || date.format() === "Invalid date") throw Error; if (!date || date.format() === "Invalid date") throw Error;
} catch (err) { } catch (err) {
throw new OperationError(`Invalid format.\n\n${FORMAT_EXAMPLES}`); return `Invalid format.\n\n${FORMAT_EXAMPLES}`;
} }
return date.tz(outputTimezone).format(outputFormat); return date.tz(outputTimezone).format(outputFormat);

1
src/web/HTMLIngredient.mjs
View File

@ -115,6 +115,7 @@ class HTMLIngredient {
${this.disabled ? " disabled" : ""} ${this.disabled ? " disabled" : ""}
value="${this.name}"> ${this.name} value="${this.name}"> ${this.name}
</label> </label>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
</div> </div>
</div>`; </div>`;
break; break;

4
src/web/html/index.html
View File

@ -241,7 +241,7 @@
<div id="input-file"> <div id="input-file">
<div class="file-overlay"></div> <div class="file-overlay"></div>
<div style="position: relative; height: 100%;"> <div style="position: relative; height: 100%;">
<div class="card"> <div class="io-card card">
<img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon"/> <img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon"/>
<div class="card-body"> <div class="card-body">
<button type="button" class="close" id="input-file-close">&times;</button> <button type="button" class="close" id="input-file-close">&times;</button>
@ -290,7 +290,7 @@
<div id="output-file"> <div id="output-file">
<div class="file-overlay"></div> <div class="file-overlay"></div>
<div style="position: relative; height: 100%;"> <div style="position: relative; height: 100%;">
<div class="card"> <div class="io-card card">
<img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon"/> <img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon"/>
<div class="card-body"> <div class="card-body">
Size: <span id="output-file-size"></span><br> Size: <span id="output-file-size"></span><br>

12
src/web/stylesheets/components/_operation.css
View File

@ -66,7 +66,7 @@ div.toggle-string {
.operation [class^='bmd-label'], .operation [class^='bmd-label'],
.operation [class*=' bmd-label'] { .operation [class*=' bmd-label'] {
top: 13px; top: 13px !important;
left: 12px; left: 12px;
z-index: 10; z-index: 10;
} }
@ -109,12 +109,16 @@ div.toggle-string {
filter: brightness(100%); filter: brightness(100%);
} }
.bmd-form-group.is-filled label.bmd-label-floating, .operation .bmd-form-group.is-filled label.bmd-label-floating,
.bmd-form-group.is-focused label.bmd-label-floating { .operation .bmd-form-group.is-focused label.bmd-label-floating {
top: 4px; top: 4px !important;
left: 12px; left: 12px;
} }
.operation .bmd-form-group .bmd-help {
margin-top: -17px;
}
.input-group .form-control { .input-group .form-control {
border-top-left-radius: 4px !important; border-top-left-radius: 4px !important;
} }

14
src/web/stylesheets/components/_pane.css
View File

@ -33,7 +33,7 @@
padding: 0; padding: 0;
} }
.card { .io-card.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s; transition: 0.3s;
width: 400px; width: 400px;
@ -49,11 +49,11 @@
flex-direction: row; flex-direction: row;
} }
.card:hover { .io-card.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
} }
.card>img { .io-card.card>img {
float: left; float: left;
width: 128px; width: 128px;
height: 128px; height: 128px;
@ -61,13 +61,13 @@
margin-top: 11px; margin-top: 11px;
} }
.card-body .close { .io-card.card .card-body .close {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 4px; top: 4px;
} }
.card-body { .io-card.card .card-body {
float: left; float: left;
padding: 16px; padding: 16px;
width: 250px; width: 250px;
@ -77,12 +77,12 @@
user-select: text; user-select: text;
} }
.card-body>.btn { .io-card.card .card-body>.btn {
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 5px; margin-top: 5px;
} }
.card input[type=number] { .io-card.card input[type=number] {
padding-right: 6px; padding-right: 6px;
padding-left: 6px; padding-left: 6px;
} }

5
src/web/stylesheets/layout/_modals.css
View File

@ -72,3 +72,8 @@
#faqs a.btn { #faqs a.btn {
text-transform: unset; text-transform: unset;
} }
#faqs > div {
padding: 20px;
border-left: 2px solid var(--primary-border-colour);
}