[12e6ddf] | 1 | <!doctype html> |
---|
| 2 | <html> |
---|
| 3 | <head> |
---|
| 4 | <meta charset="utf-8"> |
---|
| 5 | <title>Javascript Signing Demo</title> |
---|
| 6 | |
---|
| 7 | <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> |
---|
| 8 | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> |
---|
| 9 | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> |
---|
| 10 | <style type="text/css"> |
---|
| 11 | body,td,th { |
---|
| 12 | font-family: Calibri; |
---|
| 13 | color: #000; |
---|
| 14 | } |
---|
| 15 | a:link { |
---|
| 16 | color: #0000FF; |
---|
| 17 | font-weight: bold; |
---|
| 18 | text-decoration: none; |
---|
| 19 | } |
---|
| 20 | a:visited { |
---|
| 21 | text-decoration: none; |
---|
| 22 | color: #00F; |
---|
| 23 | } |
---|
| 24 | a:hover { |
---|
| 25 | text-decoration: none; |
---|
| 26 | color: #0000FF; |
---|
| 27 | } |
---|
| 28 | a:active { |
---|
| 29 | text-decoration: none; |
---|
| 30 | color: #00F; |
---|
| 31 | } |
---|
| 32 | body { |
---|
| 33 | margin-left: 30px; |
---|
| 34 | margin-top: 30px; |
---|
| 35 | margin-right: 30px; |
---|
| 36 | margin-bottom: 30px; |
---|
| 37 | } |
---|
| 38 | </style> |
---|
| 39 | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> |
---|
| 40 | <script src="forge.min.js"></script> |
---|
| 41 | </head> |
---|
| 42 | <body> |
---|
| 43 | |
---|
| 44 | <script> |
---|
| 45 | |
---|
| 46 | |
---|
| 47 | // Conversion functions |
---|
| 48 | function stringToArrayBuffer(data) |
---|
| 49 | { |
---|
| 50 | var arrBuff = new ArrayBuffer(data.length); |
---|
| 51 | var writer = new Uint8Array(arrBuff); |
---|
| 52 | for (var i = 0, len = data.length; i < len; i++) |
---|
| 53 | { |
---|
| 54 | writer[i] = data.charCodeAt(i); |
---|
| 55 | } |
---|
| 56 | return arrBuff; |
---|
| 57 | } |
---|
| 58 | function arrayBufferToString( buffer ) |
---|
| 59 | { |
---|
| 60 | var binary = ''; |
---|
| 61 | var bytes = new Uint8Array( buffer ); |
---|
| 62 | var len = bytes.byteLength; |
---|
| 63 | for (var i = 0; i < len; i++) |
---|
| 64 | { |
---|
| 65 | binary += String.fromCharCode( bytes[ i ] ); |
---|
| 66 | } |
---|
| 67 | return binary; |
---|
| 68 | } |
---|
| 69 | |
---|
| 70 | // From Private Key to a PKCS#8 |
---|
| 71 | function privateKeyToPkcs8(privateKey) |
---|
| 72 | { |
---|
| 73 | var rsaPrivateKey = forge.pki.privateKeyToAsn1(privateKey); |
---|
| 74 | var privateKeyInfo = forge.pki.wrapRsaPrivateKey(rsaPrivateKey); |
---|
| 75 | var privateKeyInfoDer = forge.asn1.toDer(privateKeyInfo).getBytes(); |
---|
| 76 | var privateKeyInfoDerBuff = stringToArrayBuffer(privateKeyInfoDer); |
---|
| 77 | return privateKeyInfoDerBuff; |
---|
| 78 | } |
---|
| 79 | |
---|
| 80 | // From Public Key to a PKCS#8 |
---|
| 81 | function publicKeyToPkcs8(pk) |
---|
| 82 | { |
---|
| 83 | var subjectPublicKeyInfo = forge.pki.publicKeyToAsn1(pk); |
---|
| 84 | var der = forge.asn1.toDer(subjectPublicKeyInfo).getBytes(); |
---|
| 85 | return stringToArrayBuffer(der); |
---|
| 86 | } |
---|
| 87 | |
---|
| 88 | function CreateDownload(text) |
---|
| 89 | { |
---|
| 90 | var textFile = null; |
---|
| 91 | var data = new Blob([text], {type: 'application/x-x509-user-cert'}); |
---|
| 92 | textFile = window.URL.createObjectURL(data); |
---|
| 93 | return textFile; |
---|
| 94 | } |
---|
| 95 | |
---|
| 96 | function CertInfo(cert) |
---|
| 97 | { |
---|
| 98 | // Convert to ASN |
---|
| 99 | var asn1Cert = forge.pki.certificateToAsn1(cert); |
---|
| 100 | |
---|
| 101 | // Convert to DER format |
---|
| 102 | var p12Der = forge.asn1.toDer(asn1Cert).getBytes(); |
---|
| 103 | |
---|
| 104 | // Encode with Base64 |
---|
| 105 | var p12b64 = forge.util.encode64(p12Der); |
---|
| 106 | |
---|
| 107 | var j = '<a href="data:application/x-x509-ca-cert;base64,' + p12b64 + '" download="cert.der">Certificate Information</a><br>'; |
---|
| 108 | try { j += "NAME: " + cert.subject.getField('CN').value + "<br>" } catch (err) {}; |
---|
| 109 | try { j += "MAIL: " + cert.subject.getField('E').value + "<br>" } catch(err) {}; |
---|
| 110 | try { j += "ISSUER: " + cert.issuer.getField('CN').value + "<br>" } catch(err) {}; |
---|
| 111 | return j; |
---|
| 112 | } |
---|
| 113 | |
---|
| 114 | |
---|
| 115 | // Create a CryptoKey from from a PKCS#12 Private Key |
---|
| 116 | function importCryptoKeyPkcs8(privateKey,extractable) |
---|
| 117 | { |
---|
| 118 | var privateKeyInfoDerBuff = privateKeyToPkcs8(privateKey); |
---|
| 119 | |
---|
| 120 | //Importa la clave en la webcrypto |
---|
| 121 | return crypto.subtle.importKey( |
---|
| 122 | 'pkcs8', |
---|
| 123 | privateKeyInfoDerBuff, |
---|
| 124 | { name: "RSASSA-PKCS1-v1_5", hash:{name:"SHA-256"}}, |
---|
| 125 | extractable, |
---|
| 126 | ["sign"]); |
---|
| 127 | } |
---|
| 128 | |
---|
| 129 | function Verify() |
---|
| 130 | { |
---|
| 131 | var pem = forge.util.decode64($('#pfxc').val()); |
---|
| 132 | var signature64 = $('#pfxs').val(); |
---|
| 133 | var signature = forge.util.decode64(signature64); |
---|
| 134 | var data = $('#pfxd').val(); |
---|
| 135 | var cert = forge.pki.certificateFromPem(pem); |
---|
| 136 | |
---|
| 137 | window.crypto.subtle.importKey("spki",publicKeyToPkcs8(cert.publicKey), |
---|
| 138 | { |
---|
| 139 | name: "RSASSA-PKCS1-v1_5", |
---|
| 140 | hash: {name: "SHA-256"}, |
---|
| 141 | }, |
---|
| 142 | false, |
---|
| 143 | ["verify"] |
---|
| 144 | ).then(function(k) |
---|
| 145 | { |
---|
| 146 | window.crypto.subtle.verify( |
---|
| 147 | { |
---|
| 148 | name: "RSASSA-PKCS1-v1_5", |
---|
| 149 | }, |
---|
| 150 | k, //from generateKey or importKey above |
---|
| 151 | stringToArrayBuffer(signature), //ArrayBuffer of the signature |
---|
| 152 | stringToArrayBuffer(data) //ArrayBuffer of the data |
---|
| 153 | ).then(function(isvalid) |
---|
| 154 | { |
---|
| 155 | //returns a boolean on whether the signature is true or not |
---|
| 156 | if (!isvalid) |
---|
| 157 | { |
---|
| 158 | var msg = 'Invalid digital Signature!<br>'; |
---|
| 159 | msg += 'Signed Document: '; |
---|
| 160 | msg += forge.util.decode64($('#pfxd').val()); |
---|
| 161 | |
---|
| 162 | msg += '<br>'; |
---|
| 163 | msg += CertInfo(cert); |
---|
| 164 | |
---|
| 165 | |
---|
| 166 | $('#dr').html(msg); |
---|
| 167 | } |
---|
| 168 | else |
---|
| 169 | { |
---|
| 170 | var msg = 'Valid Digital Signature!<br>'; |
---|
| 171 | msg += 'Signed Document: '; |
---|
| 172 | msg += forge.util.decode64($('#pfxd').val()); |
---|
| 173 | |
---|
| 174 | msg += '<br>'; |
---|
| 175 | msg += CertInfo(cert); |
---|
| 176 | |
---|
| 177 | |
---|
| 178 | $('#dr').html(msg); |
---|
| 179 | } |
---|
| 180 | }).catch(function(err) |
---|
| 181 | { |
---|
| 182 | $('#dr').html('Invalid Digital Signature!'); |
---|
| 183 | }); |
---|
| 184 | } |
---|
| 185 | |
---|
| 186 | ); |
---|
| 187 | } |
---|
| 188 | |
---|
| 189 | function Sign2() |
---|
| 190 | { |
---|
| 191 | // Get PFX |
---|
| 192 | var fileInput = document.getElementById('pfx'); |
---|
| 193 | var file = fileInput.files[0]; |
---|
| 194 | |
---|
| 195 | // Read it |
---|
| 196 | var reader = new FileReader(); |
---|
| 197 | reader.onload = function(e) |
---|
| 198 | { |
---|
| 199 | var contents = e.target.result; |
---|
| 200 | var pkcs12Der = arrayBufferToString(contents) |
---|
| 201 | var pkcs12B64 = forge.util.encode64(pkcs12Der); |
---|
| 202 | var privateKey; |
---|
| 203 | var pkcs12Asn1 = forge.asn1.fromDer(pkcs12Der); |
---|
| 204 | var password = $('#pfxp').val(); |
---|
| 205 | |
---|
| 206 | var pkcs12 = forge.pkcs12.pkcs12FromAsn1(pkcs12Asn1, false, password); |
---|
| 207 | // load keys |
---|
| 208 | for(var sci = 0; sci < pkcs12.safeContents.length; ++sci) |
---|
| 209 | { |
---|
| 210 | var safeContents = pkcs12.safeContents[sci]; |
---|
| 211 | for(var sbi = 0; sbi < safeContents.safeBags.length; ++sbi) |
---|
| 212 | { |
---|
| 213 | var safeBag = safeContents.safeBags[sbi]; |
---|
| 214 | if(safeBag.type === forge.pki.oids.keyBag) |
---|
| 215 | { |
---|
| 216 | //Found plain private key |
---|
| 217 | privateKey = safeBag.key; |
---|
| 218 | } |
---|
| 219 | else |
---|
| 220 | if(safeBag.type === forge.pki.oids.pkcs8ShroudedKeyBag) |
---|
| 221 | { |
---|
| 222 | // found encrypted private key |
---|
| 223 | privateKey = safeBag.key; |
---|
| 224 | } |
---|
| 225 | else |
---|
| 226 | if(safeBag.type === forge.pki.oids.certBag) |
---|
| 227 | { |
---|
| 228 | // this bag has a certificate... |
---|
| 229 | cert = safeBag.cert; |
---|
| 230 | } |
---|
| 231 | } |
---|
| 232 | } |
---|
| 233 | |
---|
| 234 | importCryptoKeyPkcs8(privateKey,true).then(function(cryptoKey) |
---|
| 235 | { |
---|
| 236 | // Signed! |
---|
| 237 | |
---|
| 238 | // Empty stuff |
---|
| 239 | var ser = forge.util.encode64($('#form1').serialize()); |
---|
| 240 | var digestToSignBuf = stringToArrayBuffer(ser); |
---|
| 241 | $('#pfxd').val(ser); |
---|
| 242 | var pem = forge.pki.certificateToPem(cert); |
---|
| 243 | $('#pfxc').val(forge.util.encode64(pem)); |
---|
| 244 | |
---|
| 245 | crypto.subtle.sign( |
---|
| 246 | {name: "RSASSA-PKCS1-v1_5"}, |
---|
| 247 | cryptoKey, |
---|
| 248 | digestToSignBuf) |
---|
| 249 | .then(function(signature){ |
---|
| 250 | sign = arrayBufferToString(signature); |
---|
| 251 | signatureB64 = forge.util.encode64(sign); |
---|
| 252 | $('#pfxs').val(signatureB64); |
---|
| 253 | |
---|
| 254 | |
---|
| 255 | |
---|
| 256 | }); |
---|
| 257 | |
---|
| 258 | }); |
---|
| 259 | |
---|
| 260 | } |
---|
| 261 | |
---|
| 262 | reader.readAsArrayBuffer(file); |
---|
| 263 | } |
---|
| 264 | |
---|
| 265 | function Sign1() |
---|
| 266 | { |
---|
| 267 | // Check validity |
---|
| 268 | var myForm = document.getElementById('form1'); |
---|
| 269 | if (myForm.checkValidity()) |
---|
| 270 | { |
---|
| 271 | Sign2(); |
---|
| 272 | } |
---|
| 273 | } |
---|
| 274 | |
---|
| 275 | </script> |
---|
| 276 | |
---|
| 277 | <strong>Form to fill</strong> |
---|
| 278 | <hr> |
---|
| 279 | <form name="form1" id="form1" method="post" action=""> |
---|
| 280 | <label for="firstname">First name:</label> |
---|
| 281 | <input type="text" class="form-control" name="firstname" id="firstname" required><br> |
---|
| 282 | <label for="lastname">Last name:</label> |
---|
| 283 | <input type="text" class="form-control" name="lastname" id="lastname" required><br> |
---|
| 284 | </form> |
---|
| 285 | |
---|
| 286 | <label for="pfx">Select PFX/P12 file:</label><br> |
---|
| 287 | <input name="pfx" class="form-control" type="file" id="pfx" accept=".pfx,.p12" required /><br> |
---|
| 288 | <label for="pfxp">Enter Private Key password:</label><br> |
---|
| 289 | <input name="pfxp" class="form-control" type="password" id="pfxp" /><br> |
---|
| 290 | |
---|
| 291 | <button type="button" name="buttonsubmit2" id="buttonsubmit2" onclick="Sign1();" class="btn btn-primary btn-lg">SIGN DOCUMENT</button> |
---|
| 292 | |
---|
| 293 | <p> </p><br><br> |
---|
| 294 | <p><strong>Output</strong></p> |
---|
| 295 | <hr> |
---|
| 296 | <p> |
---|
| 297 | <label for="pfxs">Signature:</label><textarea name="pfxs" id="pfxs" class="form-control" ></textarea><br> |
---|
| 298 | <label for="pfxd">Data signed:</label><textarea name="pfxd" id="pfxd" class="form-control" ></textarea><br> |
---|
| 299 | <label for="pfxc">Certificate:</label><textarea name="pfxc" id="pfxc" class="form-control" ></textarea><br> |
---|
| 300 | <button type="button" name="buttonsubmit3" id="buttonsubmit3" onclick="Verify();" class="btn btn-primary btn-lg">VERIFY SIGNATURE</button> |
---|
| 301 | </p> |
---|
| 302 | |
---|
| 303 | <div id="dr"></div> |
---|
| 304 | |
---|
| 305 | </body> |
---|
| 306 | </html> |
---|