UNPKG

pkijs

Version:

Public Key Infrastructure (PKI) is the basis of how identity and key management is performed on the web today. PKIjs is a pure JavaScript library implementing the formats that are used in PKI applications. It is built on WebCrypto and aspires to make it p

975 lines (855 loc) 40.7 kB
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>CMS Signed Data complex example</title> <script type="text/javascript" src="org/pkijs/common.js"></script> <script type="text/javascript" src="org/pkijs/asn1.js"></script> <script type="text/javascript" src="org/pkijs/x509_schema.js"></script> <script type="text/javascript" src="org/pkijs/x509_simpl.js"></script> <script type="text/javascript" src="org/pkijs/cms_schema.js"></script> <script type="text/javascript" src="org/pkijs/cms_simpl.js"></script> <script type="text/javascript" src="org/pkijs/ocsp_tsp_schema.js"></script> <script type="text/javascript" src="org/pkijs/ocsp_tsp_simpl.js"></script> <style type="text/css"> body{background:#EFEFEF;font:normal 14px/16px Helvetica, Arial, sans-serif;} .wrapper{ width:600px; margin:50px auto; padding:50px; border:solid 2px #CCC; border-radius:10px; -webkit-border-radius:10px; box-shadow:0 0 12px 3px #CDCDCD; -webkit-box-shadow:0 0 12px 3px #CDCDCD; background:#FFF; } label{ font:bold 16px/20px Helvetica, Arial, sans-serif; margin:0 0 8px; } textarea{ width:500px; border:solid 1px #999; border-radius:5px; -webkit-border-radius:5px; height:340px; font:normal 12px/15px monospace; display:block; margin:0 0 12px; box-shadow:0 0 5px 5px #EFEFEF inset; -webkit-box-shadow:0 0 5px 5px #EFEFEF inset; padding:20px; resize: none; } a{ display:inline-block; padding:5px 15px; background:#ACD0EC; border:solid 1px #4C6181; color:#000; font:normal 14px/16px Helvetica, Arial, sans-serif; } a:hover{ background:#DAEBF8; cursor:pointer; } .header-block { margin-top:30px; font:bold 16px/20px Helvetica, Arial, sans-serif; } .border-block{ border:solid 2px #999; border-radius:5px; -webkit-border-radius:5px; margin:10px 0 0; padding:20px 30px; background:#F0F4FF; } .border-block h2{ margin:0 0 16px; font:bold 22px/24px Helvetica, Arial, sans-serif; } .border-block p{ margin:0 0 12px; } .border-block p .type{ font-weight:bold; display:inline-block; width:176px; } .border-block .two-col{ overflow:hidden; margin:0 0 16px; } .border-block .two-col .subject{ width:180px; font-weight:bold; margin:0 0 12px; float:left; } .border-block .two-col #cms-signed-attributes{ margin:0; padding:0; float:left; list-style:none; } .border-block .two-col #cms-signed-attributes li p{ margin:0; } .border-block .two-col #cms-signed-attributes li p span{ width:40px; display:inline-block; margin:0 0 5px; } .border-block .two-col #cms-signed-exten{ overflow:hidden; padding:0 0 0 17px; margin:0; list-style-type:square; } table { border:solid; border-collapse:collapse; border-color:black; } th { text-align:center; background: #ccc; padding: 5px; border: 1px solid black; } td { padding: 5px; border: 1px solid black; } </style> <script> //********************************************************************************* var cmsSignedBuffer = new ArrayBuffer(0); // ArrayBuffer with loaded or created CMS_Signed var trustedCertificates = new Array(); // Array of root certificates from "CA Bundle" //********************************************************************************* // #region Auxiliary functions //********************************************************************************* function formatPEM(pem_string) { /// <summary>Format string in order to have each line with length equal to 63</summary> /// <param name="pem_string" type="String">String to format</param> var string_length = pem_string.length; var result_string = ""; for(var i = 0, count = 0; i < string_length; i++, count++) { if(count > 63) { result_string = result_string + "\r\n"; count = 0; } result_string = result_string + pem_string[i]; } return result_string; } //********************************************************************************* function arrayBufferToString(buffer) { /// <summary>Create a string from ArrayBuffer</summary> /// <param name="buffer" type="ArrayBuffer">ArrayBuffer to create a string from</param> var result_string = ""; var view = new Uint8Array(buffer); for(var i = 0; i < view.length; i++) result_string = result_string + String.fromCharCode(view[i]); return result_string; } //********************************************************************************* function stringToArrayBuffer(str) { /// <summary>Create an ArrayBuffer from string</summary> /// <param name="str" type="String">String to create ArrayBuffer from</param> var stringLength = str.length; var resultBuffer = new ArrayBuffer(stringLength); var resultView = new Uint8Array(resultBuffer); for(var i = 0; i < stringLength; i++) resultView[i] = str.charCodeAt(i); return resultBuffer; } //********************************************************************************* function handleFileBrowse(evt) { var temp_reader = new FileReader(); var current_files = evt.target.files; temp_reader.onload = function(event) { create_CMS_Signed(event.target.result); }; temp_reader.readAsArrayBuffer(current_files[0]); } //********************************************************************************* function handleParsingFile(evt) { var temp_reader = new FileReader(); var current_files = evt.target.files; temp_reader.onload = function(event) { cmsSignedBuffer = event.target.result; parse_CMS_Signed(); }; temp_reader.readAsArrayBuffer(current_files[0]); } //********************************************************************************* function handleCABundle(evt) { var temp_reader = new FileReader(); var current_files = evt.target.files; temp_reader.onload = function(event) { parseCAbundle(event.target.result); }; temp_reader.readAsArrayBuffer(current_files[0]); } //********************************************************************************* // #endregion //********************************************************************************* // #region Create CMS_Signed //********************************************************************************* function create_CMS_Signed(buffer) { // #region Initial variables var sequence = Promise.resolve(); var cert_simpl = new org.pkijs.simpl.CERT(); var cms_signed_simpl; var publicKey; var privateKey; var hash_algorithm = "sha-1"; var hash_algorithm_oid = "1.3.14.3.2.26"; var signature_algorithm = "1.2.840.113549.1.1.5"; var hash_option = document.getElementById("hash_alg").value; switch(hash_option) { case "alg_SHA1": hash_algorithm = "sha-1"; hash_algorithm_oid = "1.3.14.3.2.26"; signature_algorithm = "1.2.840.113549.1.1.5"; break; case "alg_SHA256": hash_algorithm = "sha-256"; hash_algorithm_oid = "2.16.840.1.101.3.4.2.1"; signature_algorithm = "1.2.840.113549.1.1.11"; break; case "alg_SHA384": hash_algorithm = "sha-384"; hash_algorithm_oid = "2.16.840.1.101.3.4.2.2"; signature_algorithm = "1.2.840.113549.1.1.12"; break; case "alg_SHA512": hash_algorithm = "sha-512"; hash_algorithm_oid = "2.16.840.1.101.3.4.2.3"; signature_algorithm = "1.2.840.113549.1.1.13"; break; default:; } // #endregion // #region Get a "crypto" extension var crypto = org.pkijs.getCrypto(); if(typeof crypto == "undefined") { alert("No WebCrypto extension found"); return; } // #endregion // #region Put a static values cert_simpl.version = 2; cert_simpl.serialNumber = new org.pkijs.asn1.INTEGER({ value: 1 }); cert_simpl.issuer.types_and_values.push(new org.pkijs.simpl.ATTR_TYPE_AND_VALUE({ type: "2.5.4.6", // Country name value: new org.pkijs.asn1.PRINTABLESTRING({ value: "RU" }) })); cert_simpl.issuer.types_and_values.push(new org.pkijs.simpl.ATTR_TYPE_AND_VALUE({ type: "2.5.4.3", // Common name value: new org.pkijs.asn1.BMPSTRING({ value: "Test" }) })); cert_simpl.subject.types_and_values.push(new org.pkijs.simpl.ATTR_TYPE_AND_VALUE({ type: "2.5.4.6", // Country name value: new org.pkijs.asn1.PRINTABLESTRING({ value: "RU" }) })); cert_simpl.subject.types_and_values.push(new org.pkijs.simpl.ATTR_TYPE_AND_VALUE({ type: "2.5.4.3", // Common name value: new org.pkijs.asn1.BMPSTRING({ value: "Test" }) })); cert_simpl.notBefore.value = new Date(2013, 01, 01); cert_simpl.notAfter.value = new Date(2016, 01, 01); cert_simpl.extensions = new Array(); // Extensions are not a part of certificate by default, it's an optional array // #region "BasicConstraints" extension //var basic_constr = new org.pkijs.simpl.x509.BasicConstraints({ // cA: true, // pathLenConstraint: 3 //}); //cert_simpl.extensions.push(new org.pkijs.simpl.EXTENSION({ // extnID: "2.5.29.19", // critical: false, // extnValue: basic_constr.toSchema().toBER(false), // parsedValue: basic_constr // Parsed value for well-known extensions //})); // #endregion // #region "KeyUsage" extension var bit_array = new ArrayBuffer(1); var bit_view = new Uint8Array(bit_array); bit_view[0] = bit_view[0] | 0x02; // Key usage "cRLSign" flag //bit_view[0] = bit_view[0] | 0x04; // Key usage "keyCertSign" flag var key_usage = new org.pkijs.asn1.BITSTRING({ value_hex: bit_array }); cert_simpl.extensions.push(new org.pkijs.simpl.EXTENSION({ extnID: "2.5.29.15", critical: false, extnValue: key_usage.toBER(false), parsedValue: key_usage // Parsed value for well-known extensions })); // #endregion cert_simpl.signatureAlgorithm.algorithm_id = signature_algorithm; cert_simpl.signature.algorithm_id = cert_simpl.signatureAlgorithm.algorithm_id; // Must be the same value // #endregion // #region Create a new key pair sequence = sequence.then( function() { return crypto.generateKey({ name: "RSASSA-PKCS1-v1_5", modulusLength: 2048, publicExponent: new Uint8Array([0x01, 0x00, 0x01]), hash: { name: hash_algorithm } }, true, ["sign", "verify"]); } ); // #endregion // #region Store new key in an interim variables sequence = sequence.then( function(keyPair) { publicKey = keyPair.publicKey; privateKey = keyPair.privateKey; }, function(error) { alert("Error during key generation: " + error); } ); // #endregion // #region Exporting public key into "subjectPublicKeyInfo" value of certificate sequence = sequence.then( function() { return cert_simpl.subjectPublicKeyInfo.importKey(publicKey); } ); // #endregion // #region Signing final certificate sequence = sequence.then( function() { return cert_simpl.sign(privateKey); }, function(error) { alert("Error during exporting public key: " + error); } ); // #endregion // #region Encode and store certificate sequence = sequence.then( function() { var cert_simpl_encoded = cert_simpl.toSchema(true).toBER(false); var cert_simpl_string = String.fromCharCode.apply(null, new Uint8Array(cert_simpl_encoded)); var result_string = "-----BEGIN CERTIFICATE-----\r\n"; result_string = result_string + formatPEM(window.btoa(cert_simpl_string)); result_string = result_string + "\r\n-----END CERTIFICATE-----\r\n"; document.getElementById("new_signed_data").innerHTML = result_string; alert("Certificate created successfully!"); }, function(error) { alert("Error during signing: " + error); } ); // #endregion // #region Exporting private key sequence = sequence.then( function() { return crypto.exportKey("pkcs8", privateKey); } ); // #endregion // #region Store exported key on Web page sequence = sequence.then( function(result) { var private_key_string = String.fromCharCode.apply(null, new Uint8Array(result)); var result_string = document.getElementById("new_signed_data").innerHTML; result_string = result_string + "\r\n-----BEGIN PRIVATE KEY-----\r\n"; result_string = result_string + formatPEM(window.btoa(private_key_string)); result_string = result_string + "\r\n-----END PRIVATE KEY-----\r\n"; document.getElementById("new_signed_data").innerHTML = result_string; alert("Private key exported successfully!"); }, function(error) { alert("Error during exporting of private key: " + error); } ); // #endregion if(document.getElementById("add_ext").checked) { // #region Create a message digest sequence = sequence.then( function() { return crypto.digest({ name: hash_algorithm }, new Uint8Array(buffer)); } ); // #endregion // #region Combine all signed extensions sequence = sequence.then( function(result) { var signed_attr = new Array(); signed_attr.push(new org.pkijs.simpl.cms.Attribute({ attrType: "1.2.840.113549.1.9.3", attrValues: [ new org.pkijs.asn1.OID({ value: "1.2.840.113549.1.7.1" }) ] })); // contentType signed_attr.push(new org.pkijs.simpl.cms.Attribute({ attrType: "1.2.840.113549.1.9.5", attrValues: [ new org.pkijs.asn1.UTCTIME({ value_date: new Date() }) ] })); // signingTime signed_attr.push(new org.pkijs.simpl.cms.Attribute({ attrType: "1.2.840.113549.1.9.4", attrValues: [ new org.pkijs.asn1.OCTETSTRING({ value_hex: result }) ] })); // messageDigest return signed_attr; } ); // #endregion } // #region Initialize CMS Signed Data structures and sign it sequence = sequence.then( function(result) { cms_signed_simpl = new org.pkijs.simpl.CMS_SIGNED_DATA({ version: 1, digestAlgorithms: [ new org.pkijs.simpl.ALGORITHM_IDENTIFIER({ algorithm_id: hash_algorithm_oid, algorithm_params: new org.pkijs.asn1.NULL() }) // SHA-1 ], encapContentInfo: new org.pkijs.simpl.cms.EncapsulatedContentInfo({ eContentType: "1.2.840.113549.1.7.1", // "data" content type eContent: new org.pkijs.asn1.OCTETSTRING({ value_hex: buffer }) }), signerInfos: [ new org.pkijs.simpl.CMS_SIGNER_INFO({ version: 1, sid: new org.pkijs.simpl.cms.IssuerAndSerialNumber({ issuer: cert_simpl.issuer, serialNumber: cert_simpl.serialNumber }), digestAlgorithm: new org.pkijs.simpl.ALGORITHM_IDENTIFIER({ algorithm_id: hash_algorithm_oid, algorithm_params: new org.pkijs.asn1.NULL() }), // SHA-1 signatureAlgorithm: new org.pkijs.simpl.ALGORITHM_IDENTIFIER({ algorithm_id: "1.2.840.113549.1.1.1", algorithm_params: new org.pkijs.asn1.NULL() }), // RSA (PKCS #1 v1.5) key transport algorithm }) ], certificates: [cert_simpl] }); if(document.getElementById("add_ext").checked) { cms_signed_simpl.signerInfos[0].signedAttrs = new org.pkijs.simpl.cms.SignedUnsignedAttributes({ type: 0, attributes: result }); } return cms_signed_simpl.sign(privateKey, 0); } ); // #endregion sequence.then( function(result) { var cms_signed_schema = cms_signed_simpl.toSchema(true); var cms_content_simp = new org.pkijs.simpl.CMS_CONTENT_INFO({ contentType: "1.2.840.113549.1.7.2", content: cms_signed_schema }); var cms_signed_schema = cms_content_simp.toSchema(true); // #region Make length of some elements in "indefinite form" cms_signed_schema.len_block.is_indefinite_form = true; var block1 = cms_signed_schema.value_block.value[1]; block1.len_block.is_indefinite_form = true; var block2 = block1.value_block.value[0]; block2.len_block.is_indefinite_form = true; var block3 = block2.value_block.value[2]; block3.len_block.is_indefinite_form = true; block3.value_block.value[1].len_block.is_indefinite_form = true; block3.value_block.value[1].value_block.value[0].len_block.is_indefinite_form = true; // #endregion cmsSignedBuffer = cms_signed_schema.toBER(false); // #region Convert ArrayBuffer to String var signed_data_string = ""; var view = new Uint8Array(cmsSignedBuffer); for(var i = 0; i < view.length; i++) signed_data_string = signed_data_string + String.fromCharCode(view[i]); // #endregion var result_string = document.getElementById("new_signed_data").innerHTML; result_string = result_string + "\r\n-----BEGIN CMS-----\r\n"; result_string = result_string + formatPEM(window.btoa(signed_data_string)); result_string = result_string + "\r\n-----END CMS-----\r\n\r\n"; document.getElementById("new_signed_data").innerHTML = result_string; parse_CMS_Signed(); alert("CMS Signed Data created successfully!"); }, function(error) { alert("Erorr during signing of CMS Signed Data: " + error); } ); } //********************************************************************************* // #endregion //********************************************************************************* // #region Parse existing CMS_Signed //********************************************************************************* function parse_CMS_Signed() { // #region Initial check if(cmsSignedBuffer.byteLength === 0) { alert("Nothing to parse!"); return; } // #endregion // #region Initial activities document.getElementById("cms-dgst-algos").innerHTML = ""; document.getElementById("cms-certs").style.display = "none"; document.getElementById("cms-crls").style.display = "none"; var certificatesTable = document.getElementById("cms-certificates"); while(certificatesTable.rows.length > 1) { certificatesTable.deleteRow(certificatesTable.rows.length - 1); } var crlsTable = document.getElementById("cms-rev-lists"); while(crlsTable.rows.length > 1) { crlsTable.deleteRow(crlsTable.rows.length - 1); } // #endregion // #region Decode existing CMS Signed Data var asn1 = org.pkijs.fromBER(cmsSignedBuffer); var cms_content_simpl = new org.pkijs.simpl.CMS_CONTENT_INFO({ schema: asn1.result }); var cms_signed_simpl = new org.pkijs.simpl.CMS_SIGNED_DATA({ schema: cms_content_simpl.content }); // #endregion // #region Put information about digest algorithms in the CMS Signed Data var dgstmap = { "1.3.14.3.2.26": "SHA-1", "2.16.840.1.101.3.4.2.1": "SHA-256", "2.16.840.1.101.3.4.2.2": "SHA-384", "2.16.840.1.101.3.4.2.3": "SHA-512" }; for(var i = 0; i < cms_signed_simpl.digestAlgorithms.length; i++) { var typeval = dgstmap[cms_signed_simpl.digestAlgorithms[i].algorithm_id]; if(typeof typeval === "undefined") typeval = cms_signed_simpl.digestAlgorithms[i].algorithm_id; var ulrow = "<li><p><span>" + typeval + "</span></p></li>"; document.getElementById("cms-dgst-algos").innerHTML = document.getElementById("cms-dgst-algos").innerHTML + ulrow; } // #endregion // #region Put information about encapsulated content type var contypemap = { "1.3.6.1.4.1.311.2.1.4": "Authenticode signing information", "1.2.840.113549.1.7.1": "Data content" }; var eContentType = contypemap[cms_signed_simpl.encapContentInfo.eContentType]; if(typeof eContentType === "undefined") eContentType = cms_signed_simpl.encapContentInfo.eContentType; document.getElementById("cms-encap-type").innerHTML = eContentType; // #endregion // #region Put information about included certificates var rdnmap = { "2.5.4.6": "C", "2.5.4.10": "OU", "2.5.4.11": "O", "2.5.4.3": "CN", "2.5.4.7": "L", "2.5.4.8": "S", "2.5.4.12": "T", "2.5.4.42": "GN", "2.5.4.43": "I", "2.5.4.4": "SN", "1.2.840.113549.1.9.1": "E-mail" }; if("certificates" in cms_signed_simpl) { for(var j = 0; j < cms_signed_simpl.certificates.length; j++) { var ul = "<ul>"; for(var i = 0; i < cms_signed_simpl.certificates[j].issuer.types_and_values.length; i++) { var typeval = rdnmap[cms_signed_simpl.certificates[j].issuer.types_and_values[i].type]; if(typeof typeval === "undefined") typeval = cms_signed_simpl.certificates[j].issuer.types_and_values[i].type; var subjval = cms_signed_simpl.certificates[j].issuer.types_and_values[i].value.value_block.value; var ulrow = "<li><p><span>" + typeval + "</span> " + subjval + "</p></li>"; ul = ul + ulrow; } ul = ul + "</ul>"; var row = certificatesTable.insertRow(certificatesTable.rows.length); var cell0 = row.insertCell(0); cell0.innerHTML = org.pkijs.bufferToHexCodes(cms_signed_simpl.certificates[j].serialNumber.value_block.value_hex); var cell1 = row.insertCell(1); cell1.innerHTML = ul; } document.getElementById("cms-certs").style.display = "block"; } // #endregion // #region Put information about included CRLs if("crls" in cms_signed_simpl) { for(var j = 0; j < cms_signed_simpl.crls.length; j++) { var ul = "<ul>"; for(var i = 0; i < cms_signed_simpl.crls[j].issuer.types_and_values.length; i++) { var typeval = rdnmap[cms_signed_simpl.crls[j].issuer.types_and_values[i].type]; if(typeof typeval === "undefined") typeval = cms_signed_simpl.crls[j].issuer.types_and_values[i].type; var subjval = cms_signed_simpl.crls[j].issuer.types_and_values[i].value.value_block.value; var ulrow = "<li><p><span>" + typeval + "</span> " + subjval + "</p></li>"; ul = ul + ulrow; } ul = ul + "</ul>"; var row = crlsTable.insertRow(certificatesTable.rows.length); var cell = row.insertCell(0); cell.innerHTML = ul; } document.getElementById("cms-certs").style.display = "block"; } // #endregion // #region Put information about number of signers document.getElementById("cms-signs").innerHTML = cms_signed_simpl.signerInfos.length.toString(); // #endregion document.getElementById("cms-signed-data-block").style.display = "block"; } //********************************************************************************* // #endregion //********************************************************************************* // #region Verify existing CMS_Signed //********************************************************************************* function verify_CMS_Signed() { // #region Initial check if(cmsSignedBuffer.byteLength === 0) { alert("Nothing to verify!"); return; } // #endregion // #region Decode existing CMS_Signed var asn1 = org.pkijs.fromBER(cmsSignedBuffer); var cms_content_simpl = new org.pkijs.simpl.CMS_CONTENT_INFO({ schema: asn1.result }); var cms_signed_simpl = new org.pkijs.simpl.CMS_SIGNED_DATA({ schema: cms_content_simpl.content }); // #endregion // #region Verify CMS_Signed cms_signed_simpl.verify({ signer: 0, trusted_certs: trustedCertificates }). then( function(result) { alert("Verification result: " + result); }, function(error) { alert("Error during verification: " + error); } ); // #endregion } //********************************************************************************* // #endregion //********************************************************************************* // #region Parse "CA Bundle" file //********************************************************************************* function parseCAbundle(buffer) { // #region Initial variables var base64Chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; var startChars = "-----BEGIN CERTIFICATE-----"; var endChars = "-----END CERTIFICATE-----"; var endLineChars = "\r\n"; var view = new Uint8Array(buffer); var waitForStart = false; var middleStage = true; var waitForEnd = false; var waitForEndLine = false; var started = false; var certBodyEncoded = ""; // #endregion for(var i = 0; i < view.length; i++) { if(started === true) { if(base64Chars.indexOf(String.fromCharCode(view[i])) !== (-1)) certBodyEncoded = certBodyEncoded + String.fromCharCode(view[i]); else { if(String.fromCharCode(view[i]) === '-') { // #region Decoded trustedCertificates var asn1 = org.pkijs.fromBER(stringToArrayBuffer(window.atob(certBodyEncoded))); try { trustedCertificates.push(new org.pkijs.simpl.CERT({ schema: asn1.result })); } catch(ex) { alert("Wrong certificate format"); return; } // #endregion // #region Set all "flag variables" certBodyEncoded = ""; started = false; waitForEnd = true; // #endregion } } } else { if(waitForEndLine === true) { if(endLineChars.indexOf(String.fromCharCode(view[i])) === (-1)) { waitForEndLine = false; if(waitForEnd === true) { waitForEnd = false; middleStage = true; } else { if(waitForStart === true) { waitForStart = false; started = true; certBodyEncoded = certBodyEncoded + String.fromCharCode(view[i]); } else middleStage = true; } } } else { if(middleStage === true) { if(String.fromCharCode(view[i]) === "-") { if((i === 0) || ((String.fromCharCode(view[i - 1]) === "\r") || (String.fromCharCode(view[i - 1]) === "\n"))) { middleStage = false; waitForStart = true; } } } else { if(waitForStart === true) { if(startChars.indexOf(String.fromCharCode(view[i])) === (-1)) waitForEndLine = true; } else { if(waitForEnd === true) { if(endChars.indexOf(String.fromCharCode(view[i])) === (-1)) waitForEndLine = true; } } } } } } } //********************************************************************************* // #endregion //********************************************************************************* </script> </head> <body> <div class="wrapper"> <p class="header-block">Create new CMS Signed Data</p> <div id="output_div" class="border-block"> <p> <label for="input_file" style="font-weight:bold">Select a file to make signature for:</label> <input type="file" id="input_file" title="Input file" /> </p> <p> <label for="add_ext" style="font-weight:bold">Add signed extensions in SignerInfo:</label> <input type="checkbox" id="add_ext" value="0" /> </p> <p> <label for="hash_alg" style="font-weight:bold">Hashing algorithm:</label> <select id="hash_alg"> <option value="alg_SHA1">SHA-1</option> <option value="alg_SHA256">SHA-256</option> <option value="alg_SHA384">SHA-384</option> <option value="alg_SHA512">SHA-512</option> </select> </p> <label for="new_signed_data" style="font-weight:bold;float:left;">CMS data + BASE-64 encoded new certificate + PKCS#8 private key:</label> <textarea id="new_signed_data">&lt; New CSM signed data + new encoded certificate + PKCS#8 exported private key will be stored here &gt;</textarea> </div> <p class="header-block">Parse loaded/created CMS Signed Data</p> <div id="cms-signed-data-block" class="border-block"> <p> <label for="parsing_file">Load binary CMS Signed:</label> <input type="file" id="parsing_file" title="Input file" /> </p> <div id="cms-dgst" class="two-col"> <p class="subject">Digest algorithms:</p> <ul id="cms-dgst-algos"></ul> </div> <p><span class="type">Encapsulated cont. type:</span> <span id="cms-encap-type"></span></p> <div id="cms-certs" class="two-col" style="display:none;"> <p class="subject">Certificates:</p> <table id="cms-certificates"><tr><th>Serial number</th><th>Issuer</th></tr></table> </div> <div id="cms-crls" class="two-col" style="display:none;"> <p class="subject">CRLs:</p> <table id="cms-rev-lists"><tr><th>Issuer</th></tr></table> </div> <p><span class="type">Number of signers:</span> <span id="cms-signs"></span></p> </div> <p class="header-block">Verify loaded/created CMS Signed Data</p> <div id="add-cms-signed-block" class="border-block"> <p> <label for="ca_bundle">Load "CA bundle":</label> <input type="file" id="ca_bundle" title="Input file" /> </p> <a onclick="verify_CMS_Signed();">Verify</a> </div> </div> <script> document.getElementById('input_file').addEventListener('change', handleFileBrowse, false); document.getElementById('parsing_file').addEventListener('change', handleParsingFile, false); document.getElementById('ca_bundle').addEventListener('change', handleCABundle, false); </script> </body> </html>