From 4bb13ff982c0357b72fcb5191d27bd874d9229ec Mon Sep 17 00:00:00 2001 From: Jan Dittberner Date: Sat, 20 May 2023 11:15:33 +0200 Subject: [PATCH] Move application code to external file This commit moves the application code to a separate JavaScript file. Error handling for missing CA certificates has been added to avoid endless loops. --- src/index.html | 310 +++---------------------------------------------- src/js/app.js | 285 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 300 insertions(+), 295 deletions(-) create mode 100644 src/js/app.js diff --git a/src/index.html b/src/index.html index f847e40..e6a9b9d 100644 --- a/src/index.html +++ b/src/index.html @@ -13,23 +13,20 @@
- +

Client certificate generation in your browser

@@ -167,283 +164,6 @@ - + \ No newline at end of file diff --git a/src/js/app.js b/src/js/app.js new file mode 100644 index 0000000..2dc6eca --- /dev/null +++ b/src/js/app.js @@ -0,0 +1,285 @@ +document.addEventListener("DOMContentLoaded", function () { + const csrForm = document.getElementById("csr-form"); + const crtInput = document.getElementById("crt-input"); + + const app = { + keyPair: undefined, + certificate: undefined, + + progressBar: document.getElementById("progress-bar"), + keyOutput: document.getElementById("key-output"), + csrOutput: document.getElementById("csr-output"), + prepareButton: document.getElementById("generate-p12"), + downloadButton: document.getElementById("download-link"), + + updateProgress(percent, valuenow, title, ...tokens) { + this.progressBar.classList.add(...tokens) + this.progressBar.style.width = `${percent}%`; + this.progressBar.setAttribute("aria-valuenow", `${valuenow}`) + this.progressBar.innerHTML = title; + }, + generateKeyPair(keySize) { + this.updateProgress(40, 2, "Started key generation", 'progress-bar-striped', 'progress-bar-animated'); + + const state = forge.pki.rsa.createKeyPairGenerationState(keySize, 0x10001); + const startDate = new Date(); + + return new Promise(done => { + const step = () => { + let duration = (new Date()).getTime() - startDate.getTime(); + let seconds = Math.floor(duration / 100) / 10; + + if (!forge.pki.rsa.stepKeyPairGenerationState(state, 100)) { + setTimeout(step, 1); + this.progressBar.innerHTML = `Key pair generation running for ${seconds} seconds`; + } else { + this.progressBar.classList.remove("progress-bar-animated", 'progress-bar-striped'); + this.progressBar.innerHTML = "Key pair generated"; + + const keys = state.keys; + + document.getElementById("key-wrapper").classList.remove("d-none"); + + this.keyOutput.innerHTML = forge.pki.privateKeyToPem(keys.privateKey); + + this.keyPair = state.keys; + + done(); + } + } + + step(); + }); + }, + generateCSR(subjectName) { + const csr = forge.pki.createCertificationRequest(); + + csr.publicKey = this.keyPair.publicKey; + csr.setSubject([{ + name: 'commonName', + value: subjectName, + valueTagClass: forge.asn1.Type.UTF8, + }]); + csr.sign(this.keyPair.privateKey, forge.md.sha256.create()); + + const verified = csr.verify(); + if (verified) { + let csrPem = forge.pki.certificationRequestToPem(csr); + + this.updateProgress(60, 3, "CSR generated"); + + document.getElementById("csr-output").innerHTML = csrPem; + + const csrWrapper = document.getElementById("csr-wrapper"); + csrWrapper.classList.remove("d-none"); + csrWrapper.scrollIntoView(); + + document.getElementById("copy-csr-to-clipboard").addEventListener("click", (event) => { + event.preventDefault(); + + navigator.clipboard.writeText(csrPem) + + const crtInputWrapper = document.getElementById("crt-input-wrapper"); + crtInputWrapper.classList.remove("d-none"); + crtInputWrapper.scrollIntoView(); + + this.updateProgress(80, 4, "CSR copied to clipboard, waiting for certificate"); + }); + } + }, + handleCertificate(certificate) { + this.certificate = certificate; + + const prepareDownloadWrapper = document.getElementById("prepare-download-wrapper"); + prepareDownloadWrapper.classList.remove("d-none"); + prepareDownloadWrapper.scrollIntoView(); + + this.progressBar.innerHTML = "Certificate pasted"; + + this.prepareButton.addEventListener("click", (event) => { + event.preventDefault(); + event.stopPropagation(); + + const passwordInput = document.getElementById("passwordInput"); + let password = passwordInput.value; + + if (password === "" || password.length < 8) { + return false; + } + + this.buildKeyStore(password); + }); + }, + buildKeyStore(password) { + this.updateProgress(100, 5, "Building keystore"); + + let certificates = []; + + certificates.push(this.certificate); + + let rootCerts = []; + // add CAcert class 3 certificate from http://www.cacert.org/certs/CAcert_Class3Root_x14E228.crt + rootCerts.push(forge.pki.certificateFromPem("-----BEGIN CERTIFICATE-----\n" + + "MIIGPTCCBCWgAwIBAgIDFOIoMA0GCSqGSIb3DQEBDQUAMHkxEDAOBgNVBAoTB1Jv\n" + + "b3QgQ0ExHjAcBgNVBAsTFWh0dHA6Ly93d3cuY2FjZXJ0Lm9yZzEiMCAGA1UEAxMZ\n" + + "Q0EgQ2VydCBTaWduaW5nIEF1dGhvcml0eTEhMB8GCSqGSIb3DQEJARYSc3VwcG9y\n" + + "dEBjYWNlcnQub3JnMB4XDTIxMDQxOTEyMTgzMFoXDTMxMDQxNzEyMTgzMFowVDEU\n" + + "MBIGA1UEChMLQ0FjZXJ0IEluYy4xHjAcBgNVBAsTFWh0dHA6Ly93d3cuQ0FjZXJ0\n" + + "Lm9yZzEcMBoGA1UEAxMTQ0FjZXJ0IENsYXNzIDMgUm9vdDCCAiIwDQYJKoZIhvcN\n" + + "AQEBBQADggIPADCCAgoCggIBAKtJNRFIfNImflOUz0Op3SjXQiqL84d4GVh8D57a\n" + + "iX3h++tykA10oZZkq5+gJJlz2uJVdscXe/UErEa4w75/ZI0QbCTzYZzA8pD6Ueb1\n" + + "aQFjww9W4kpCz+JEjCUoqMV5CX1GuYrz6fM0KQhF5Byfy5QEHIGoFLOYZcRD7E6C\n" + + "jQnRvapbjZLQ7N6QxX8KwuPr5jFaXnQ+lzNZ6MMDPWAzv/fRb0fEze5ig1JuLgia\n" + + "pNkVGJGmhZJHsK5I6223IeyFGmhyNav/8BBdwPSUp2rVO5J+TJAFfpPBLIukjmJ0\n" + + "FXFuC3ED6q8VOJrU0gVyb4z5K+taciX5OUbjchs+BMNkJyIQKopPWKcDrb60LhPt\n" + + "XapI19V91Cp7XPpGBFDkzA5CW4zt2/LP/JaT4NsRNlRiNDiPDGCbO5dWOK3z0luL\n" + + "oFvqTpa4fNfVoIZwQNORKbeiPK31jLvPGpKK5DR7wNhsX+kKwsOnIJpa3yxdUly6\n" + + "R9Wb7yQocDggL9V/KcCyQQNokszgnMyXS0XvOhAKq3A6mJVwrTWx6oUrpByAITGp\n" + + "rmB6gCZIALgBwJNjVSKRPFbnr9s6JfOPMVTqJouBWfmh0VMRxXudA/Z0EeBtsSw/\n" + + "LIaRmXGapneLNGDRFLQsrJ2vjBDTn8Rq+G8T/HNZ92ZCdB6K4/jc0m+YnMtHmJVA\n" + + "BfvpAgMBAAGjgfIwge8wDwYDVR0TAQH/BAUwAwEB/zBhBggrBgEFBQcBAQRVMFMw\n" + + "IwYIKwYBBQUHMAGGF2h0dHA6Ly9vY3NwLkNBY2VydC5vcmcvMCwGCCsGAQUFBzAC\n" + + "hiBodHRwOi8vd3d3LkNBY2VydC5vcmcvY2xhc3MzLmNydDBFBgNVHSAEPjA8MDoG\n" + + "CysGAQQBgZBKAgMBMCswKQYIKwYBBQUHAgEWHWh0dHA6Ly93d3cuQ0FjZXJ0Lm9y\n" + + "Zy9jcHMucGhwMDIGA1UdHwQrMCkwJ6AloCOGIWh0dHBzOi8vd3d3LmNhY2VydC5v\n" + + "cmcvY2xhc3MzLmNybDANBgkqhkiG9w0BAQ0FAAOCAgEAxh6td1y0KJvRyI1EEsC9\n" + + "dnYEgyEH+BGCf2vBlULAOBG1JXCNiwzB1Wz9HBoDfIv4BjGlnd5BKdSLm4TXPcE3\n" + + "hnGjH1thKR5dd3278K25FRkTFOY1gP+mGbQ3hZRB6IjDX+CyBqS7+ECpHTms7eo/\n" + + "mARN+Yz5R3lzUvXs3zSX+z534NzRg4i6iHNHWqakFcQNcA0PnksTB37vGD75pQGq\n" + + "eSmx51L6UzrIpn+274mhsaFNL85jhX+lKuk71MGjzwoThbuZ15xmkITnZtRQs6Hh\n" + + "LSIqJWjDILIrxLqYHehK71xYwrRNhFb3TrsWaEJskrhveM0Os/vvoLNkh/L3iEQ5\n" + + "/LnmLMCYJNRALF7I7gsduAJNJrgKGMYvHkt1bo8uIXO8wgNV7qoU4JoaB1ML30QU\n" + + "qGcFr0TI06FFdgK2fwy5hulPxm6wuxW0v+iAtXYx/mRkwQpYbcVQtrIDvx1CT1k5\n" + + "0cQxi+jIKjkcFWHw3kBoDnCos0/ukegPT7aQnk2AbL4c7nCkuAcEKw1BAlSETkfq\n" + + "i5btdlhh58MhewZv1LcL5zQyg8w1puclT3wXQvy8VwPGn0J/mGD4gLLZ9rGcHDUE\n" + + "CokxFoWk+u5MCcVqmGbsyG4q5suS3CNslsHURfM8bQK4oLvHR8LCHEBMRcdFBn87\n" + + "cSvOK6eB1kdGKLA8ymXxZp8=\n" + + "-----END CERTIFICATE-----")); + + // add CAcert root certificate from http://www.cacert.org/certs/root_X0F.crt + rootCerts.push(forge.pki.certificateFromPem("-----BEGIN CERTIFICATE-----\n" + + "MIIG7jCCBNagAwIBAgIBDzANBgkqhkiG9w0BAQsFADB5MRAwDgYDVQQKEwdSb290\n" + + "IENBMR4wHAYDVQQLExVodHRwOi8vd3d3LmNhY2VydC5vcmcxIjAgBgNVBAMTGUNB\n" + + "IENlcnQgU2lnbmluZyBBdXRob3JpdHkxITAfBgkqhkiG9w0BCQEWEnN1cHBvcnRA\n" + + "Y2FjZXJ0Lm9yZzAeFw0wMzAzMzAxMjI5NDlaFw0zMzAzMjkxMjI5NDlaMHkxEDAO\n" + + "BgNVBAoTB1Jvb3QgQ0ExHjAcBgNVBAsTFWh0dHA6Ly93d3cuY2FjZXJ0Lm9yZzEi\n" + + "MCAGA1UEAxMZQ0EgQ2VydCBTaWduaW5nIEF1dGhvcml0eTEhMB8GCSqGSIb3DQEJ\n" + + "ARYSc3VwcG9ydEBjYWNlcnQub3JnMIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIIC\n" + + "CgKCAgEAziLA4kZ97DYoB1CW8qAzQIxL8TtmPzHlawI229Z89vGIj053NgVBlfkJ\n" + + "8BLPRoZzYLdufujAWGSuzbCtRRcMY/pnCujW0r8+55jE8Ez64AO7NV1sId6eINm6\n" + + "zWYyN3L69wj1x81YyY7nDl7qPv4coRQKFWyGhFtkZip6qUtTefWIonvuLwphK42y\n" + + "fk1WpRPs6tqSnqxEQR5YYGUFZvjARL3LlPdCfgv3ZWiYUQXw8wWRBB0bF4LsyFe7\n" + + "w2t6iPGwcswlWyCR7BYCEo8y6RcYSNDHBS4CMEK4JZwFaz+qOqfrU0j36NK2B5jc\n" + + "G8Y0f3/JHIJ6BVgrCFvzOKKrF11myZjXnhCLotLddJr3cQxyYN/Nb5gznZY0dj4k\n" + + "epKwDpUeb+agRThHqtdB7Uq3EvbXG4OKDy7YCbZZ16oE/9KTfWgu3YtLq1i6L43q\n" + + "laegw1SJpfvbi1EinbLDvhG+LJGGi5Z4rSDTii8aP8bQUWWHIbEZAWV/RRyH9XzQ\n" + + "QUxPKZgh/TMfdQwEUfoZd9vUFBzugcMd9Zi3aQaRIt0AUMyBMawSB3s42mhb5ivU\n" + + "fslfrejrckzzAeVLIL+aplfKkQABi6F1ITe1Yw1nPkZPcCBnzsXWWdsC4PDSy826\n" + + "YreQQejdIOQpvGQpQsgi3Hia/0PsmBsJUUtaWsJx8cTLc6nloQsCAwEAAaOCAX8w\n" + + "ggF7MB0GA1UdDgQWBBQWtTIb1Mfz4OaO873SsDrusjkY0TAPBgNVHRMBAf8EBTAD\n" + + "AQH/MDQGCWCGSAGG+EIBCAQnFiVodHRwOi8vd3d3LmNhY2VydC5vcmcvaW5kZXgu\n" + + "cGhwP2lkPTEwMFYGCWCGSAGG+EIBDQRJFkdUbyBnZXQgeW91ciBvd24gY2VydGlm\n" + + "aWNhdGUgZm9yIEZSRUUgaGVhZCBvdmVyIHRvIGh0dHA6Ly93d3cuY2FjZXJ0Lm9y\n" + + "ZzAxBgNVHR8EKjAoMCagJKAihiBodHRwOi8vY3JsLmNhY2VydC5vcmcvcmV2b2tl\n" + + "LmNybDAzBglghkgBhvhCAQQEJhYkVVJJOmh0dHA6Ly9jcmwuY2FjZXJ0Lm9yZy9y\n" + + "ZXZva2UuY3JsMDIGCCsGAQUFBwEBBCYwJDAiBggrBgEFBQcwAYYWaHR0cDovL29j\n" + + "c3AuY2FjZXJ0Lm9yZzAfBgNVHSMEGDAWgBQWtTIb1Mfz4OaO873SsDrusjkY0TAN\n" + + "BgkqhkiG9w0BAQsFAAOCAgEAR5zXs6IX01JTt7Rq3b+bNRUhbO9vGBMggczo7R0q\n" + + "Ih1kdhS6WzcrDoO6PkpuRg0L3qM7YQB6pw2V+ubzF7xl4C0HWltfzPTbzAHdJtja\n" + + "JQw7QaBlmAYpN2CLB6Jeg8q/1Xpgdw/+IP1GRwdg7xUpReUA482l4MH1kf0W0ad9\n" + + "4SuIfNWQHcdLApmno/SUh1bpZyeWrMnlhkGNDKMxCCQXQ360TwFHc8dfEAaq5ry6\n" + + "cZzm1oetrkSviE2qofxvv1VFiQ+9TX3/zkECCsUB/EjPM0lxFBmu9T5Ih+Eqns9i\n" + + "vmrEIQDv9tNyJHuLsDNqbUBal7OoiPZnXk9LH+qb+pLf1ofv5noy5vX2a5OKebHe\n" + + "+0Ex/A7e+G/HuOjVNqhZ9j5Nispfq9zNyOHGWD8ofj8DHwB50L1Xh5H+EbIoga/h\n" + + "JCQnRtxWkHP699T1JpLFYwapgplivF4TFv4fqp0nHTKC1x9gGrIgvuYJl1txIKmx\n" + + "XdfJzgscMzqpabhtHOMXOiwQBpWzyJkofF/w55e0LttZDBkEsilV/vW0CJsPs3eN\n" + + "aQF+iMWscGOkgLFlWsAS3HwyiYLNJo26aqyWPaIdc8E4ck7Sk08WrFrHIK3EHr4n\n" + + "1FZwmLpFAvucKqgl0hr+2jypyh5puA3KksHF3CsUzjMUvzxMhykh9zrMxQAHLBVr\n" + + "Gwc=\n" + + "-----END CERTIFICATE-----")); + + let lastCert = certificates[certificates.length - 1]; + let foundNext = true; + + while (foundNext && !lastCert.isIssuer(lastCert)) { + foundNext = false; + + for (let certIndex in rootCerts) { + let rootCert = rootCerts[certIndex]; + + if (lastCert.isIssuer(rootCert)) { + certificates.push(rootCert); + + foundNext = true; + + break; + } + } + + lastCert = certificates[certificates.length - 1]; + } + + if (!foundNext) { + console.warn(`chain construction may be incomplete, could not find certificate for issuer`) + } + + // browsers have trouble importing anything but 3des encrypted PKCS#12 + const p12asn1 = forge.pkcs12.toPkcs12Asn1( + this.keyPair.privateKey, certificates, password, + {algorithm: '3des'} + ); + const p12Der = forge.asn1.toDer(p12asn1).getBytes(); + const p12B64 = forge.util.encode64(p12Der); + + this.downloadButton.download = 'client_certificate.p12'; + this.downloadButton.setAttribute('href', 'data:application/x-pkcs12;base64,' + p12B64); + + const downloadWrapper = document.getElementById("download-wrapper"); + downloadWrapper.classList.remove("d-none"); + downloadWrapper.scrollIntoView(); + + this.progressBar.innerHTML = "Client certificate ready"; + this.progressBar.classList.add("bg-success") + } + }; + + csrForm.addEventListener("submit", (event) => { + event.preventDefault(); + + let valid = csrForm.checkValidity(); + + if (!valid) { + event.stopPropagation(); + } + + csrForm.classList.add("was-validated"); + if (!valid) { + return; + } + + let subjectName = event.target["nameInput"].value; + let keySize = parseInt(event.target["keySize"].value); + + if (isNaN(keySize)) { + return; + } + + app.generateKeyPair(keySize).then(function () { + app.generateCSR(subjectName); + }); + }, false); + + crtInput.addEventListener("paste", (event) => { + let crtData = (event.clipboardData || window.clipboardData).getData("text"); + + try { + const certificate = forge.pki.certificateFromPem(crtData); + + app.handleCertificate(certificate); + } catch (e) { + console.warn(e); + + return false; + } + }); +}); \ No newline at end of file