|
1 | 1 | <html> |
2 | 2 |
|
3 | 3 | <head> |
4 | | - <title>OnlyKey Apps - Decrypt & verify files in your browser using Keybase PGP and Virtru</title> |
| 4 | + <title>OnlyKey Apps - Decrypt & verify files using Onlykey, Keybase PGP, and Virtru</title> |
5 | 5 | <meta name="viewport" content="width=device-width,initial-scale=1"> |
6 | | - <META HTTP-EQUIV='Content-Security-Policy' CONTENT="default-src 'none' ; script-src 'self' 'sha256-P1WP1KTz9iiHN5Bfeec+pIgBDay5qWNQZh9HujWa94o=' 'sha256-pBDNHyFUtn3XsRvFveaLkaEupq1l96neUvZm5/c1PmQ='; style-src 'self' 'sha256-ujVZuuvwuQ+epdwqO8AhlbOQSx68+ci+dDIwrFrzI+Q=' 'sha256-zsMKYSOY0gzTtULlMRDwkny+ocnOJuA+B49b0BIIQXU='; img-src 'self' ; font-src 'self' ; connect-src 'self' https://keybase.io ; base-uri 'none'; form-action 'none';"> |
7 | 6 | <!-- CSSNormalize, CSSGrids-Responsive, CSSForm, CSSTable, CSSList (v3.9.1) --> |
8 | 7 | <link rel="stylesheet" href="css/gallerycss-csstable-min.css"> |
9 | 8 | <link rel="stylesheet" href="css/gallerycss-csslist-min.css"> |
|
17 | 16 | <link href="css/ShareTechMono.css" rel="stylesheet"> |
18 | 17 | <link href="css/font-awesome.min.css" rel="stylesheet"> |
19 | 18 | <link href="css/style.css" rel="stylesheet"> |
| 19 | + <link href="https://sdk.virtru.com/js/latest/auth-widget/index.css" rel="stylesheet"/> |
| 20 | + <script src="https://sdk.virtru.com/js/latest/auth-widget/index.js"></script> |
| 21 | + <script src="https://sdk.virtru.com/js/latest/virtru-sdk.min.js"></script> |
20 | 22 | <!-- Modify header colors here to customize the look and feel of the site--> |
21 | 23 | <style> |
22 | 24 | .header { |
@@ -101,12 +103,15 @@ <h1> |
101 | 103 | </code> |
102 | 104 | </div> |
103 | 105 | <h4><font size="+2">Securely decrypt and verify files using |
104 | | - <a href="https://onlykey.io" target="_blank">OnlyKey</a> and <a href="https://keybase.io/kbpgp" target="_blank">Keybase PGP</a></font></h4> |
| 106 | + <a href="https://onlykey.io" target="_blank">OnlyKey</a>, <a href="https://keybase.io/kbpgp" target="_blank">Keybase PGP</a>, and <a href="https://keybase.io/kbpgp" target="_blank">Virtru</a></font></h4> |
105 | 107 | <div id="container"> |
106 | 108 | <fieldset> |
107 | | - <textarea placeholder="Sender's Keybase username or URL to their public pgp key or paste their key..." rows="1" id="pgpkeyurl"></textarea> |
| 109 | + <textarea placeholder="Sender's Keybase username..." rows="1" id="pgpkeyurl"></textarea> |
108 | 110 | <form name="fileform"> |
109 | 111 | <div id="block"> |
| 112 | + <div id="virtru-auth-widget-mount" align="left" style="overflow: hidden; text-overflow: ellipsis; text-align:left; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: left; align-content: left;"> |
| 113 | + <label for="virtru-auth-widget-mount" id="virtru-auth-widget-mount_label">Confirm your email below to decrypt TDF</label> |
| 114 | + </div> |
110 | 115 | <h3>Choose the file to decrypt</h3> |
111 | 116 | <input type="file" id="file" name="file" /><br /> |
112 | 117 | <p id="filedetails"></p> |
@@ -134,7 +139,121 @@ <h3>Console Messages from OnlyKey Appear Below</h3> |
134 | 139 | </code> |
135 | 140 | </pre> |
136 | 141 | </div> |
137 | | -<script type="text/javascript" src="bundle.b4c367785a0f927bb9d4.js"></script></body> |
| 142 | + <script> |
| 143 | + |
| 144 | + |
| 145 | + let client; |
| 146 | + // Start with these hidden until the user selects to expire messages |
| 147 | + document.getElementById('virtru-auth-widget-mount').style.display = "none"; |
| 148 | + document.getElementById('virtru-auth-widget-mount_label').style.display = "none"; |
| 149 | + file = document.getElementById('file'); |
| 150 | + |
| 151 | + file.addEventListener('change', e => { |
| 152 | + console.info(document.getElementById('file').value); |
| 153 | + if (document.getElementById('file').value.includes('.TDF') == true) { |
| 154 | + document.getElementById('virtru-auth-widget-mount').style.display = "initial"; |
| 155 | + document.getElementById('virtru-auth-widget-mount_label').style.display = "initial"; |
| 156 | + } else { |
| 157 | + document.getElementById('virtru-auth-widget-mount').style.display = "none"; |
| 158 | + document.getElementById('virtru-auth-widget-mount_label').style.display = "none"; |
| 159 | + } |
| 160 | + }); |
| 161 | + |
| 162 | + // Run all client code from here. |
| 163 | + // This will only be called when the user is successfully authenticated. |
| 164 | + async function afterAuth(email) { |
| 165 | + |
| 166 | + //TODO Enable Options fields after auth for user to set encrypted file expiration date etc. |
| 167 | + console.info('Virtru email ' + email); |
| 168 | + client = new Virtru.Client({email}); |
| 169 | + console.info('Virtru client ' + client); |
| 170 | + } |
| 171 | + |
| 172 | + // Encrypt or decrypt the file by using the support functions |
| 173 | + async function encryptOrDecryptFile(filedata, thisfilename, shouldEncrypt, completion) { |
| 174 | + if (shouldEncrypt) { |
| 175 | + const encrypted = await encrypt(filedata, thisfilename); |
| 176 | + await encrypted.toFile(thisfilename + '.tdf'); |
| 177 | + } else { |
| 178 | + const decrypted = await decrypt(filedata); |
| 179 | + const finalfilename = buildDecryptFilename(thisfilename).trim(); |
| 180 | + await decrypted.toFile(finalFilename); |
| 181 | + } |
| 182 | + |
| 183 | + if (completion) { |
| 184 | + //completion(); |
| 185 | + } |
| 186 | + } |
| 187 | + |
| 188 | + // Handle filename parsing with parens involved |
| 189 | + function buildDecryptFilename(filename) { |
| 190 | + console.info('buildDecryptFilename'); |
| 191 | + console.info(filename); |
| 192 | + const ext = filename.substr(-4); |
| 193 | + let finalFilename = filename; |
| 194 | + |
| 195 | + if (ext === '.tdf') { |
| 196 | + finalFilename = finalFilename.replace(ext, ''); |
| 197 | + } |
| 198 | + |
| 199 | + finalFilename = finalFilename.replace(/\([^.]*\)$/, ''); |
| 200 | + |
| 201 | + return finalFilename; |
| 202 | + } |
| 203 | + |
| 204 | + // Decrypt the file by creating an object url (for now) and return the stream content |
| 205 | + async function decrypt(fileData) { |
| 206 | + console.info('decrypt'); |
| 207 | + console.info(fileData); |
| 208 | + const decryptParams = new Virtru.DecryptParamsBuilder() |
| 209 | + .withArrayBufferSource(fileData) |
| 210 | + .build(); |
| 211 | + |
| 212 | + const decrypted = await client.decrypt(decryptParams); |
| 213 | + return decrypted; |
| 214 | + } |
| 215 | + |
| 216 | + // Encrypt the filedata and return the stream content and filename |
| 217 | + async function encrypt(fileData, filename) { |
| 218 | + console.info('encrypt'); |
| 219 | + console.info(filename); |
| 220 | + console.info(fileData); |
| 221 | + |
| 222 | + var recipients = document.getElementById('recipient-virtru').value; |
| 223 | + |
| 224 | + if (document.getElementById('expire').checked == true) { |
| 225 | + const policy = new Virtru.PolicyBuilder() |
| 226 | + .enableExpirationDeadlineFromNow((document.getElementById('expire_seconds').value)*3600) |
| 227 | + .build(); |
| 228 | + const encryptParams = new Virtru.EncryptParamsBuilder() |
| 229 | + .withArrayBufferSource(fileData) |
| 230 | + .withPolicy(policy) |
| 231 | + .withUsersWithAccess([recipients]) |
| 232 | + .withDisplayFilename(filename) |
| 233 | + //.withZipFormat() // Generate TDF in zip format |
| 234 | + .build(); |
| 235 | + const enc = await client.encrypt(encryptParams); |
| 236 | + console.info(encryptParams); |
| 237 | + return enc; |
| 238 | + } else { |
| 239 | + const encryptParams = new Virtru.EncryptParamsBuilder() |
| 240 | + .withArrayBufferSource(fileData) |
| 241 | + //.withPolicy(policy) |
| 242 | + .withUsersWithAccess([recipients]) |
| 243 | + .withDisplayFilename(filename) |
| 244 | + //.withZipFormat() // Generate TDF in zip format |
| 245 | + .build(); |
| 246 | + const enc = await client.encrypt(encryptParams); |
| 247 | + console.info(encryptParams); |
| 248 | + return enc; |
| 249 | + } |
| 250 | + } |
| 251 | + |
| 252 | + // Set up the auth widget. |
| 253 | + Virtru.AuthWidget('virtru-auth-widget-mount', {afterAuth}); |
| 254 | + |
| 255 | + </script> |
| 256 | +<script type="text/javascript" src="bundle.54a29c09d8140fc71c64.js"></script></body> |
138 | 257 | <script> |
139 | 258 | window.addEventListener("load", window.initok); |
140 | 259 | </script> |
|
0 commit comments