JSFiddle - React, Tailwind, and code Playground

by Joe Steinbring

HTML

<h1>Encryption Keys with the Web Crypto API</h1>
<fieldset>
	<legend>Generate Key Pair</legend>

	<div class="formBlock">
		<label for="CryptoAlgorithm">Algorithm</label>
		<select id="CryptoAlgorithm" onchange="setKeyNotes(this.value);">
			<option value="">--</option>
			<option value="AES-CBC">AES in Cipher Block Chaining mode</option>
			<option value="AES-CTR">AES in Counter Mode</option>
			<option value="AES-GCM">AES in Galois/Counter Mode</option>
			<option value="RSA-OAEP">RSAES - Optimal Asymmetric Encryption Padding</option>
			<option value="AES-KW">key wrapping in AES</option>
			<option value="HMAC">hash-based message authentication</option>
			<option value="RSASSA-PKCS1-v1_5">RSASSA-PKCS1-v1_5</option>
			<option value="ECDSA">Elliptic Curve Digital Signature Algorithm</option>
			<option value="ECDH">Elliptic curve Diffie-Hellman</option>
			<option value="DH">Diffie-Helman</option>
		</select>
		<br />
		<label for="AlgorithmNotes">Notes About Algorithm</label>
		<textarea id="AlgorithmNotes" readonly=""></textarea>
	</div>

	<div class="formBlock">
		<label for="ExtractableBoolean">Should the key be extractable from the CryptoKey object?</label>
		<select id="ExtractableBoolean">
			<option value="true">Yes</option>
			<option value="false">No</option>
		</select>
	</div>

	<div class="formBlock">
		<label for="KeyLength">Key Length</label>
		<input id="KeyLength" type="text" size="20" maxlength="20">
	</div>

	<div class="formBlock">
		<label for="KeyUses">What do you want to be able to do with the key?</label>
		<br />
		<input type="checkbox" value="encrypt" name="KeyUses" id="encrypt">
		<label for="encrypt">encrypt - allow the key to be used for encrypting messages</label>
		<br />
		<input type="checkbox" value="decrypt" name="KeyUses" id="decrypt">
		<label for="decrypt">decrypt - allow the key to be used for decrypting messages</label>
		<br />
		<input type="checkbox" value="sign" name="KeyUses" id="sign">
		<label for="sign">sign -...

CSS

#AlgorithmNotes{
	width: 100%;
}
.formBlock{
	margin-bottom: 25px;
}

JavaScript

var YourCryptoKey = '';
// Change the value for the algo notes
var setKeyNotes = function(algo){
 // Source: https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API/Supported_algorithms
 if(algo == 'AES-CBC')
 	document.getElementById("AlgorithmNotes").value = 'AES-CBC: Key usages for keys generated with this method are restricted to "encrypt", "decrypt", "wrapKey" or "unwrapKey". Key length must be 128, 192 or 256 bits.';
 else if(algo == 'AES-CTR')
 	document.getElementById("AlgorithmNotes").value = 'AES-CTR: Key usages for keys generated with this method are restricted to "encrypt", "decrypt", "wrapKey" or "unwrapKey". Key length must be 128, 192 or 256 bits.';
 else if(algo == 'AES-GCM')
 	document.getElementById("AlgorithmNotes").value = 'AES-GCM: Key usages for keys generated with this method are restricted to "encrypt", "decrypt", "wrapKey" or "unwrapKey". Key length must be 128, 192 or 256 bits.';
 else if(algo == 'RSA-OAEP')
 	document.getElementById("AlgorithmNotes").value = 'RSA-OAEP: Key usages for keys generated with this method are restricted to "encrypt", "decrypt", "wrapKey" or "unwrapKey". Requires a HashAlgorithmIdentifier with the hash algorithm to use, instead of a key length.';
 else if(algo == 'AES-KW')
 	document.getElementById("AlgorithmNotes").value = 'AES-KW: Key usages for keys generated with this method are restricted to "wrapKey" or "unwrapKey". Key length must be 128, 192 or 256 bits.';
 else if(algo == 'HMAC')
 	document.getElementById("AlgorithmNotes").value = 'HMAC: Key usages for keys generated with this method are restricted to "sign" or "verify". Also requires a HashAlgorithmIdentifier, the hash algorithm to use. Key length must be an optional positive integer indicating the size of the key to generate. If not provided, the size of the block of the hash function is used.';
 else if(algo == 'RSASSA-PKCS1-v1_5')
 	document.getElementById("AlgorithmNotes").value = 'RSASSA-PKCS1-v1_5: Key usages for keys generated with this...