made header a template

encryptme title is now a link to home too
aes.js: added CBC mode
2023-01-28 16:08:13 -05:00 · 2023-01-26 22:02:18 -05:00 · 2023-01-26 19:29:41 -05:00 · 2023-01-26 19:11:31 -05:00 · 2023-01-25 21:34:13 -05:00
6 changed files with 172 additions and 40 deletions
--- a/aes.html
+++ b/aes.html
@ -3,14 +3,14 @@
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="style.css">
+    <title>encryptme: Simple AES encryption/decryption</title>
 	<meta name="description" content="Easy to use and simple online tool for AES encryption and decryption.
 	Advanced settings allow control over the IV, AES mode, and PBKDF2 parameters.">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>encryptme: Simple AES encryption/decryption</title>
-    <link rel="stylesheet" href="style.css">
  </head>
  <body>
-	<h1>encryptme</h1>
+	<script src="scripts/header-template.js"></script>
 	<h1>AES</h1>
 	<script src="scripts/interface.js"></script>
 	<script src="scripts/aes.js"></script>
--- a/index.html
+++ b/index.html
@ -3,13 +3,13 @@
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<meta name="description" content="Easy to use and simple online tools for encryption and decryption.">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>encryptme</title>
    <link rel="stylesheet" href="style.css">
+    <title>encryptme</title>
+	<meta name="description" content="Easy to use and simple online tools for encryption and decryption.">
  </head>
  <body>
-	<h1>encryptme</h1>
+	<script src="scripts/header-template.js"></script>
 	<h2>Tools</h2>
 	<h3>Encryption/decryption</h3>
 	<a href="aes.html">AES</a>
--- a/scripts/aes.js
+++ b/scripts/aes.js
@ -61,6 +61,20 @@ let encManualIV = encForm.createCheckBox({
 	label: "Use fixed IV instead of random",
 	advanced: true
 });
+let encMode = encForm.createDropDown({
+	label: "AES mode",
+	advanced: true,
+	options: [
+		{
+			name: "AES-GCM (Galois/Counter Mode)",
+			value: "AES-GCM"
+		},
+		{
+			name: "AES-CBC (Cipher Block Chaining)",
+			value: "AES-CBC"
+		},
+	]
+});
 let encButton = encForm.createButton({label: "Encrypt"});
 let encOut = encForm.createOutput({
 	label: "Output",
@ -107,7 +121,7 @@ function getKeyMaterial(password) {
 	);
 }

-function getKey(keyMaterial, salt, pbkdf2Iters) {
+function getKey(keyMaterial, salt, pbkdf2Iters, encMode) {
 	return window.crypto.subtle.deriveKey(
 		{
 			"name": "PBKDF2",
@ -117,7 +131,7 @@ function getKey(keyMaterial, salt, pbkdf2Iters) {
 		},
 		keyMaterial,
 		{
-			"name": "AES-GCM",
+			"name": encMode,
 			"length": 256
 		},
 		true,
@ -125,6 +139,27 @@ function getKey(keyMaterial, salt, pbkdf2Iters) {
 	);
 }

+async function aesGcmEnc(key, iv, msgEncoded) {
+	return window.crypto.subtle.encrypt(
+		{
+			"name": "AES-GCM",
+			"iv": iv
+		},
+		key,
+		msgEncoded
+	);
+}
+async function aesCbcEnc(key, iv, msgEncoded) {
+	return window.crypto.subtle.encrypt(
+		{
+			"name": "AES-CBC",
+			"iv": iv
+		},
+		key,
+		msgEncoded
+	);
+}
+
 encButton.handle.addEventListener("click", async function() {
 	let keyMaterial = await getKeyMaterial(encPass.value);
 	let key;
@ -140,7 +175,7 @@ encButton.handle.addEventListener("click", async function() {
 		key = await window.crypto.subtle.importKey(
 			"raw",
 			encKey.value,
-			{"name": "AES-GCM"},
+			{"name": encMode.value},
 			true,
 			["encrypt", "decrypt"]
 		);
@ -152,7 +187,7 @@ encButton.handle.addEventListener("click", async function() {
 			encSalt.value = salt;
 		}

-		key = await getKey(keyMaterial, salt, pbkdf2Iters);
+		key = await getKey(keyMaterial, salt, pbkdf2Iters, encMode.value);
 		encKey.value = await window.crypto.subtle.exportKey("raw", key);
 	}

@ -167,14 +202,19 @@ encButton.handle.addEventListener("click", async function() {
 	let enc = new TextEncoder();
 	let msgEncoded = enc.encode(encMsg.value);

-	let ciphertext = await window.crypto.subtle.encrypt(
-		{
-			"name": "AES-GCM",
-			"iv": iv
-		},
-		key,
-		msgEncoded
-	);
+	let ciphertext; 
+	switch (encMode.value) {
+		case "AES-GCM":
+			ciphertext = await aesGcmEnc(key, iv, msgEncoded);
+			break;
+		case "AES-CBC":
+			ciphertext = await aesCbcEnc(key, iv, msgEncoded);
+			break;
+		default:
+			let e = Error(`Mode '${encMode.value}' is not implemented.`);
+			encMode.handleError(e);
+			return;
+	}

 	encOutRaw.value = ciphertext;

@ -182,26 +222,49 @@ encButton.handle.addEventListener("click", async function() {
 		"ciphertext": bufToB64(ciphertext),
 		"salt": bufToB64(salt),
 		"iv": bufToB64(iv),
-		"pbkdf2Iters": pbkdf2Iters
+		"encMode": encMode.value,
+		"pbkdf2Iters": pbkdf2Iters,
 	}
 });

+async function aesGcmDec(key, iv, ciphertext) {
+	return window.crypto.subtle.decrypt(
+		{
+			"name": "AES-GCM",
+			"iv": iv
+		},
+		key,
+		ciphertext
+	);
+}
+async function aesCbcDec(key, iv, ciphertext) {
+	return window.crypto.subtle.decrypt(
+		{
+			"name": "AES-CBC",
+			"iv": iv
+		},
+		key,
+		ciphertext
+	);
+}
+
 decButton.handle.addEventListener("click", async function() {
 	let msgEncoded = decMsg.value;

-	let ciphertext, iv, salt, pbkdf2Iters;
+	let ciphertext, iv, salt, encMode, pbkdf2Iters;
 	try {
 		ciphertext = new b64ToBuf(msgEncoded.ciphertext);
 		iv = new Uint8Array(b64ToBuf(msgEncoded.iv));
 		salt = new Uint8Array(b64ToBuf(msgEncoded.salt));
+		encMode = msgEncoded.encMode;
 		pbkdf2Iters = msgEncoded.pbkdf2Iters;
 		if (pbkdf2Iters < 1 || pbkdf2Iters%1 !== 0) {
-			decMsg.alertBox("alert-error", "Invalid PBKDF2 iters setting.");
+			throw Error(`Invalid PBKDF2 iterations setting: ${pbkdf2Iters}`);
 		} else if (pbkdf2Iters > 1000000) {
 			decMsg.alertBox("alert-info", `PBKDF2 is using ${pbkdf2Iters} iterations: this might take a long time...`);
 		}
 	} catch (e) {
-		decMsg.alertBox("alert-error", "Invalid encrypted payload.");
+		decMsg.handleError(e, "Invalid encrypted payload.");
 	}

 	if (ciphertext === undefined
@ -215,30 +278,40 @@ decButton.handle.addEventListener("click", async function() {
 	let keyMaterial = await getKeyMaterial(decPass.value);
 	let key;
 	if (decManualKey.value) {
+		try {
 			key = await window.crypto.subtle.importKey(
 				"raw",
 				decKey.value,
-			{"name": "AES-GCM"},
+				{"name": encMode},
 				true,
 				["encrypt", "decrypt"]
 			);
+		} catch (e) {
+			decMsg.handleError(e);
+		}
 	} else {
-		key = await getKey(keyMaterial, salt, pbkdf2Iters);
+		key = await getKey(keyMaterial, salt, pbkdf2Iters, encMode);
 	}

 	let plaintext;

 	try {
-		plaintext = await window.crypto.subtle.decrypt(
-			{
-				"name": "AES-GCM",
-				"iv": iv
-			},
-			key,
-			ciphertext
-		);
+		switch (encMode) {
+			case "AES-GCM":
+				plaintext = await aesGcmDec(key, iv, ciphertext);
+				break;
+			case "AES-CBC":
+				plaintext = await aesCbcDec(key, iv, ciphertext);
+				break;
+			default:
+				throw Error(`Mode '${encMode.value}' is not implemented.`);
+	}
 	} catch (e) {
-		decPass.alertBox("alert-error", "Decryption error: incorrect password?");
+		if (e.message !== ""  && e.message !== undefined) {
+			decMsg.handleError(e, "Error during decryption.");
+		} else {
+			decMsg.handleError(Error("Could not decrypt; is your password/key correct?"));
+		}
 	}

 	let dec = new TextDecoder();
--- a/scripts/header-template.js
+++ b/scripts/header-template.js
@ -0,0 +1,8 @@
+header = document.createElement("div");
+header.classList.add("page-header");
+
+header.innerHTML = `
+<a href="index.html"><h1>encryptme</h1></a>
+`
+
+document.body.appendChild(header);
--- a/scripts/interface.js
+++ b/scripts/interface.js
@ -194,6 +194,36 @@ class Form extends InterfaceElement {
 		return this.appendElement(new FormElement(params));
 	}

+	createDropDown(params) {
+		// example for params.options:
+		/*
+		[
+			{
+				value: "volvo"
+				name: "Volvo"
+			},
+			{
+				value: "benz"
+				name: "Mercedes Benz"
+			}
+		]
+		*/
+		params.fragment = new DocumentFragment();
+		params.tag = document.createElement("select");
+		params.labelTag = document.createElement("label");
+		params.labelTag.appendChild(document.createTextNode(params.label));
+		params.fragment.appendChild(params.labelTag);
+		params.fragment.appendChild(params.tag);
+		dataTypeSupports(params, ["category"]);
+		for (const option of params.options) {
+			let optTag = document.createElement("option");
+			optTag.value = option.value;
+			optTag.appendChild(document.createTextNode(option.name));
+			params.tag.appendChild(optTag);
+		}
+		return this.appendElement(new FormElement(params));
+	}
+
 	createTextArea(params) {
 		params.tag = document.createElement("textarea");
 		dataTypeSupports(params, ["plaintext", "b64", "json-b64"]);
@ -316,6 +346,8 @@ class FormElement extends InterfaceElement {
 				}
 			case "bool":
 				return this.handle.checked;
+			case "category":
+				return this.handle.value;
 			case "none":
 				return undefined;
 		}
@ -335,6 +367,9 @@ class FormElement extends InterfaceElement {
 			case "bool":
 				this.handle.checked = x;
 				break;
+			case "category":
+				this.handle.value = x;
+				break;
 		}
 	}

@ -378,6 +413,13 @@ class FormElement extends InterfaceElement {
 		this.handle.after(box);
 		this.alerts.push(box);
 	}
+	handleError(e, extraInfo="") {
+		if (extraInfo !== "") {
+			extraInfo = ` (${extraInfo})`;
+		}
+		this.alertBox("alert-error", e.message + extraInfo);
+		console.error(e);
+	}
 	clearAlerts() {
 		for (const box of this.alerts) {
 			box.remove();
--- a/style.css
+++ b/style.css
@ -127,6 +127,11 @@ button:active {
 	background: #0077ff44;
 }

+.page-header a {
+	color: #000000;
+	text-decoration: none;
+}
+
@media (prefers-color-scheme: dark) {
 	body {
 		color: #c9d1d9;
@ -149,6 +154,10 @@ button:active {
 		background: #1d2127;
 		color: #c9d1d9;
 	}
+
+	.page-header a {
+		color: #c9d1d9;
+	}
 }

 [hidden] {
Author	SHA1	Message	Date
dogeystamp	5dba3f8675	made header a template encryptme title is now a link to home too	2023-01-28 16:08:13 -05:00
dogeystamp	0e0ac98c84	aes.js: added CBC mode	2023-01-26 22:02:18 -05:00
dogeystamp	7ed8cc7e3a	aes.js: slight refactoring preparing to implement other AES modes	2023-01-26 19:29:41 -05:00
dogeystamp	6972790053	interface.js: add InterfaceElement.handleError() this allows elements to handle errors directly after catching them rather than having a generic error	2023-01-26 19:11:31 -05:00
dogeystamp	3caf1b72ba	interface.js: implement drop-down input	2023-01-25 21:34:13 -05:00