PeculiarVentures · koolsys · Oct 3, 2018 · Oct 3, 2018 · Oct 4, 2018 · Oct 5, 2018
diff --git a/examples/CMSSignedEncryptComplexExample/README.md b/examples/CMSSignedEncryptComplexExample/README.md
@@ -0,0 +1,4 @@
+Example demonstrating certificate and key creation, message signing,
+encrypting, decrypting, parsing, and verifying an S/MIME email message.
+This can parse and send emails with some up-to-date mail
+clients.
diff --git a/examples/CMSSignedEncryptComplexExample/SMIMESignEncryptionExample.xhtml b/examples/CMSSignedEncryptComplexExample/SMIMESignEncryptionExample.xhtml
@@ -0,0 +1,304 @@
+<!DOCTYPE html>
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8" />
+    <title>S/MIME encryption and decryption</title>
+
+    <script type="application/javascript" src="../../node_modules/babel-polyfill/dist/polyfill.js"></script>
+    <script type="text/javascript" src="bundle.js"></script>
+    <script src="dom.js"></script>
+
+    <style type="text/css">
+        body{background:#EFEFEF;font:normal 14px/16px Helvetica, Arial, sans-serif;}
+        .wrapper{
+            width:1200px;
+            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:600px;
+            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 #cert-attributes{
+            margin:0;
+            padding:0;
+            float:left;
+            list-style:none;
+        }
+        .border-block .two-col #cert-attributes li p{
+            margin:0;
+        }
+        .border-block .two-col #cert-attributes li p span{
+            width:40px;
+            display:inline-block;
+            margin:0 0 5px;
+        }
+        .border-block .two-col #cert-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; 
+       }
+	ul {
+	  list-style: none;
+	  padding: 0;
+	  margin: 0;
+	}
+
+	ul li {
+	  display: inline-block;
+	}
+
+	ul li:not(:last-child):after {
+	  content: ", ";
+	}
+    </style>
+</head>
+
+<body>
+    <div class="wrapper">
+        <p class="header-block">Put existing data or create new X.509 certificate and private key</p>
+        <div id="output_div" class="border-block">
+            <p>
+                <label for="hash_alg" style="font-weight:bold">Hashing algorithm:</label>
+                <select id="hash_alg" onchange="handleHashAlgOnChange()">
+                    <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>
+            <p>
+                <label for="sign_alg" style="font-weight:bold">Signature algorithm:</label>
+                <select id="sign_alg" onchange="handleSignAlgOnChange()">
+                    <option value="alg_RSA15">RSASSA-PKCS1-v1_5</option>
+                    <option value="alg_RSA2">RSA-PSS</option>
+                    <option value="alg_ECDSA">ECDSA</option>
+                </select>
+            </p>
+            <p>
+                <a id="createselfbutton">Create Self Sign</a>
+		,
+	        <a id="importbutton">Import</a>
+	        OR
+                <a id="createcsrbutton">Create Request</a>
+            </p>
+            <label for="cert_data" style="font-weight:bold;float:left;">BASE-64 encoded certificate:</label>
+            <textarea id="cert_data">&lt;  Encoded certificate must be put here &gt;</textarea>
+            <label for="pkcs8_key" style="font-weight:bold;float:left;">BASE-64 encoded PKCS#8 private key:</label>
+            <textarea id="pkcs8_key">&lt; PKCS#8 private key must be put here &gt;</textarea>
+	    <label for="password" style="font-weight:bold;float:left;">Password:</label>
+	    <input type="text" id="password"></input>
+	    <label for="pkcs12_file" style="font-weight:bold;float:left;">Select binary PKCS12 file:</label>
+	    <input id="pkcs12_file" type="file" title="PKCS#12 file"></input>
+	    <a id="exppkcs12_file">Export as PKCS12</a>
+            <div id="divtable" class="border-block"></div>
+        </div>
+    </div>
+    <div class="wrapper">
+        <p class="header-block">Create new CMS Signed Data</p>
+        <div id="output_div" class="border-block">
+            <p>
+                <label for="detached_signature" style="font-weight:bold">Make CMS signature with detached data:</label>
+                <input type="checkbox" id="detached_signature" value="0" onchange="handleDetachedSignatureOnChange()" />
+            </p>
+            <p>
+                <label for="add_ext" style="font-weight:bold">Add signed extensions in SignerInfo:</label>
+                <input type="checkbox" id="add_ext" value="0" onchange="handleAddExtOnChange()" />
+            </p>
+	    <p>
+	        <label for="input_text" style="font-weight:bold">Input text to encode:</label>
+                <textarea id="input_text">&lt; Put message to sign here &gt;</textarea>
+                <a id="signbutton">Sign</a>
+	    </p>
+	    <p>OR</p>
+            <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>
+            <label for="new_signed_data" style="font-weight:bold;float:left;">CMS data:</label>
+            <textarea id="new_signed_data">&lt;  New CSM signed data &gt;</textarea>
+        </div>
+        <p class="header-block">Work with S/MIME Encryption</p>
+        <div class="border-block">
+            <label for="content" style="font-weight:bold;float:left;">Content recipient PEM encoded certificate:</label>
+            <textarea id="recipcertbox">&lt; Put recipient certificate here &gt;</textarea>
+            <p>
+                <label for="content_enc_alg" style="font-weight:bold">Content encryption algorithm:</label>
+                <select id="content_enc_alg" onchange="handleEncAlgOnChange()">
+                    <option value="alg_CBC">AES-CBC</option>
+                    <option value="alg_GCM">AES-GCM</option>
+                </select>
+            </p>
+            <p>
+                <label for="content_enc_alg_len" style="font-weight:bold">Content encryption algorithm length:</label>
+                <select id="content_enc_alg_len" onchange="handleEncLenOnChange()">
+                    <option value="len_128">128</option>
+                    <!-- Currently in Google Chrome AES 192 bit keys are not supported
+                    <option value="len_192">192</option>
+                    -->
+                    <option value="len_256">256</option>
+                </select>
+            </p>
+            <p>
+                <label for="oaep_hash_alg" style="font-weight:bold">RSA-OAEP Hashing Algorithm:</label>
+                <select id="oaep_hash_alg" onchange="handleOAEPHashAlgOnChange()">
+                    <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>
+            <p>
+                <a id="encryptbutton">Encrypt</a>
+            </p>
+            <label for="encrypted_content" style="font-weight:bold;float:left;">S/MIME message:</label>
+            <textarea id="encrypted_content">&lt; Put encrypted content here &gt;</textarea>
+            <p>
+                <a id="decryptbutton">Decrypt</a>
+            </p>
+            <label for="decrypted_content" style="font-weight:bold;float:left;">Decrypted content:</label>
+            <textarea id="decrypted_content">&lt; Decrypted content will be put here &gt;</textarea>
+        </div>
+	<!-- Sign section start -->
+        <p class="header-block">Parse loaded CMS Signed Data</p>
+        <div id="cms-signed-data-block" class="border-block">
+            <p>
+                <a id="parsebutton">Parse decrypted content</a>
+            </p>
+            <p>
+	        OR<br />
+                <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>
+	    <div id="divtablemsgcerts"></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>
+	    <p><textarea id="extractbox"> &gt; Extracted text will go here. &lt; </textarea></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 id="verifysignedbutton" onclick="verifyCMSSigned();">Verify</a>
+        </div>
+        <p class="header-block">Verify loaded/created X.509 certificate</p>
+        <div id="add-cert-block" class="border-block">
+            <div class="border-block" style="margin-bottom: 15px;">
+                <p>
+                    <label for="ca_bundle">Load "CA bundle":</label>
+                    <input type="file" id="ca_bundle" title="Load CA bundle" />
+                </p>
+                <p>OR</p>
+                <p>
+            <label for="trusted_certtext" style="font-weight:bold;float:left;">BASE-64 encoded trusted certificate:</label>
+            <textarea id="trusted_certtext" style="width:530px;">&lt;  Encoded certificate must be put here &gt;</textarea>
+                </p>
+            </div>
+            <p>
+                <label for="inter_certs">Load intermediate certificates (binary):</label>
+                <input type="file" id="inter_certs" title="Load interm. certs" multiple="multiple" />
+            </p>
+            <a id="verifycertbutton">Verify</a>
+        </div>
+    </div>
+
+	<script src="smime.js"></script>
+</body>
+</html>