├── .gitignore
├── LICENSE
├── README.md
├── creator
    ├── .gitignore
    ├── README.md
    ├── index.html
    ├── secret-template.html
    ├── serve.py
    └── values.js
├── examples
    ├── bounty.html
    ├── example-file.html
    ├── example-image.html
    └── example-message.html
├── images
    ├── cryptography.drawio
    └── cryptography.png
└── notes.txt


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Marco Primi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 🔐 Portable Secret
  2 | 
  3 | Better privacy, without special software.
  4 | 
  5 | ## TL;DR;
  6 | 
  7 | Portable Secret is a little hack that allows you to:
  8 | 
  9 |  - Send encrypted messages/images/files over insecure channels (email, messaging, ...)
 10 |  - Store sensitive information (passwords, documents) in insecure locations (web, Cloud drives, USB drives)
 11 | 
 12 | It's portable because: **decrypting these secrets does not require special software!**
 13 | All you need is a browser.
 14 | 
 15 | I created Portable Secret **to securely exchange documents via email with my mother**, who can't be expected to learn [PGP](https://en.wikipedia.org/wiki/Pretty_Good_Privacy), [age](https://github.com/FiloSottile/age), or similar.
 16 | 
 17 | I also use Portable Secret to store some my most sensitive secrets (private keys, 2FA recovery codes, etc.)
 18 | 
 19 | Finally, I use it to store copies of important documents (like a picture of passport). These documents are accessible to me from anywhere, **even if all my trusted devices have been stolen or lost**.
 20 | 
 21 | Sounds too good to be true? Keep reading. This is for you.
 22 | 
 23 | ---
 24 | 
 25 | Portable Secret is not a product and it is barely a project.
 26 | **It is just a neat trick, a *hack***.
 27 | 
 28 | The [source code](https://github.com/mprimi/portable-secret) and [creator tool](https://mprimi.github.io/portable-secret/creator/) are provided as a demonstration.
 29 | 
 30 | **Update January 2023**: [Rocky W.](https://www.rocky.dev/) took this idea and ran with it, creating a beautiful full-fledged product: [PrivacyProtect.dev](https://www.privacyprotect.dev/)
 31 | 
 32 | ---
 33 | 
 34 | ## How it works
 35 | 
 36 | A 'Portable Secret' is simply an HTML file that also contains:
 37 |  - An encrypted payload
 38 |  - Some Javascript that calls into the browser's [Web Cryptography APIs](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)
 39 | 
 40 | Any (reasonably modern) web browser can open the file, even without an internet connection!
 41 | If you know the password, you can recover the secret within.
 42 | 
 43 | [Here's an example](https://mprimi.github.io/portable-secret/examples/example-message.html) (the password is `banana`)
 44 | 
 45 | Notice that the file is self-contained and has no external dependencies!
 46 | It can be carried on a USB drive and decrypted without an internet connection, on any device that has a web browser.
 47 | 
 48 | To understand how it works, go ahead and [create yourself a secret](https://mprimi.github.io/portable-secret/creator/). Download and inspect the generated Portable Secret.
 49 | 
 50 | The embedded code is straightforward:
 51 |  - Take the password and generate a key
 52 |  - Use the key to decrypt the payload
 53 |  - Display the decrypted secret
 54 | 
 55 | ---
 56 | 
 57 | ## How I use Portable Secret
 58 | 
 59 | ### Private communication
 60 | 
 61 | Do you want to communicate privately with people, but you can't expect them to learn how to use PGP?
 62 | 
 63 | Send a Portable Secret. For example as email attachment.
 64 | 
 65 |  > Hey ___, attached to this email is the PDF and data you requested, but it's encrypted. Never double-click on attachments, it's dangerous! Give me a call when you get this, and I'll show you how to read it.
 66 | 
 67 | Whenever they call me, I tell them:
 68 |  > Right-click on the attachment and 'Open with...' any browser.
 69 |  > The password is 'banana_split'.
 70 |  > Now you can save the decrypted PDF.
 71 | 
 72 | ### Store top-level secrets
 73 | 
 74 | Some secrets don't belong in your password manager. Things like backup private keys, 2FS recovery keys, wallet keys, safe combinations, treasure maps, etc.
 75 | 
 76 | Using Portable Secret, I can keep copies of these critical keys all over the place (Cloud drives, USB drives, all my devices, etc).
 77 | 
 78 | Even if some of these copies end up stolen (e.g. I lose a USB stick), I am not concerned anyone will be able to recover the secrets within.
 79 | 
 80 | The passwords are long sequence of words that are trivial for me to remember (thanks to the hints provided), but impossible for anyone else to guess or crack.
 81 | 
 82 | ### Emergency documents on the go
 83 | 
 84 | Have you ever gotten stranded in a foreign country without any of your devices or documents? It's not fun.
 85 | 
 86 | I keep a copy of my passport encrypted on the internet. It's just an HTML file, it's easy to host. If I find myself stranded again, I can use any computer/device to retrieve it.
 87 | 
 88 | [Here's an example of ID document safely encrypted in plain sight](https://mprimi.github.io/portable-secret/examples/example-image.html).
 89 | 
 90 | ---
 91 | 
 92 | ## Cryptography
 93 | 
 94 | The following is a schematic representation of the encryption scheme implemented by the PortableSecret creator, as well as the decryption happening in the  PortableSecret itself.
 95 | 
 96 | ![Cryptography](./images/cryptography.png)
 97 | 
 98 | This scheme and its parameters follow best practices and guidelines recommended by [NIST](https://www.nist.gov/cryptography) and [OWASP](https://owasp.org).
 99 | 
100 | ### Encryption
101 | 
102 | [`AES-GCM`](https://en.wikipedia.org/wiki/Galois/Counter_Mode) is used for Symmetric Authenticated Encryption.
103 | 
104 |  - Symmetric because the same key is used to encrypt and decrypt
105 |  - *Authenticated* because it can verify the message **integrity** (if the ciphertext is tampered with, then it will fail to decrypt. As opposed to producing an invalid plaintext)
106 | 
107 | ### Key derivation
108 | 
109 | [`PBKDF2`](https://en.wikipedia.org/wiki/PBKDF2) is used to turn a text password into an AES key.
110 | The purpose of this module is slowing down dictionary-based brute-force attacks.
111 | 
112 | Unfortunately, the Web Crypto APIs do not support stronger KDFs such as [`scrypt`](https://en.wikipedia.org/wiki/Scrypt), [`bcrypt`](https://en.wikipedia.org/wiki/Bcrypt), or [Argon2](https://en.wikipedia.org/wiki/Argon2).
113 | 
114 | ---
115 | 
116 | ## Bounty: Crack me if you can
117 | 
118 | Do you think this cannot possibly be secure? Great, prove it.
119 | 
120 | [This secret](https://mprimi.github.io/portable-secret/examples/bounty.html) contains the recovery key for a Bitcoin wallet. Crack it and take my money!
121 | 
122 | ---
123 | 
124 | ## Miscellaneous
125 | 
126 | ### Choosing a good password
127 | 
128 | Choosing a strong-enough password is key (pun intended).
129 | 
130 | Eventually I'll fill in this paragraph. For now all you get is the obligatory XKCD: [correct-horse-battery-staple](https://xkcd.com/936/)
131 | 
132 | ### On tools
133 | 
134 | Portable Secret is a *tool*. As such, it can be used *wrong* (e.g. weak password), or used to do bad things (e.g., exfiltrate intellectual property).
135 | 
136 | I cannot take responsibility for such misuse any more than a hammer manufacturer can take responsibility for me hammering my thumb, or using the hammer to attack someone.
137 | 
138 | ### Prior art
139 | 
140 | I came up with Portable Secret on my own, but I have since found a few projects that do something similar.
141 | 
142 | [StatiCrypt](https://github.com/robinmoisson/staticrypt)
143 | 
144 | [PolySafe](https://github.com/fmeum/polysafe)
145 | 
146 | [`hscrypt`](https://smondet.gitlab.io/hscrypt/)
147 | 
148 | [Hypervault](http://hypervault.github.io)
149 | 
150 | [Encrypted HTML Vault](https://github.com/ccorcos/encrypted-html-vault)
151 | 
152 | [UltraCrypt](https://9p4.github.io/hackna/)
153 | 
154 | [html-vault](https://github.com/dividuum/html-vault)
155 | 
156 | [Password Protect My File](https://github.com/louissobel/ppmf)
157 | 
158 | [Emergency Contacts](https://github.com/jwillmer/emergency-contacts)
159 | 
160 | [Digi-Cloak](https://github.com/kaushalmeena/digi-cloak)
161 | 
162 | [Pretty Easy Privacy](https://prettyeasyprivacy.xyz/)
163 | 
164 | If you are aware of other similar/related projects, please let me know and I'll link them here.
165 | 
166 | ### Feedback
167 | 
168 | I would love to hear what you think of this project, good, bad, or ugly.
169 | 
170 | Please use [GH issue](https://github.com/mprimi/portable-secret/issues) to report a problems and make suggestions. For everything else, start a [GH Discussion](https://github.com/mprimi/portable-secret/discussions).
171 | 
172 | You can also find my email on my homepage (linked from my GH profile).
173 | 
174 | Or discuss on [HackerNews](https://news.ycombinator.com/item?id=34083366)
175 | 
176 | ## References
177 | 
178 | https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API
179 | 
180 | https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html
181 | 
182 | https://cheatsheetseries.owasp.org/cheatsheets/Cryptographic_Storage_Cheat_Sheet.html
183 | 
184 | https://en.wikipedia.org/wiki/Galois/Counter_Mode
185 | 
186 | https://nvlpubs.nist.gov/nistpubs/Legacy/SP/nistspecialpublication800-38d.pdf
187 | 
188 | https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs
189 | 


--------------------------------------------------------------------------------
/creator/.gitignore:
--------------------------------------------------------------------------------
1 | cert.crt
2 | private.key
3 | 


--------------------------------------------------------------------------------
/creator/README.md:
--------------------------------------------------------------------------------
 1 | # Portable Secret Creator
 2 | 
 3 | Creator could be embedded in a single HTML file with inlined Javascript, and be portable.
 4 | 
 5 | However this has some issues:
 6 |  - Inlining all JS requires 2 levels of escaping, making it hard to modify/maintain those files
 7 |  - Some browsers disable `window.crypto` on local files and non-TLS servers
 8 | 
 9 | So the easiest way to run the creator locally is:
10 | 
11 | ```
12 | openssl req -new -newkey rsa:4096 -x509 -sha256 -days 365 -nodes -out cert.crt -keyout private.key
13 | 
14 | python3 serve.py
15 | ```
16 | 
17 | Then visit https://127.0.0.1:8443/index.html
18 | 
19 | Notice that some browsers are not happy with the self-signed certificate.
20 | 
21 | All of this is just for local development.
22 | You can use the creator at: https://mprimi.github.io/portable-secret/creator/ or host it on your own (HTTPS) server.
23 | 


--------------------------------------------------------------------------------
/creator/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8" />
  5 |   <style>
  6 |     body {
  7 |       background-color: lavender;
  8 |       font-size: large;
  9 |       margin: 50px;
 10 |     }
 11 | 
 12 |     div {
 13 |       margin: 5px;
 14 |     }
 15 | 
 16 |     button {
 17 |       font-size: large;
 18 |       padding: 12px 20px;
 19 |     }
 20 | 
 21 |     input {
 22 |       font-family: monospace;
 23 |       font-size: large;
 24 |     }
 25 | 
 26 |     textarea {
 27 |       font-family: monospace;
 28 |       font-size: large;
 29 |     }
 30 | 
 31 |     a.download_link {
 32 |       font-size: xx-large;
 33 |     }
 34 |   </style>
 35 |   <script>
 36 |   const blockSize = 16 // bytes (for AES, IV)
 37 |   const saltSize = 32 // bytes (for PBKDF2)
 38 |   const minIterations = 1000000 // will reject a number below this (for PBKDF2)
 39 |   const keySize = 32 // bytes (derived with PBKDF2, used by AES)
 40 | 
 41 |   const inputElementIds = {
 42 |     "message": "text_input_div",
 43 |     "image": "image_input_div",
 44 |     "file": "file_input_div",
 45 |   }
 46 | 
 47 |   let selectedInputType = ""
 48 | 
 49 |   async function init() {
 50 |     await refreshSalt()
 51 |     await refreshIV()
 52 |     await refreshIterations()
 53 |     setMessage("Select secret type: message, image, or file")
 54 |   }
 55 | 
 56 |   async function encrypt() {
 57 | 
 58 |     // All cryptography is delegated to the browser engine through.
 59 |     // W3C Web Cryptography API standard
 60 |     // https://www.w3.org/TR/WebCryptoAPI/
 61 |     // No cryptography was hand-rolled in the making of this tool. ;-)
 62 | 
 63 |     setMessage("⏳ Importing key...")
 64 | 
 65 |     // Whatever array of bytes is in the password field
 66 |     let password = new TextEncoder().encode(document.getElementById("password").value)
 67 | 
 68 |     if (password.length == 0) {
 69 |       throw new Error(`Empty password`)
 70 |     }
 71 | 
 72 |     // Import password into a Key suitable for use with Cryptography APIs
 73 |     let passwordKey = await window.crypto.subtle.importKey(
 74 |       "raw",  // a puny array of bytes
 75 |       password,
 76 |       {name: "PBKDF2"}, // What will use this key
 77 |       false, // key is not extractable
 78 |       ["deriveKey"] // What they can use it for
 79 |     )
 80 | 
 81 |     setMessage("⏳ Deriving key from password...")
 82 | 
 83 |     // Salt input field (0x string)
 84 |     let saltHexString = document.getElementById("salt").value
 85 | 
 86 |     // Salt for password derivation with PBKDF2 (byte array)
 87 |     let salt = hexStringToBytes(saltHexString)
 88 | 
 89 |     if (salt.length != saltSize) {
 90 |       throw new Error(`Unexpected salt length: ${salt.length}`)
 91 |     }
 92 | 
 93 |     // Salt for password derivation with PBKDF2 (byte array)
 94 |     let iterations = document.getElementById("iterations").value
 95 | 
 96 |     if (iterations < minIterations) {
 97 |       throw new Error(`Number of PBKDF2 iteration is below minimum recommended: ${minIterations}`)
 98 |     }
 99 | 
100 |     // 'Strech' a password into a cryptographically secure key of a given size
101 |     let key = await window.crypto.subtle.deriveKey(
102 |       {
103 |         name: "PBKDF2", // https://en.wikipedia.org/wiki/PBKDF2
104 |         salt: salt, // for flavor
105 |         iterations: iterations, // how long to stomp on the password
106 |         hash: "SHA-256", // Hash function, blessed by NIST
107 |       },
108 |       passwordKey, // Wrapped password
109 |       {
110 |         name: "AES-GCM", // What is this key for
111 |         length: keySize * 8 // key size in bits
112 |       },
113 |       false, // key is not extractable
114 |       ["encrypt"]
115 |     )
116 | 
117 |     setMessage("⏳ Preparing inputs...")
118 | 
119 |     // IV input field (0x string)
120 |     let ivHexString = document.getElementById("iv").value
121 | 
122 |     // IV for AES
123 |     let iv = hexStringToBytes(ivHexString)
124 | 
125 |     if (iv.length != blockSize) {
126 |       throw new Error(`Unexpected IV length: ${iv.length}`)
127 |     }
128 | 
129 |     let plainText = new Uint8Array()
130 |     let fileExtension = ""
131 |     // TODO move this messy stuff out of encrypt path
132 |     // TODO handle files with no extension (currently captures full filename as extension)
133 |     // TODO file and image are identical except for input field
134 |     if (selectedInputType == '') {
135 |       throw new Error(`Select input type (message, file, image)`)
136 |     } else if (selectedInputType == 'message') {
137 |       // Message input field, as array of bytes
138 |       plainText = new TextEncoder().encode(document.getElementById("text_input").value);
139 |     } else if (selectedInputType == 'image') {
140 |       files = document.getElementById("image_input").files
141 |       if (files.length < 1) {
142 |         throw new Error(`No file selected`)
143 |       }
144 |       f = files[0]
145 |       fileContent = await f.arrayBuffer()
146 |       plainText = new Uint8Array(fileContent)
147 |       fileExtension = f.name.split(".").pop()
148 |     } else if (selectedInputType == 'file') {
149 |       files = document.getElementById("file_input").files
150 |       if (files.length < 1) {
151 |         throw new Error(`No file selected`)
152 |       }
153 |       f = files[0]
154 |       fileContent = await f.arrayBuffer()
155 |       plainText = new Uint8Array(fileContent)
156 |       fileExtension = f.name.split(".").pop()
157 |     } else {
158 |       throw new Error(`Unhandled input type: '${selectedInputType}'`)
159 |     }
160 | 
161 |     if (plainText.length <= 0) {
162 |       throw new Error(`Plaintext is empty`)
163 |     }
164 | 
165 |     // Pad plaintext to block size, as describe in:
166 |     // https://en.wikipedia.org/wiki/Padding_(cryptography)#PKCS#5_and_PKCS#7
167 |     plaintText = function(input) {
168 |       output = []
169 |       padAmount = blockSize - (input.length % blockSize)
170 |       for (var i = 0; i < input.length; i++) {
171 |         output.push(input[i])
172 |       }
173 |       for (var i = 0; i < padAmount; i++) {
174 |         output.push(padAmount)
175 |       }
176 |       return Uint8Array.from(output);
177 |     }(plainText)
178 | 
179 |     setMessage("⏳ Encrypting...")
180 | 
181 |     // Encrypt with AES in 'Galois/Counter Mode' (integrity + confidentiality)
182 |     // https://en.wikipedia.org/wiki/Galois/Counter_Mode
183 |     let cipherBuffer = await window.crypto.subtle.encrypt(
184 |       {
185 |         name: "AES-GCM",
186 |         iv: iv,
187 |       },
188 |       key,
189 |       plaintText
190 |     )
191 |     let cipherHexString = bytesToHexString(new Uint8Array(cipherBuffer))
192 | 
193 |     return {
194 |       salt: saltHexString,
195 |       iv: ivHexString,
196 |       iterations: iterations,
197 |       cipher: cipherHexString,
198 |       extension: fileExtension,
199 |     }
200 |   }
201 | 
202 |   async function createSecret() {
203 | 
204 |     setMessage("⏳ Creating Secret...")
205 | 
206 |     async function loadTemplate(name) {
207 |       response = await fetch("./" + name)
208 |       if (!response.ok) {
209 |         throw new Error(`Failed to retrieve: ${name} response: ${response.status}`)
210 |       }
211 |       return await response.text()
212 |     }
213 | 
214 |     try {
215 | 
216 |       setMessage("⏳ Begin encryption...")
217 | 
218 |       // Return salt IV cipher as hex strings
219 |       let encryption = await encrypt()
220 |       document.getElementById("cipher").innerHTML = encryption.cipher //0x string
221 | 
222 |       setMessage("⏳ Retrieving templates...")
223 | 
224 |       const pageTemplate = await loadTemplate("secret-template.html")
225 |       const valuesTemplate = await loadTemplate("values.js")
226 | 
227 |       const passwordHint = document.getElementById("password_hint").value
228 | 
229 |       setMessage("⏳ Generating download blob...")
230 | 
231 |       values = valuesTemplate
232 |       values = values.replaceAll("'{.SALT_SIZE}'", saltSize)
233 |       values = values.replaceAll("'{.BLOCK_SIZE}'", blockSize)
234 |       values = values.replaceAll("'{.KEY_SIZE}'", keySize)
235 |       values = values.replaceAll("'{.ITERATIONS}'", encryption.iterations)
236 |       values = values.replaceAll("'{.SALT_HEX}'", encryption.salt)
237 |       values = values.replaceAll("'{.IV_HEX}'", encryption.iv)
238 |       values = values.replaceAll("'{.CIPHER_HEX}'", encryption.cipher)
239 |       values = values.replaceAll("'{.SECRET_TYPE}'", selectedInputType)
240 |       values = values.replaceAll("'{.SECRET_EXTENSION}'", encryption.extension)
241 | 
242 |       secretPage = pageTemplate
243 |       secretPage = secretPage.replaceAll("{{PASSWORD_HINT}}", passwordHint)
244 |       secretPage = secretPage.replaceAll("{{VALUES}}", values)
245 | 
246 |       var blob = new Blob([secretPage], {'type':'text/html'});
247 |       document.getElementById("target_link").setAttribute("href", window.URL.createObjectURL(blob))
248 |       document.getElementById("target_link").hidden = false
249 | 
250 |       setMessage("✅ Ready for download")
251 | 
252 |       // To avoid unintentional Salt & IV reuse,
253 |       // pick new ones after each secret is created
254 |       await refreshIV()
255 |       await refreshSalt()
256 | 
257 |     } catch (err) {
258 |       setMessage("❌ " + err)
259 |     }
260 |   }
261 | 
262 |   async function setMessage(newMessage) {
263 |     document.getElementById("errormsg").innerHTML = newMessage
264 |   }
265 | 
266 |   async function refreshSalt() {
267 |     let salt = crypto.getRandomValues(new Uint8Array(saltSize));
268 |     document.getElementById("salt").value = bytesToHexString(salt)
269 |     setMessage("Refreshed salt")
270 |   }
271 | 
272 |   async function refreshIV() {
273 |     let iv = crypto.getRandomValues(new Uint8Array(blockSize));
274 |     document.getElementById("iv").value = bytesToHexString(iv)
275 |     setMessage("Refreshed IV")
276 |   }
277 | 
278 |   async function refreshIterations() {
279 |     // N.B. This random number does not need to be cryptographically strong
280 |     // Round numbers such as 1M are more likely to have tables available.
281 |     // So just to make it a little harder, pick a slightly higher number.
282 |     maxExtra = 1000000
283 |     let r = crypto.getRandomValues(new Uint16Array(1))[0]
284 |     i = minIterations + (r % maxExtra)
285 |     document.getElementById("iterations").value = i
286 |     setMessage("Refreshed iterations count")
287 |   }
288 | 
289 |   function bytesToHexString(input) {
290 |     for (var hex = [], i = 0; i < input.length; i++) {
291 |       var current = input[i] < 0 ? input[i] + 256 : input[i];
292 |       hex.push((current >>> 4).toString(16));
293 |       hex.push((current & 0xF).toString(16));
294 |     }
295 |     return hex.join("");
296 |   }
297 | 
298 |   function hexStringToBytes(input) {
299 |     // TODO accepts invalid (non-hex) values, e.g. ZZZZ
300 |     for (var bytes = [], c = 0; c < input.length; c += 2) {
301 |       bytes.push(parseInt(input.substr(c, 2), 16));
302 |     }
303 |     return Uint8Array.from(bytes);
304 |   }
305 | 
306 |   function setInputType(selectedType) {
307 |     selectedInputType = selectedType;
308 | 
309 |     for (let type in inputElementIds) {
310 |       let element = document.getElementById(inputElementIds[type])
311 |       if (type == selectedType) {
312 |         element.hidden = false
313 |       } else {
314 |         element.hidden = true
315 |       }
316 |     }
317 | 
318 |     setMessage("Ready to encrypt 👍")
319 |   }
320 | 
321 |   </script>
322 | </head>
323 | <body onload="init()">
324 |   <h1><a href="https://mprimi.github.io/portable-secret/">Portable Secret</a>: Secret Creator</h1>
325 |   <p>
326 |     This tool runs entirely in your browser window. <strong>The secret never leaves your computer!</strong><br>
327 |     But don't take my word for it. Check out the <a href="https://github.com/mprimi/portable-secret/tree/main/creator" target="_blank">source code</a>!
328 |   </p>
329 | 
330 |   <div>
331 |     Password:<br>
332 |     <input type="text" id="password" value="banana" required>
333 |   </div>
334 | 
335 | 
336 |   <div>
337 |     Password hint:<br>
338 |     <textarea rows="8" cols="80" id="password_hint" required>A yellow elongated fruit (technically a berry!)
339 | 6 letters, all lowercase.</textarea>
340 |   </div>
341 | 
342 |   <!-- Radio selector for type of secret -->
343 | 
344 |   <p>Secret type:</p>
345 |   <form>
346 |     <input type="radio" id="text_option" name="input_type" value="message" onclick="setInputType('message')">
347 |     <label for="text_option">Message</label>
348 |     <input type="radio" id="image_option" name="input_type" value="image" onclick="setInputType('image')">
349 |     <label for="image_option">Image</label>
350 |     <input type="radio" id="file_option" name="input_type" value="file" onclick="setInputType('file')">
351 |     <label for="file_option">File</label>
352 |   </form>
353 | 
354 |   <!-- Input types, only one visible at time -->
355 | 
356 |   <div id="text_input_div" hidden>
357 |     <h2>📝 Secret message</h2>
358 |     <textarea rows="16" cols="80" id="text_input" name="text_content"></textarea>
359 |   </div>
360 |   <div id="image_input_div" hidden>
361 |     <h2>🌆 Secret image</h2>
362 |     <input type="file" id="image_input" alt="Upload" name="image_content" accept="image/*">
363 |   </div>
364 |   <div id="file_input_div" hidden>
365 |     <h2>📎 Secret File</h2>
366 |     <input type="file" id="file_input" name="file_content">
367 |   </div>
368 | 
369 |   <!-- Generate button, and Download link -->
370 | 
371 |   <p><p>
372 |   <div>
373 |     <button type="button" onclick='createSecret()'>⚡️ Generate secret</button>
374 |     <span id="errormsg"></span>
375 |   </div>
376 |   <div>
377 |     <a id="target_link" class="download_link" download="secret.html" hidden>Save secret.html</a>
378 |   </div>
379 | 
380 |   <!-- Show "advanced" inputs and outputs -->
381 | 
382 |   <br>
383 |   <details>
384 |     <summary>Show more</summary>
385 |     <p>⚠️ Don't modify these settings unless you know what you are doing</p>
386 |     <div>
387 |       Salt: 0x
388 |       <input type="text" id="salt" size="33" value="❓" required>
389 |       <input type="button" value="🔄" onclick='refreshSalt()'>
390 |       <br>
391 |       IV: 0x
392 |       <input type="text" id="iv" size="33" value="❓" required>
393 |       <input type="button" value="🔄" onclick='refreshIV()'>
394 |       <p><small><i>Salt and IV are random input coming straight from your browser's Random Number Generator. Do not reuse across messages.</i></small></p>
395 |     </div>
396 |     <div>
397 |       PBKDF2 iterations:
398 |       <input id="iterations" type="number" value="1000000" required>
399 |       <input type="button" value="🔄" onclick='refreshIterations()'>
400 |       <p><small><i>Higher iteration count slow down key generation, making dictionary-based attack harder.</i></small></p>
401 |     </div>
402 |     <div>
403 |       Ciphertext:
404 |       <br>
405 |       <textarea rows="8" cols="80" id="cipher"></textarea>
406 |     </div>
407 |   </details>
408 | </body>
409 | </html>
410 | 


--------------------------------------------------------------------------------
/creator/secret-template.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!--
  3 | Portable Secret generated with https://mprimi.github.io/portable-secret/
  4 | 
  5 | This file is self-contained, it embeds an encrypted payload.
  6 | It uses your browser's cryptograpy APIs to decrypt it, if you know the password.
  7 | -->
  8 | <html>
  9 | <head>
 10 |   <meta charset="UTF-8" />
 11 |   <style>
 12 |   body {
 13 |     background-color: floralwhite;
 14 |     font-size: large;
 15 |     margin: 50px;
 16 |   }
 17 | 
 18 |   div {
 19 |     margin: 5px;
 20 |   }
 21 | 
 22 |   pre {
 23 |     padding: 5px;
 24 |     white-space: pre-wrap;
 25 |     word-break: keep-all;
 26 |   }
 27 | 
 28 |   button {
 29 |     font-size: large;
 30 |     padding: 12px 20px;
 31 |   }
 32 | 
 33 |   input {
 34 |     font-family: monospace;
 35 |   }
 36 | 
 37 |   textarea {
 38 |     font-family: monospace;
 39 |   }
 40 | 
 41 |   .decrypted {
 42 |     background-color: palegreen;
 43 |     border: 2px dotted forestgreen;
 44 |   }
 45 | 
 46 |   .hint {
 47 |     background-color: lavender;
 48 |     border: 2px dashed black;
 49 |   }
 50 | 
 51 |   /*
 52 |   pre.decrypted {
 53 |   }
 54 |   */
 55 | 
 56 |   img.decrypted {
 57 |     padding: 12px 20px;
 58 |   }
 59 | 
 60 |   a.decrypted {
 61 |     font-size: xx-large;
 62 |   }
 63 | 
 64 |   input.password_input {
 65 |     font-size: large;
 66 |     padding: 12px 20px;
 67 |   }
 68 |   </style>
 69 |   <script>
 70 |   // Display the encryption inputs on the page (invoked during body onload)
 71 |   async function init() {
 72 |     document.getElementById("secret_type").innerHTML = secretType
 73 |     document.getElementById("salt").setAttribute("value", saltHex)
 74 |     document.getElementById("iv").setAttribute("value", ivHex)
 75 |     document.getElementById("cipher").innerHTML = cipherHex
 76 | 
 77 |     if (secretType == 'file') {
 78 |       document.getElementById("target_file").innerHTML = `Download file.${secretExt}`
 79 |     }
 80 | 
 81 |     document.getElementById("password").addEventListener("keydown", (event) => {
 82 |       // Decrypt when the user hits the Enter key after entering their password.
 83 |       if (event.key === "Enter") {
 84 |         decrypt();
 85 |       }
 86 |     })
 87 |   }
 88 | 
 89 |   // Invoked when the 'Decrypt' button is pressed
 90 |   async function decrypt() {
 91 |     try {
 92 |       setMessage("Generating key from password...")
 93 | 
 94 |       // Load salt, convert hex string to byte array
 95 |       let salt = hexStringToBytes(saltHex)
 96 |       if (salt.length != saltSize) {
 97 |         throw new Error(`Unexpected salt size: ${salt.length}`)
 98 |       }
 99 | 
100 |       // Load IV, convert hex string to byte array
101 |       let iv = hexStringToBytes(ivHex)
102 |       if (iv.length != blockSize) {
103 |         throw new Error(`Unexpected IV size: ${iv.length}`)
104 |       }
105 | 
106 |       // Load password, as byte array
107 |       let password = new TextEncoder().encode(document.getElementById("password").value)
108 |       if (password.length == 0) {
109 |         throw new Error(`Empty password`)
110 |       }
111 | 
112 |       // Wrap password into a Key object, as required by cryptography APIs
113 |       let passwordKey = await window.crypto.subtle.importKey(
114 |         "raw", // Array of bytes
115 |         password,
116 |         {name: "PBKDF2"}, // What algorithm uses the key
117 |         false, // Cannot be extracted
118 |         ["deriveKey"] // What the key is used for
119 |       )
120 | 
121 |       // Derive a key from the password, using PBKDF2
122 |       let key = await window.crypto.subtle.deriveKey(
123 |         {
124 |           name: "PBKDF2", // https://en.wikipedia.org/wiki/PBKDF2
125 |           salt: salt,
126 |           iterations: iterations,
127 |           hash: "SHA-256", // Hash function, blessed by NIST
128 |         },
129 |         passwordKey, // Wrapped password
130 |         {
131 |           name: "AES-GCM", // What algorithm uses the key
132 |           length: keySize * 8, // Key bitsize
133 |         },
134 |         false, // Cannot be extracted
135 |         ["decrypt"] // What the derived key is used for
136 |       )
137 | 
138 |       setMessage("Decrypting...")
139 | 
140 |       // Load ciphertext, convert hex string to byte array
141 |       let cipher = hexStringToBytes(cipherHex)
142 | 
143 |       // Decrypt with AES-GCM
144 |       // https://en.wikipedia.org/wiki/Galois/Counter_Mode
145 |       let decryptedBuffer = await window.crypto.subtle.decrypt(
146 |         {
147 |           name: "AES-GCM", // Name of block cipher algorithm
148 |           iv: iv, // Initialization vector
149 |         },
150 |         key, // Derived key
151 |         cipher // Ciphertext
152 |       )
153 | 
154 |       // Remove padding (added as necessary for block cipher)
155 |       // https://en.wikipedia.org/wiki/Padding_(cryptography)#PKCS#5_and_PKCS#7
156 |       decrypted = removePadding(new Uint8Array(decryptedBuffer))
157 | 
158 |       // Render decrypted payload on the page
159 |       if (secretType == "message") {
160 |         // Decode bytes to UTF-8
161 |         plainText = new TextDecoder().decode(decrypted)
162 |         // Display the plaintext on the page
163 |         document.getElementById("target_text").innerHTML = plainText
164 |         document.getElementById("text_output_div").hidden = false
165 |       } else if (secretType == "image") {
166 |         // Transform image to base64 string
167 |         b64Data = btoa(decrypted.reduce((data, byte) => data + String.fromCharCode(byte), ''))
168 |         // Create 'data' URI
169 |         // https://en.wikipedia.org/wiki/Data_URI_scheme
170 |         const imageData = `data:image/${secretExt};base64,${b64Data}`
171 |         // Display image inline
172 |         document.getElementById("target_image").setAttribute("src", imageData)
173 |         document.getElementById("image_output_div").hidden = false
174 |       } else if (secretType == "file") {
175 |         // Transform image to base64 string
176 |         b64Data = btoa(decrypted.reduce((data, byte) => data + String.fromCharCode(byte), ''))
177 |         // Create 'data' URI
178 |         // https://en.wikipedia.org/wiki/Data_URI_scheme
179 |         const fileData = `data:application/octet-stream;base64,${b64Data}`
180 |         // Activate download link
181 |         document.getElementById("target_file").setAttribute("href", fileData)
182 |         document.getElementById("target_file").setAttribute("download", `file.${secretExt}`)
183 |         document.getElementById("file_output_div").hidden = false
184 |       } else {
185 |         throw new Error(`Unknown secret type: ${secretType}`)
186 |       }
187 | 
188 |       setMessage("Decrypted successfully")
189 | 
190 |     } catch (err) {
191 |       // TODO better handle failing promises
192 |       setMessage(`Decryption failed: ${err}`)
193 |       return
194 |     }
195 |   }
196 | 
197 |   // Transform hexadecimal string to Uint8Array
198 |   function hexStringToBytes(input) {
199 |     for (var bytes = [], c = 0; c < input.length; c += 2) {
200 |       bytes.push(parseInt(input.substr(c, 2), 16));
201 |     }
202 |     return Uint8Array.from(bytes);
203 |   }
204 | 
205 |   // The cleartext input must be padded to a multiple of the block size
206 |   // for encryption. This function removes the padding, expected to be
207 |   // compatible with PKCS#7 described in RFC 5652.
208 |   // https://en.wikipedia.org/wiki/Padding_(cryptography)#PKCS#5_and_PKCS#7
209 |   function removePadding(input) {
210 |     // Last byte is the amount of padding
211 |     padAmount = input[input.length-1]
212 |     unpaddedSize = input.length - padAmount
213 |     return input.slice(0, unpaddedSize)
214 |   }
215 | 
216 |   // Update page with status of decryption
217 |   function setMessage(msg) {
218 |     document.getElementById("errormsg").innerHTML = msg
219 |   }
220 | 
221 |   </script>
222 | </head>
223 | <body onload="init()">
224 | 
225 |   <h1>This page contains a secret <span id="secret_type"></span></h1>
226 |   <h2>Enter the password to decrypt it</h2>
227 |   <h3>Created with <a href="https://mprimi.github.io/portable-secret/">Portable Secret</a></h3>
228 | 
229 |   <p>
230 |     This file contains a secret (message, file, or image) that can be recovered if you know the password.<br>
231 |     The secret can be decrypted without an internet connection, this file has no dependencies and no data leaves the browser window.
232 |   </p>
233 | 
234 |   <div>
235 |     <h4>Password hint:</h4>
236 |     <pre class="hint">{{PASSWORD_HINT}}</pre>
237 |   </div>
238 | 
239 |   <div>
240 |     <h4>Password:</h4>
241 |     <input type="text" id="password" placeholder="See hint above" class="password_input" required>
242 |   </div>
243 | 
244 |   <div>
245 |     <button type="button" onclick='decrypt()'>Decrypt</button>
246 |     <span id="errormsg"></span>
247 |   </div>
248 | 
249 |   <div id="text_output_div" hidden>
250 |     <pre id="target_text" class="decrypted"></pre>
251 |   </div>
252 | 
253 |   <div id="image_output_div" hidden>
254 |     <img id="target_image" class="decrypted">
255 |   </div>
256 | 
257 |   <div id="file_output_div" hidden>
258 |     <a id="target_file" class="decrypted">Download</a>
259 |   </div>
260 | 
261 |   <details>
262 |     <summary>Details</summary>
263 | 
264 |     These are decryption inputs, that can be safely transmitted in the clear.
265 |     Without the correct password, they are useless.
266 | 
267 |     <div>
268 |       Salt:
269 |       <input type="text" id="salt" value="" readonly>
270 |     </div>
271 | 
272 |     <div>
273 |       IV:
274 |       <input type="text" id="iv" value="" readonly>
275 |     </div>
276 | 
277 |     <div>
278 |       Ciphertext:<br>
279 |       <textarea rows="8" cols="80" id="cipher" readonly></textarea>
280 |     </div>
281 |   </details>
282 | </body>
283 | <script>
284 | {{VALUES}}
285 | </script>
286 | </html>
287 | 


--------------------------------------------------------------------------------
/creator/serve.py:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/python
 2 | 
 3 | 
 4 | # Modified version of:
 5 | # https://gist.github.com/SeanPesce/af5f6b7665305b4c45941634ff725b7a
 6 | 
 7 | import http.server
 8 | import ssl
 9 | import sys
10 | 
11 | host = "0.0.0.0"
12 | port = 8443
13 | # See README in this directory for instructions to generate certificate and key
14 | cert = "./cert.crt"
15 | key = "./private.key"
16 | 
17 | if __name__ == '__main__':
18 |     context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)
19 |     context.load_cert_chain(certfile=cert, keyfile=key, password='')
20 |     server_address = (host, port)
21 |     httpd = http.server.HTTPServer(server_address, http.server.SimpleHTTPRequestHandler)
22 |     httpd.socket = context.wrap_socket(httpd.socket, server_side=True)
23 |     print(f"https://localhost:{port}")
24 |     httpd.serve_forever()
25 | 


--------------------------------------------------------------------------------
/creator/values.js:
--------------------------------------------------------------------------------
 1 | const secretType = "'{.SECRET_TYPE}'"
 2 | const secretExt  = "'{.SECRET_EXTENSION}'"
 3 | const saltSize   = '{.SALT_SIZE}'  // bytes
 4 | const blockSize  = '{.BLOCK_SIZE}' // bytes
 5 | const keySize    = '{.KEY_SIZE}'   // bytes
 6 | const iterations = '{.ITERATIONS}'
 7 | const saltHex    = "'{.SALT_HEX}'"
 8 | const ivHex      = "'{.IV_HEX}'"
 9 | const cipherHex  = "'{.CIPHER_HEX}'"
10 | 


--------------------------------------------------------------------------------
/examples/bounty.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!--
  3 | Portable Secret generated with https://mprimi.github.io/portable-secret/
  4 | 
  5 | This file is self-contained, it embeds an encrypted payload.
  6 | It uses your browser's cryptograpy APIs to decrypt it, if you know the password.
  7 | -->
  8 | <html>
  9 | <head>
 10 |   <meta charset="UTF-8" />
 11 |   <style>
 12 |   body {
 13 |     background-color: floralwhite;
 14 |     font-size: large;
 15 |     margin: 50px;
 16 |   }
 17 | 
 18 |   div {
 19 |     margin: 5px;
 20 |   }
 21 | 
 22 |   pre {
 23 |     padding: 5px;
 24 |     white-space: pre-wrap;
 25 |     word-break: keep-all;
 26 |   }
 27 | 
 28 |   button {
 29 |     font-size: large;
 30 |     padding: 12px 20px;
 31 |   }
 32 | 
 33 |   input {
 34 |     font-family: monospace;
 35 |   }
 36 | 
 37 |   textarea {
 38 |     font-family: monospace;
 39 |   }
 40 | 
 41 |   .decrypted {
 42 |     background-color: palegreen;
 43 |     border: 2px dotted forestgreen;
 44 |   }
 45 | 
 46 |   .hint {
 47 |     background-color: lavender;
 48 |     border: 2px dashed black;
 49 |   }
 50 | 
 51 |   /*
 52 |   pre.decrypted {
 53 |   }
 54 |   */
 55 | 
 56 |   img.decrypted {
 57 |     padding: 12px 20px;
 58 |   }
 59 | 
 60 |   a.decrypted {
 61 |     font-size: xx-large;
 62 |   }
 63 | 
 64 |   input.password_input {
 65 |     font-size: large;
 66 |     padding: 12px 20px;
 67 |   }
 68 |   </style>
 69 |   <script>
 70 |   // Display the encryption inputs on the page (invoked during body onload)
 71 |   async function init() {
 72 |     document.getElementById("secret_type").innerHTML = secretType
 73 |     document.getElementById("salt").setAttribute("value", saltHex)
 74 |     document.getElementById("iv").setAttribute("value", ivHex)
 75 |     document.getElementById("cipher").innerHTML = cipherHex
 76 | 
 77 |     if (secretType == 'file') {
 78 |       document.getElementById("target_file").innerHTML = `Download file.${secretExt}`
 79 |     }
 80 | 
 81 |     document.getElementById("password").addEventListener("keydown", (event) => {
 82 |       // Decrypt when the user hits the Enter key after entering their password.
 83 |       if (event.key === "Enter") {
 84 |         decrypt();
 85 |       }
 86 |     })
 87 |   }
 88 | 
 89 | 
 90 |   // Invoked when the 'Decrypt' button is pressed
 91 |   async function decrypt() {
 92 |     try {
 93 |       setMessage("Generating key from password...")
 94 | 
 95 |       // Load salt, convert hex string to byte array
 96 |       let salt = hexStringToBytes(saltHex)
 97 |       if (salt.length != saltSize) {
 98 |         throw new Error(`Unexpected salt size: ${salt.length}`)
 99 |       }
100 | 
101 |       // Load IV, convert hex string to byte array
102 |       let iv = hexStringToBytes(ivHex)
103 |       if (iv.length != blockSize) {
104 |         throw new Error(`Unexpected IV size: ${iv.length}`)
105 |       }
106 | 
107 |       // Load password, as byte array
108 |       let password = new TextEncoder().encode(document.getElementById("password").value)
109 |       if (password.length == 0) {
110 |         throw new Error(`Empty password`)
111 |       }
112 | 
113 |       // Wrap password into a Key object, as required by cryptography APIs
114 |       let passwordKey = await window.crypto.subtle.importKey(
115 |         "raw", // Array of bytes
116 |         password,
117 |         {name: "PBKDF2"}, // What algorithm uses the key
118 |         false, // Cannot be extracted
119 |         ["deriveKey"] // What the key is used for
120 |       )
121 | 
122 |       // Derive a key from the password, using PBKDF2
123 |       let key = await window.crypto.subtle.deriveKey(
124 |         {
125 |           name: "PBKDF2", // https://en.wikipedia.org/wiki/PBKDF2
126 |           salt: salt,
127 |           iterations: iterations,
128 |           hash: "SHA-1", // As per standard v2.0
129 |         },
130 |         passwordKey, // Wrapped password
131 |         {
132 |           name: "AES-GCM", // What algorithm uses the key
133 |           length: keySize * 8, // Key bitsize
134 |         },
135 |         false, // Cannot be extracted
136 |         ["decrypt"] // What the derived key is used for
137 |       )
138 | 
139 |       setMessage("Decrypting...")
140 | 
141 |       // Load ciphertext, convert hex string to byte array
142 |       let cipher = hexStringToBytes(cipherHex)
143 | 
144 |       // Decrypt with AES-GCM
145 |       // https://en.wikipedia.org/wiki/Galois/Counter_Mode
146 |       let decryptedBuffer = await window.crypto.subtle.decrypt(
147 |         {
148 |           name: "AES-GCM", // Name of block cipher algorithm
149 |           iv: iv, // Initialization vector
150 |         },
151 |         key, // Derived key
152 |         cipher // Ciphertext
153 |       )
154 | 
155 |       // Remove padding (added as necessary for block cipher)
156 |       // https://en.wikipedia.org/wiki/Padding_(cryptography)#PKCS#5_and_PKCS#7
157 |       decrypted = removePadding(new Uint8Array(decryptedBuffer))
158 | 
159 |       // Render decrypted payload on the page
160 |       if (secretType == "message") {
161 |         // Decode bytes to UTF-8
162 |         plainText = new TextDecoder().decode(decrypted)
163 |         // Display the plaintext on the page
164 |         document.getElementById("target_text").innerHTML = plainText
165 |         document.getElementById("text_output_div").hidden = false
166 |       } else if (secretType == "image") {
167 |         // Transform image to base64 string
168 |         b64Data = btoa(decrypted.reduce((data, byte) => data + String.fromCharCode(byte), ''))
169 |         // Create 'data' URI
170 |         // https://en.wikipedia.org/wiki/Data_URI_scheme
171 |         const imageData = `data:image/${secretExt};base64,${b64Data}`
172 |         // Display image inline
173 |         document.getElementById("target_image").setAttribute("src", imageData)
174 |         document.getElementById("image_output_div").hidden = false
175 |       } else if (secretType == "file") {
176 |         // Transform image to base64 string
177 |         b64Data = btoa(decrypted.reduce((data, byte) => data + String.fromCharCode(byte), ''))
178 |         // Create 'data' URI
179 |         // https://en.wikipedia.org/wiki/Data_URI_scheme
180 |         const fileData = `data:application/octet-stream;base64,${b64Data}`
181 |         // Activate download link
182 |         document.getElementById("target_file").setAttribute("href", fileData)
183 |         document.getElementById("target_file").setAttribute("download", `file.${secretExt}`)
184 |         document.getElementById("file_output_div").hidden = false
185 |       } else {
186 |         throw new Error(`Unknown secret type: ${secretType}`)
187 |       }
188 | 
189 |       setMessage("Decrypted successfully")
190 | 
191 |     } catch (err) {
192 |       // TODO better handle failing promises
193 |       setMessage(`Decryption failed: ${err}`)
194 |       return
195 |     }
196 |   }
197 | 
198 |   // Transform hexadecimal string to Uint8Array
199 |   function hexStringToBytes(input) {
200 |     for (var bytes = [], c = 0; c < input.length; c += 2) {
201 |       bytes.push(parseInt(input.substr(c, 2), 16));
202 |     }
203 |     return Uint8Array.from(bytes);
204 |   }
205 | 
206 |   // The cleartext input must be padded to a multiple of the block size
207 |   // for encryption. This function removes the padding, expected to be
208 |   // compatible with PKCS#7 described in RFC 5652.
209 |   // https://en.wikipedia.org/wiki/Padding_(cryptography)#PKCS#5_and_PKCS#7
210 |   function removePadding(input) {
211 |     // Last byte is the amount of padding
212 |     padAmount = input[input.length-1]
213 |     unpaddedSize = input.length - padAmount
214 |     return input.slice(0, unpaddedSize)
215 |   }
216 | 
217 |   // Update page with status of decryption
218 |   function setMessage(msg) {
219 |     document.getElementById("errormsg").innerHTML = msg
220 |   }
221 |   </script>
222 | </head>
223 | <body onload="init()">
224 | 
225 |   <h1><a href="https://mprimi.github.io/portable-secret/">Portable Secret</a> Bounty</h1>
226 |   <h2>This secret <span id="secret_type"></span> contains a Bitcoin wallet recovery key</h2>
227 |   <h3>If you can crack the secret, the funds are yours! (~$400 at today's rate)</h3>
228 | 
229 |   <p>
230 |     You can check the status of the wallet here: <a href="https://www.blockchain.com/btc/address/bc1qpwq8lxj4kxtmchxyjrlvvvpstfm9jr88dx9dgp">here</a>.
231 |   </p>
232 | 
233 |   <div>
234 |     <h4>Password hint:</h4>
235 |     <pre class="hint">4 words, joined by dots, capitalized as necessary
236 | 
237 | 1. The swimming pool accident -- her first name
238 | 2. Name of the flowers on the balcony that I used to care for
239 | 3. Name of the guy that really made a difference (The Encounter, 2017)
240 | 4. The gift from Veronica (2 words without space)
241 | </pre>
242 |   </div>
243 | 
244 |   <div>
245 |     <h4>Password:</h4>
246 |     <input type="text" id="password" placeholder="See hint above" class="password_input" required>
247 |   </div>
248 | 
249 |   <div>
250 |     <button type="button" onclick='decrypt()'>Decrypt</button>
251 |     <span id="errormsg"></span>
252 |   </div>
253 | 
254 |   <div id="text_output_div" hidden>
255 |     <pre id="target_text" class="decrypted"></pre>
256 |   </div>
257 | 
258 |   <div id="image_output_div" hidden>
259 |     <img id="target_image" class="decrypted">
260 |   </div>
261 | 
262 |   <div id="file_output_div" hidden>
263 |     <a id="target_file" class="decrypted">Download</a>
264 |   </div>
265 | 
266 |   <details>
267 |     <summary>Details</summary>
268 | 
269 |     These are decryption inputs, that can be safely transmitted in the clear.
270 |     Without the correct password, they are useless.
271 | 
272 |     <div>
273 |       Salt:
274 |       <input type="text" id="salt" value="" readonly>
275 |     </div>
276 | 
277 |     <div>
278 |       IV:
279 |       <input type="text" id="iv" value="" readonly>
280 |     </div>
281 | 
282 |     <div>
283 |       Ciphertext:<br>
284 |       <textarea rows="8" cols="80" id="cipher" readonly></textarea>
285 |     </div>
286 |   </details>
287 | </body>
288 | <script>
289 | const secretType = "image"
290 | const secretExt  = "png"
291 | const saltSize   = 16  // bytes
292 | const blockSize  = 16 // bytes
293 | const keySize    = 32   // bytes
294 | const iterations = 1000000
295 | const saltHex    = "bd82bb3ddd4c0e7a8a2bd4a86ff5eb16"
296 | const ivHex      = "5a70ef06d2bf90133261214f73c4c3dc"
297 | const cipherHex  = "b677d7d091a0dc2038bebcc8e921bd68bacec7afe1e9df6a628a1a1eec195b76064e9ddca896297926c418dce402e7030e85294c4278d46e11fca73aed8fd08b0ba2fb0e0622731d616781133d086f449a5177b019ed9b51609b5907ce19c278d0fe355b1edc3a504b6aa671671b0b1079cf1338b3248d03c60f9e7dbd485ffcd2854d4fa8020cdbaf807072551e83703c4f2b81f49cf9cf79bde15cf1b041d9388deba3034d19ea2efd1eeb52cadef8ed6587a3e0415d1a1999322f50d6a6979ab70845100c051528e8c21004c56c9acac69a92d9caa34274b18781c2e24afeb2367bce1f2dcd8c0170581bb141038ff1c775ed2dadf8a86f3addea58adc19eaaf859608f1e9df00866a004e290b33655b5b638bc39340ff2cd263546767cb5e5a5ba1a5de7b5d2d7c11be9c3ec4e7aa88b0225027e7271c51d15c7bc288519b0024b86d045a3c4ea860411301e0d8a0862f1ad98380e25f1e688c67c4417d52442c76d4e44a0d8b99b168d000c36e885857370316c5caf10e3f077ff5b3ce2e9dc7f1f5dbae4b6abf548f84467306d7c1f4e0d9f390a4acb536daab423e94fe85b7b7bc4eaacfdc9eefd6b3c67e106e2203a9f6418fec99eb18533790fd49fb97147721e08439a76e3acaa825eeb8d3ac89ba5eac2185222fbe190db52c13fdb8c9ac2f1162235da7cfe3a15eac10ebea21df167975fb3d51e2b32f2c7ac7f7d6416ce7d66c226ce50a863ddd07cc5510dde15eb75ee7fc863c5e68976d640e674fc5998c67bb2bb62a3f80b318545dee2f2661c75210de3912de905e5c5b19d41348e8bebd5e3a275424cb80713d5af5b32905d1fe0775ee8013236c6cbad05dda1a199b980e1919a8c991e14972574cee1e62b08ab7ce0b39218671802a580a43e61ea93fda6be90d4f0f6e267dad77f4459f735d8f1739ab92d7a58c5a644ed453aba088f38b545a93b8f8aeb69dee014e079916392c8d3db08b60473deb583723cf7e8642592c66b2a9a7c540c5db0530ebd9a7a240f044b359054e84df4aa59ed20183684975e3b31f82472588b94fe2fdb79157423547033e94fa85473a193977c5f4e87c0dfa86b310fd292f78629f6b452734fd337cd40488634176f95c7dc71d3f49b0178d37fa602e787c949d561a5cbc8cdd1505fbac8efabe0a9d50b981ba346538ab04f8c6bad4f5e24e87c8428dbd2a9c84a57aa3f37638970002061b873b24448e79bffbe5640499b70217e1e3640b725a3363f3d677268226aa898c58856e0ac9d33ff641c5b21ab3ea34ba548246158370a0ac8b5be3748314f36dc7bda51967ae9e6088be2abc916b172dc3bdd3258a118c2513507bf86a49aecb0cd05c801a8418299f2fb5fc41c5fd6f63024c06bb27052f7043829030ca7a3047bcabdb905a84232e1db800bcfc6730b9dee58e74dff8548b03ce4049db4e62fc1cad3f4257fff2ed11e4cb8b4a56294302700e628fa9f45f0871944684037bb7e290788ab6adee8b7896e10bcb7698bfb36e056143ee526ae3be2b3baa845ab06e2561ea36c332b8ffa0bd012ddd79a93dcdd611d8c1a322f1c1dc10877e676c9a204e239461c60d9b63aed117bd0a434fb4e35d9ea38f1460ba95a7d58ebcab343970f51620f103236a4f50584892eb1bfe579649c09e56bd2854e7963da27031cfd7a67ec202f641b6fa06073d94fddbdfaf17bf9324fbd36562383e5ecb4eb02e59b8a755a8e4312514a3a0626e8ed4f4ee54c41ae61ab57b45e408a3618e2a1e232c419040c00142692642667a29665d629c351fd03c5ae1f4fed36b7008266dd34abb2df3184d1293a40828b5cb62d5a62061726ac08e582189ce136188372538ece6d0fdac24af7faa33ed3c00f90fef214b207ec77950a21afb4ccfe51284bd60dedcf0e63b13c5975099c50a83fb052076dc2051fb89137541ce6c8b4445f2263ea4c6d3853af6f8694ff66f57bad49e39cd2e510059519156a094d3e9af124b9853c35e94005bd3e7439a62c94bea90282f407d42de035915a51bc9571bdfe6e0f1e383d3a6472c2509c3b20a92f319a59f749888b3f676328da9055b808d78bfd4bf8bd3e78e94743c5f6c0b087397eab20a6274f1756a95b65d6321e8f2c43a8b0953f31bc0e0ac69b39d22b8099045e1f689070b76f1e1d2ce44684d5a2ef60d9fb4bb7230ad8e575473a6f2e316acf9bccf22dc1b18382a4c2f277c0421d3a6b41f99e198535fad74e4ba4698a9d3816e199d0f98d0ab0b00449b14e2dbb9a6a033931e143400a25831be5408edf42a29128733ccc8a5c0421c4821e2283d701d5c3ee5f84602a7740f94d62f45096c191e8674ffe851349596e3b217d217ac2f2d7f493c293bd759494d038e802e15660dad9f9de1a995077344acaa01055c5a3fe8a2f151c81bdb9a88b020048e26ae450d18d62e29cb89f0411620925f85f08ef10f64ba7aed89ea8a280938a33f819983985c9df6f1a540d7d3a6a60cf4fc4d24e55748d8f4786189b62dc981a24793485f9c70ebd0bbeee4d1ce0d4fae19630ddfd48e368f1e6e944ac963e64ed2a30383a35a308fae42f25ff5ddb7ab54890390b76b8e7e2ab985d694c0b413931daae23f9a8aa0d39901cd9139122bdbaf764740b68a7975424013facbd2c654e75e1daa00f9bc0c1d3bf8f945b9785d33f1d222a53cd61ced5c4e8d6e81bd3874d9405d112b7cf480012a252073f16cbb22269d60580bec7cc282af71638e5bbbd68be2400e8bbb1f57ceefbeb8d6ab529bf165d017ad81b11b326d3fcc1ac271b2ba5015851c7188bd5808ddaeacf6a662e2e4f6536a1b9d191b574e05a44547ac56f25729c055f548dc002e19b358831a85d593b0aedbc44194139eda7839df4cff3ed28e4654ff2e7bd0fa22cad311beeeca3849e5d9b5833184a7271945b37929470062d8d12b5d5c804f1847702c21d09d321f57ce758bd643a9eae4e769a1a1323f18c856caca0e9e91cc97a6be3f29f7c47d3516af644df28269f4c813133197bfcdc694c32e6c5bf7efa58e962139023fbf32bb5a597dd1975dbb12853695f9c2e2a060c6752c6d09f9f0323ddbefd59e451e4c207c8c97ba3aee2d786fb66a2ba2eb86992192b967ec5ac0a734ea47b4594567948368263b1da25bc9ff0beda7a4e20934e1c734e95468fc182e0e572e1549c16d8d6c3a60d45215ee3115020a9ba79883d2a647d6c0ad220af95f8963836dc1a5e8434e65ff3ae5eba544290d5e5e9eff30bd9fb785cad13654971421906e307c003317af87128467a3771a15137c17e2b650545052c4c23f5adf13d0ec03782ab4f22d4eb385ff0fa8e9835b0b1dac307f16cc196219287b61d17ae142b81080813c32bd4020587dd8570c906d78f34f5a803104b517fc5dd7aab5b51aebc50638dba18b150ec0626e7b3d674d9ed1fd7ece9e7f2d74de212e6ae475bf025889ecde8a35c760385369e4af9e00e7698a579a7f5463eac4dc8fb86e9f6badc4e34672b831ed2ea68ab7cc70166fa5e7d08086ce900f519d47211ff10fd0e3ab636d18afbf34058dcd0dc486ec6b6af9c0e4af2ad7732a733c41278163d530110994f4389f7d71910b0de83dae775f4a7b47b76e3528ffa20c4badbb9cd91ad796a734fdb7cd8a5de43308f2a36811d16e745c0a9dd90422f898dbf925edc6de8a02caebdc55a7a55b8a823132260565f02fd6cd405b9cc9a3c95eec480b4fa54560ec0a6a89e2e4d18973b298503a097d7b776da139aea8a305def18d5e1d6ef9020b7c48da2c1d65cb33af7e523e3ab50b906808beedea0b05b3d2542b62cc6279639ab23ac187c6fde6f57d2792c485fad49619be0dea4055641763fa9ee5ebc6c2a7e94c467de62b66d2681f9148496637f36dbf8d1e9ebbf148e95908d4e54d70c4b08abe08fdd69310c8ce29d38135d498ecd5939b6472e4273e24e7bb368d7e66a2e1e7b94cf82f65db9694f31083d13386300911ade145d4bc2bc7ccf32d87d70a6aa23d363b0e781b12580c1cbc383dcce2bc9644089cf7ce8cc9df673e8485a4980a1610e00d41138e200365d474c281a548058e918450dc379ef812f8d51a462667809d22aa6b61dc89bab8829e5fc49258f648fff357f845bb0779ca3322f7f6980cc1fa9015b36d8f18d2e0222cfdd3a8c7bd3665abae5c75160c51da1f16664373eeee60729009b637490fb417c552f045bd3aa4fb4a8d71d016833cba186494691173fd3b152e6726576ee50af9aa7c11aaef9a22b30e1bd0b2e99809018c1fa3b68a4257d66fea6bb6393296ebed170594d94c63464bea5a01a314d23a9d416c477770efbf4237322d7a6ff9b8385b29336681db0d7ffd34da7a627672b5a888f98f6a2f6c79c1dbb82174831fa57ef73caf0039e8a0593b0066f9683e40edcea54da1e758bb1cb33024a3d9887c54cef03b51f1ce1db6bfe586d087aa6000d349577c353186d3176328bd800d27d9c0d78cc683e12ffd2e5c28149c3a129e972022441984e38e7bdfeee5d7fa2db5f314f566f5719f57c5f16bd1879de39c792244091fa5306856873ee22819a9edd983e8aa43b34e649bea089580dfb4fc3253da61af25a777f34e27a4b24ae510f89c55f11da508a1e75100fa076c95b2f61acbcb2e1a3a99ac4cb60dcd9f037fbf0005bd8a48e950c6791e952b48b332f92467ba5db41aabaeb48b7d497deea49579d41a3675a44791c0e3d01c0af5ffe25d522153750a7d176bc439e16dafe95922fd2bc12fb127c40c9c7133c945e2b7c290074faaf586518b8aa08eb1389f8fa0f39e152500eb8d656e36debb67d5b930f313eef72d07e71842ad21a34fa79444ba1faa5e40540cb29506568ee34f90d86c24bd790d0b597ec140231989d01f2ef7cbcc009a52d4581823bf19fd8856bc5f667d3a1b3febfd784548a5e3c54ed3406f132d3d1f8bc8e8d585d26c8c5f3af74af147d2ade3ad7551ab1a325ee0dc7ddce081eea1382082aed742176a97d55fcf9ad1baed511c0ea74606527e92202dd24ec4f978fa53e420420f9e281ab140dec014c0bae53d1a4f2eef5e2078ff8082328c11a017c8c483a17db8bd7daef29bbe33c5499219d65c8830974854e8b867cfc744f38bbd961546e24cb5de91d75ac0d9322183d676038018d8e17549bcbddd64293c2187ff9cc7e33dff5868798055c6cef0bd11deeb24f412d35e1069eb5a51dfef0ca9b3aea686162c8b89f9358ebbe9220a398bc9ae605302cd73ef5f003ed82e9276e4a13f2e2f674f34d17e0d7ebd61b2ed9ab73c5b50e4b2cf1cb1cfdb635a10e59edf31a1353a7b82360c55b3502023e3b140377d0aa35ab216b4c2f0d06d0019136574929d7b31cd1b5e45a7cc1fcf571458b1db5dd6ce5508188789dd4691f7c35c4f240d4862555aef39e138af4ba7ae79a3540f6357e31dff76c4751209d8c451f6da757bf5a0fca09ff0a48474cbfa67ec260aeaf86029fbd5130da444cb9d954e16e45d08e1b9ea65c39480270e2e6afb976e6b0af3f4a8f15b7e99bb634de2384f964a11a75334d5ef369c3dcdbdb0ebb85bc2eacb5872c9e2a170e997126b114cf1dd639b9f1ce8a02d4aa5015d489c96a29089e44adbfde94eb14499eeb26bf5df94dcb326822144379b94b701a6ed3de77e913b2cf8c91bdb883b3c190fe955bc01c5753d6274099ecb31531c443f374b4de4c69219bbfcb9cd8d9a24bf074232686c1842a77fae31e3b13be898d1222a2f9cd204d3a09b1e923f968f060ba0ab50a4e18d2cd40fe70a922e7e00ef386b64c26a69d1f0106a84b906e9ade5ed44ca77a0437368b2faec6743e12c3975ac4deec4d9d423dc746c920136cdb50ef36650ffb4991e8ec3f030d61c9ef2f9c6edd58fe9fbe0c5aa3cb00cc2638fa559e02cc428c832616509e54b8cb96d6e6833dfdc1a106a6254e871a922c9cb2ff71deca2bc39c5dc2697a39880971214863bd6f25ce25ab139722ea1475754a1058f2e829b87e5214f74740da479f61e17f86469a05ba7ea3260c67f92ff9acbd5cbea8047621b4f914b8f33d43ed23ded285ecafafe57377f46d4ea17edae9fe711826ad0e73aacbde1e9a5fe772688a1fc9439e9e4211381d6d3097a0582598f920b4146b88433cb909a8f13ff6ec1ebe816fec65c6dc6364e9eb4b92ae47774e73664524f9ed260e27eca7334b1836e259ffb94c6ff83bba50ed3d617010e077fb74465c3e20e307481038613dc0875dfe5bbe1d4df750f5e7a9e9054537056283880f779a352c977e03bd278410448911e7c986f10fa059baca3592141525b604e8bfda3fe44941945096c69f91ff9d8aa0c6e1ed218abc7d432d6ca3699d840972efc8469c7eb20d44c308ffe6e9c0367ad611aa3a1bb1dec1948faef64ffb348e3d5dd9e7099b58174e3d6c29b6f9e25b064134c94159a15bac29c75ef2f09fc5c2a144d15ad81571c145ef0944325198757c88dbd7cd972f3ba1c8c7ba5e6b11df32fedb466ad7c311e0d0fc3766c64afb366c75112a20053bdd02d08d4c0523850b04d4427ecb55049cc8712c4cb1b4da901da505ad2356fa1b5831f14048473af14cd09a84c3acf8bdd2970decd355f7f4fbd8ac555dbfb63e5ef2a00e8e71b0e57f81090eeff2de05f2b5cbeb421b6f69e4faa30e889ac9238b1eaf690c1e6ef349de25f454b532f345530184100ae2daeeb3aca79429edad95be57ccf470202c249c88691c5dc190655fb9f151e25c13e10e1881d6c2a5c07617b11aaf4118734b7da62c18dca467f64246e0acccd24eda5c94c87422e39729584dde1ce9b3313689ac6973ed965358d89021d4e56451e78a1eef45058a394e8c997a9206704f2a5ad4d94834689fff695423f4abcf595e52c256293d20009a79f5a5bb36c2ef99a9a353448f5659ed441743f3a671ce92de221c33bb049f6b5bcd79b7d652538b44c264986460954d1ca255ea9da9df08eda571bdb9c56a022267cd61f2659cf4a28a6f8fc3d549087b61c3d6ff2970ca7aea74a0fe1a42b6cbc3c173d8ebc3aa7027c0607b7041dc67f3e3fd1dc40f37823d41527a613a3819388c35f4910d0aba82f65cc20d1735fa10f442599cbb0f42c52f8d90bc88dde314555c79d3e91298a198263a18b1bf84c65c6ebb22e14ecd1f471e3649816e7be08dd10c22f593b256d191f7dd66a17007989489af1444c89762a48b3977d3a1556fe8b7c008ef69f78efdc148191c8a228833e23421f01870ef7fa1a80b393bf29e9a7f3bbb33035d5cc25fffcf22e6aae3e0ce36fbbd982cbc8f353f4752649cd4aa1a9e0f2d2243469f1653ac8e04c4a21ed605ca2a2a08ee5a0597ba57a63604bf0d8ef3270e7e22588a97dd915e986c7202264e5892162f04b3ffb3e955c32ad6b8fafa9880c404eb49cd1635d12e4e676733b03655f1d665cfddefc2acff8b713f63a294279d399931d97b6b9c5d365a2ae3ed3d391fdd3ded5e4cc1470facb114cde7e23a6b6ca60cf5163a8fa7bdc6c8da010c093a9cc6572621e15b947ce58b9132bd7b89601dae202a0a8b4f68b6df484919d55b3f63e2aa3fc7ab1f21fee050db72c8ce9a0b15ce971354d8c18ea0d586ae84a13ba40e96324a8fb0c6ef6c48865c755596aa0d8ce1f7947d7fae0c1a636f7ce0400032d13d2989e804bc05b0c5454d259bdfe6da10066317dd6c722239da83f80d0758bd2fdf26de2f7a473f2c20049f9b49057e90518a4a1a45e9a05f0a509270d3a7579ac3a75c4bb2fb8b14416ae8e95c765bf2c44f54c7d98165b4cd876c98bc792a02687822e1873875e7b6761d2cec6a3a3f34532491d3a8f0b34e4430b765ad39450b279b2fea999929bce4732ba38d11f07d426310c729a7b55800eac39c1eef0c9493ab7998b3b8da2b6bee047af10372e6d6208757bbcbdb3e50eb903587f91be1492ccb91f3fd6e6364cb3c3c798b2fee65baeb6d180fbba470080bcd1cb5402b2cbcabef9d1a510f1abdda08554ea3142410f5167fa2f6d9f12abfa11252bd9229d23d4e91493b14548fa8e84d52dfed6d996323fad89baa8be59129adb0804dd3b74f95278bdda9ffa84cbce4f67577cff9fc4691fcfe82084477d8c900144afef58cbce6c377f1707a2e74d2fafb77dadf1fef0f34cfca75cf3c40c0bacebfb884bf45d1bfc092c39b96f08fb8adc3ac733b14d88f02ca18ad2e7f82d854e0046d09222cee5550c43d729ca5a25cc580c0a6e117f922441319baec23abacd2b2adde6594ee9b41dc01818a140debd65a5e55c40b2f384b30afbd7561984eff03e3b8f18201e5a213db2ea20e744e3c6904250b6908787e67af52578faf81cf601bc415f09db2408c77596cc678a56d9cb71658d516ab65bc8f261716fbd37644a1caea370bc823cfbf2348acc5bbc4cb2139bd2952104817a11389e6aa067400fc69fe33703dd38f2567025cd9bcb796e8499e8b0c33a3278d7c23253efd807df7e1e5d3843bc5f80d620e829034643b81892629478fd9e97a6978d80bb170d23400b607e696aa51e905e0a54e18bb3bdcceb561216e35e0b707123ec3f024d382b2a2f44e85c7728a18cb594f32aad01739f29f5de5e4565c2b10d771fe62806d87a528e0dc7c2746e9e63bfae1dc755c74be794f6217c32ac978bbe405735272638fad74c2f8d3f90e151c1756b43722bd2983388beae466868be358ea7476c163acf034ac44da6652d4a4d7768bbc42172c7d355fdaa1bbec1a700e21ef4e83dd0f03ece63e9d1ece2da0ecb6d4489626aa64c7a7b297010167a571857f192e5551ca647d9d521d9310b271ad3df216e8d48b031846e774c9a3c63e9fb1c8e86bad69036682d2591a9217c3598d734aa9f2dbfab23d2cfa4caab5409ee242d53b09234741e031af0bbf58d6d08f1e5405e535a30ca02928b16b57fc0f3333e44d2938e2373fdae5a1fac1da53736fe6c4a08e6b7838401abadcaa2284270b83b2e75e45dd9f16559f0f2b6c6bb3aa034a18f4420a60682080614932b580fd332aab94ee28762964d304976378ef8d31349aec49866cb71b1e017be76c0c84b745143352b793222df46d2f5d7aca68a4e42534f38f3b6b050d310184699cc11ecf1347dd137e1d6c848c50e5a52343db2dcaef87229df203ff9745a76736ff4f6503e037fb19887b400f0e871cb7774515acdbeca74e298d84c8d8b7eba437587ce5fc483ae30f37ea5e004278d1d20f97fa60414152f4c9dd84b42c41f748ed2d720766914264c3bf6c5a640a7e38fb24946d321c9612e326bf3fac3da5f39552cb3d88ba514ca256091aee4206d44a11292c07135cd845d2f4d75c223771ca62b5f9f44a073b7585f2278ebc790d17f2827a432f2de851d2bccf629dd3c57c46bde3068fec189764478d581b8a5820b3721a363e9a5c7fa20bdb78ec5aab1727df7db7ec033be428407ac3198606479d7051fdfb862b9c8f610289858259382b802f7d6120d53c10c7d43cadbd061f77fb7bb5556b6ff0728f14d6ab0f6e6df032e91a894dbab321c2678f70bfd0fd7fea1927eb017f73eafd1b347d5173b9333d37762dff2248d89371e65ece9a951ca55e0383a679ee1231992a7556c792a0bbafb37ef4a788fd28f38ae5a88ecf15a326043b77f0332b4d22d578de2676206b40670ba83956b3ef954cb58fd88cb037d3d3b75ccf1ec607d3b9012bb3533acf9c1e4f56873381cdcb49a6d5318ecef4d30cae201b89e4d643579a6ef9cab3b939ee7872a48d6d5c64e94a0a0419a6cd1c754420844f636eb37b1b0a67d0b03075d591bd3ca84fbef20f23f17c2ec549867c1ee468e9db4feb3e919320c06c31e0844916cd88e277bca12ef3e4cebc2cff3edc5dbcfb4af3eb6b896e678390b99527afb98d809fb34bf876e3e568a733792cf1961fccf91a842e74d70166eaca42b6f5413f33e0919aa7875a1588a64e8071d99376ff739863a1b7ca5d0b29bc51445e03f0e492724c6ed831d940b096b1844184b850ce85436166f3a949c7d3a3aab08fd8b1b81056c5ae48ba3300187ca290da8dd5e1e173425aa33d695792fcba5b286dda7d30fe5953cbfbca9b9e765e63e45952ff3b50743025721328dfd4e783bf6bb65e8f20e83dffe9ab4ef2dbd1dbfb019d9629feefb4841a2a4f5801d73fab852466513c14334a5eea62524bd3512a273e271a0b51d66d76752b5df92efaafeb431ac6804fb38c2f4843da3f54706865e73220e88e98a359db291f49fd9ce66aa771c14fa468b34e09232f609928cd9cf4172b77baf68713b4553c9bb5a36f98a115924a54f9971f59b426f768c8c7ad0071111a9bfbf18f72dbc6e7a23cb6b50d17b8a541f90332db604f564f167e374596208f40693d22f462c571ca5d559e49a7a540bcc1cd1190fa1b694d0b3677f8c12212d1a4ef4dbfac79db593cbf0c67b5d33e3086a196bc63757aaaff0d64395f8fbdc4f6a1a78c4da9de0452119af4948a6a6bfefa18d0387466dae8624a9f731dc8f7782393a905f2a8d6323847f3a98062fb2be738005fd777aa672abb56bcd03c6de3d23819c8f680d17040c45209b4bbfe863f8dd6025f3db5ea660ed544557f887cb245a9bedda973ddf2196df19d67775b0c8eb18fd858e09de620b3d33dc91c7a5d3f07bed141a954b786c2ff1985173e29455c5fc72eda0cd126743e56019c355b717de2f7f6fade2e31d26a97f46dc70d5ede035800546ed45adc184cdb24e232f315af85e35051857df0e785a53f6173a5592331869e4f68c3e266a44a02c705df20bd7e9254619bb113dd399deba4b9c80222a4af75d7e74c06b1b067eb9025c1f4273228781768a952c122f4bdacba12e09c44c8550b97b8ed3c3778166707d269792bf721adea24f1adee6fc1a8c654716ba3988b6d42266ef9bcde5020299434fcb336403f329738041e200fc8524e75ae8e7df24f26659d8b734e5c589bd88f6d3b2849ab9d706ddccd76256e0f52843dbbdf6c4a2f44109e1fb52edd11cb59225e520322f922374b6206af0e217b40636588e0afd71679cae561eb2bcf187d2a1a30e36ea2375b25acf1085b2c6c5888ee73bd4945b9d49c7ab05bc637b030705c4ffc891204b3944735feda142e04cf04961c1c270d2c36b114d5b1a95de1c92b565530204b2142b372dc2d0cb8dc3c3b3e46491031d34a1c863a44000f75d2a56225f4233ede35485aa6d5fdba08684c4fab4fc7c9183d5e6099c29d879bcfe782644588b78643b45c7a5b70e6158871304710c92189822a2b79673003dc11756521c5014fce260bfb98e5f79172b25d16384ee034b800526ee6178283f8e05f09497b19efe11efbd185fe54ca02d9bab9b0c27a67efa6107690f92f34b1a23e7efb1bfb8b63b4fdb425240e591b9ec7263ce9ee946f9318fe93d2f27f585eda5508a2df225a37eebffe2c06192717ae956170cf27252d960c3bad78763c70f46ecd15cc588e247ebbd020cb4fbfc3c09b0687cfbf574fbba379bd7990f6d4ff3b434e6e48f56ca4567e0fa789a4f11ab5c6126c6fbfd2779fc7a199bbf5253cb7616ae2056a932b1eb4d8072e0e36407284175e17fc76e887dcc3006576a6177b2ea0d88b53b6385f6a16a494c655194b6198ef89cba82ddd26d53eee2835c1421c5f13b824f3f7a2dd405b87459c8de3f9f12de55a277399b1b55326eba50b7c685d6d8c77785f8b87fce39e999712c9509b6296dab8a198538871edb5a4782f7339853a566410da0c439effdb38c20b831e7e36691df9913c9e2791b87b17d0b34ec644dfc6057b0c0b3c84d8febea473af276b274cb1a43f6a2af62c06ee238e58b64dbbd18f4cf3267e39834c51a963238e45104e755f215027af94e3be372dce7383150674970a61306e699a388f81d79761bcdaef06f1ddc64a2ed1a4cb7f578822fbc5acb2409f68f07b8539f648986e497797e778bd1b59f3851ba640a41238f6302846bfd9edfec5cd0bd6db5e5e14404cbf734be29030df09299e9aa3ac40f42361e07a4cb4cd53479a31110fb11a1c03ffc5ef51e7e1d6709aed5c4f57af4b14e5f871b5936270e6c67d365aa81d7cf37a25dc6947e465d419a53340b9795fddc6911e28197df99ac6da66641cc100cca08c04dcf93c6599eb5ae87104fc3d6f08034a12becd82f2e21ed9a81d415143f26763de52d94500a40ebc7e89c29dcb23990e75dfe9a4587e13c84a397f259ad6027e69899415ca7ad9410a9b206b070ce4bbd93b1d60ce5b16f0ec5fed3f5607de5c47ab7f840a41c818a198c54a2d54406aa9174e737f8c075f0e955e1c9a2a5efc1b639bb95782c928855c22c020fc2736a8e5452b8afb26a76fb8e063dd3e78e4873e8931de173f57119a57e27236d05ad2b9bd3bd14f7196ce0f1d6ffb80cf9ed0aa8486cf81111119cf63e3fe5c1c08de626271c78d24d9f228f8e76c481afd552d6b25ddd14793e57a270305581658ff547d768ced2a9cd852891d152cb75fd0fa3dc5384868c386548ffa765474d9fb6a34269f9ef97efe7a4c7042caf24d14b3bc95ec520743a6373654ca8165ea0c2c0c4bb8a632b74c2c0dd594aaaca0eb379ad2d720cff6b42bbccbb58ae6cb337a1385d2df8a6e8f3a835c492781d3451738f8273b140b281d3b6c384e7fa28788a46aca497d57a1d51d1fdb5a9ea0aa44a84c3cb582dada7225df390201529b14afee14218b73ee496148923cbb418271e714b2f61d4ae451026493711fb63159aaadbb5d8c9bfb5d68b512e416aac883b2c793f2062c5460b40a0ab406c97c5851cb38839a0b4842f62fad5f78d650744e5bfebcff4810557cb1e17358e2e93a6b2e3da3f742b77b239163234eaf91487d29898ff8f8d12a3d911d7593ed49ec9cf0f65c8bea270e8f70f2021218c94e656c8e10f146fa7cace94e659559063f3069bd2970b5600cf6e95fa395ccdd6589a5f6e52ebd94ef6ba66886438c07e5d8a089338d82c172746647cbcd5a43bb4c842710fd2bfcb067c417f145dded48554214cc5144db4db709d9a49633a27fd8db663a82df8775080f2422dc09e6f0156d9dea80ff53ae7c2da638204a9810caddf0776e1a38ad7123af2518ac7e684220a073a62936b068213d16dea59eae9df614461795f8bb06e4758121719916cdfabbbc74a3e667c76243285c171614667b5162557bf007b379e158c79a25cb20fd1f0c8d5f89d931a7db6a9c17eb8cbbdaf8640eb93441747a61354e6b0ddaa01a27f78d9fba43fdde3f26c3e6fe87190ee87401c47ba8ec6cf24b9fc8a09f3216805ebce0e9f524827b8ddbab2e6d2e9e40c5e8cc88829745817571709a4d611b56f245857e2f25ec88d5d7fe5a362b9cc2b6ef8bf1650db63bf86a9c0fbaf91c770c30c096f9a98d2769ae3bf53f92fc1220b5de45a57bda19fa397cbaddc8e48674d3b573e6972b1f628189782ad2d6e44e8a84a09a3774a91a03faacd16f2c4ee8d9259046dd752b5d7b610332cc03fc138a0c6a947d15ab9d85ceee9cf1ab5cae0727be0a2ab4581a623048064a5529e6a024dcb62703a0851ba9659e10ae896852ba0e9373ca2eaf9f7e692759a0c0f44f0a4ed820818426a21be0d78091fceea02b7e3c2715306c119f0a48e0384f0d4a584c9f41089f94086e8f3a6bfebfdf4e2d9ba1d08dc8123c49d6e71c3d29686b97983f750e075a8011aae3dc03e2567c0a187164490c7c01cebd5a4a3dcdd454cebb683ceeb4a58f24c751e8889dc9421f3b2ff6ee12ea00c6ef280b685fddd49cf6e3088394689139d92463a1b4a18febad7a6a43cf553ddbe06e2509962997a78efedab9798774a4c80d4e5352d9c17dd3efa298b9e91a373846a577ee275e48bdfaf76ba43906c7dfca72f61f66343b02dd55e6502b483340715d18d3a767e7d49ee41a4ec99fcac9cf45b46857a473b10631009a805c8fb58797dfd821376f7753376a5be643fa2ac6e42c06c25cee7e4d84889edaad98c342de053d77d3b21faa86f5ebd4291be94c81b571ad0e07b8a21920076279db9adade33d41dde3f7449b5301eff237c3172e55c076adf2926ac2044c005aeff1071c491f47578b0bbf78c55e6010e65dc220318f00dd39beadd31b10c9350cdc327738e12c03bff48889791b6f4bc06851eec90a60c0da52b9165dcd6df7ff0630d5a1c6276fe0016db6f7f721318bc07ce1be261a7deb3d00ab43a68032e9e5317af22d757906838535d6ac6c8e91ad8f177bdf74bbe67cd58d4ffe682082f65941640ea4ce5b0711f760d71db13b9fdf12af9209202c0ceede6c7f2b8f1b6ae38192c4b786932ca5559ac060b9dcdfbe88a08a4b8ee91ec3ffe668c34b3171a521e5238d3feb287e218940faeb238de6a53a4a7dfff479d33e07c068568887f2de6a1f413f0cd0c89ab651aa9cfd72ff0737b457d30ebfc40a68c70bf334cfe3547759ca7f112c16d36aa7a17010448e48a36345b028838cec2c6aa54584638920998a74f36e203815091a72105d213682f5b2a6e520f1d0900f49b3cbcc4086a4531acee08fdfb9e66827ab009944eda210423c2fb241b5aff906fe43644b760d5d9a36a11a394a0c16c61dbca9ce0f927b46bd0a904b0ba084366eb51b67ab1127f027d45317cba3e389f1a3b2e38f62dd8133f6bd0fd123ee369b90889a9ef8404555ca8d9688366a889023d613748f1ca13930abe36f6f57a2097a4d8e8beb0654ca67e97ad1c912a8f3023e5fca34fb1b5c38035b94f84f5b4655897873ad4a0f9eb103fcf09ef89c40d86f49cf075a581b18e2017052a6f770efb6e151299fd180e2ccecb8a301b6a29c2b205a8d7b9e972a6c6deb3f363375d59f2a580b9eddd63e06c022bfba1a61ec9bf1096dff38652725f55646706ef70d787d1b3edff2a26b286291f016da574dcfa89c4dc68a5fbc05fa83621196ae9733a67856ae1dd20c3a36f56bcdc269183a68133ca34fdc212f50615d0f04f0e3fb7dfe7c565f85710a0aa151c68b12763db9635a65a3303102e1278577b24cdd6def33c1a3407970eaa27f19ac668c3c03580f952d84e1b85a0548996e3e31e8d7bb7682a82a71924357af01210c68b2fea441c6739f7eeb5b8ca58826b6f5d00671d9d66d9cafe9efa860ede7b5a031a0bbef461a200cce7fec2b3292d053cad91c84e52ff746ca2623a2a1c905b58f7b9e7c04a853d6c8ef767397efbe58fb5ffb36f52d4cbe986d9a5f1c1427cced85d6c405492c0d0832ddbf8524fb9bab2397fa86390545cefe85328e25158eccae40802cd17fb2fa7f5a1512c5193c20d9546ccf8ed94f2f6e832b99bf3118934747f3233e57134c84f761113387892a584578d69e307b26f36fc46ce6528f5e1b7df4c37d86080fce27591053bec4ae650d5327753aeae501e3f9d9085cd7ada56a4285a041fdce726f80a18b7c6be82869f3eaac5a9092b1565af87ddcfa7b79f510c4cbdcab0f5054f9b0e20555928256ff5bb843b48327ca57729d35011ff91aa7f811a09fa4df092445f7bf2153f6a9eeb854286ec4dc98a18bf30f24e6abdadbe425c3c9b81a7ed0169c00c33691847a3f89cd2178ade4916d547ef50057610494f2c192fa313ba85a559e3b7550d41daa4c8f4301915c03c92bdf41952fb373bf824d996e680adfc6bd07f75e40b140b5b46d8181e985ed6e65ea4ee236259bc7693f493682d187ba45df26a0500d23715979be0bbb5208cf5e29a4345f85546ec4e6f56d271532c15df1b6e1c18178dc4146380492318996ad2532bfdaf24e116c78ae00949434d72449d4142b2570e3d91dff9268e2c9aaab60da0e5148c924816118b28683e8cf1bbe3781bc7399cd864e115d253911667fa7b65a583c5995b53833fc87fb3ee98f0500c9ed962dca27183656c70f78c116b68dbfaacd2db81e18fc8aec0c7bedd621ba609795ef36ccd16c75462c78b1193e57cb0cfb230b1edc830cf89c7ba64aa6d02b9bd12f71c0b1cd40dc6ee041937fe734e32cb81ce3e841baedb3a10b4973f92a863138819c4bfe0dfd7c8f6372109e899dd063c82e7bd7f64a6810aed479d3dfe4a872ab3e91de5aa608f31cc93d72583f9b6e9e3cf1c391c57046e315358a741a2df5ac4b6d9b3175416ddd20437eaa19ab1865843af9d9ae9d8f62079b17b165b63724a58f7b42e4f2699832a83203dfbd3acd970fb21bc66ebc6479125d865819027221988036d71fe134c44905ef5d0b97243be672dbef803c99895d1694774a5fc9ae8845453996e32b083125d9e803900f0423e9d016526409def057f4bd44f4008f62361abc6b935ab10a3d0fcf6aa56853ecc1a0c169718ad2346d737e952bfcf5c55b38d948fb5ce9c932de3a7cb05ef0545ccd894b370dd64d2e99e12f3960ce16af36dc23c5d9fc38ba4f4b60e261dceec7a849903666e9c9cff0e7e2f7cbe0fd69410bc30dccee348436b4dc15f2edd7da9ccc55c735c0917fabc554e12658294f482a6f5370b27cf287989d0665f303b4e79890c0907e1bf4b61d9c97b0ef96d2ed69bf0dfb9cf3fa3b7fe52b296d449278462c5a9f1ed943a3dd5cd3bdce3983f0dc7ff933caa4446c8cd1a63e6cfdb1781abcb4b2090bbb2b29d760ed5661d68169b572d51964251dd8e99b0a8c9e34f559427608c381f4c4769473dcc0cfe3bc78ada58ce4cd6cdb53b2cd24184250e3cb427bd3cef2ea263f219fa02f300f9a7770596cec93a2bdef1b322f87b4afe6c8bf80c497b457256a89f22ef7c3df4ca26a7eccb676a402e7be36dcedb7eb5bd89d58b219682d9d0c892090d988228aa0545aa225ebfdeb18c616c30782dd9b879ddddd8b51cf152d7457d49730d3f02e845b4f1dfb87532310baf1150e474f0cb4334cea2e67ce7ea78b7c28bc94a4f70b362366bfaccfc5086541f2bb3a816ed08886b3de6b078ba8604e7affabcbbbc1971673d138cf2dd2338ed98e5215b4d8b1418f9bb89a8116663312209ec892a53855f34480f58123b5481afc66c3f52a6c2a5d1b08cd0e821f3cb284f8f466c2155ccd65fef7aca068aa6d437d29c7db890728256daa088d39162eb780c360fc4c4486342ff74b4905623f01cc5c332e724319690ae509f06640a9f609081697266e238aab3561c2c0c6670ca26a59e7f0ff73613c69b9413a6708e73fd8c31931b1d2bf743223b6dd6eb037aa2015387878312acbf6ad4b9e8c9c7ecbb3c5a60bc8b43455929948b8b8ced6aa55a223c59e9ca31a8ffe2ce7f695c420d4efe9841b1317fb390f2e28bdc533f72a7d0a31eb16adee036c2933ee4d3f8e9824f662aa66c367ef422170aa284922feeedd59c6f68aab4d623debc90eb8a36ef8d9f46f1d2851c51e6e9ec6e60bae1e2c99c9350c6c445970cc8452301cd848a8ac3af54e2ca538e000524ce2493a12e45f221f5074a0ee55886b32f2d0adb51ac233a7a3af3ec7d7f077e878ade1731d0490ef5f619426217c2d403b95f8bf72b953d4185f1995f5941f2af41e31046edc110b93e000dc50f0e6340b2fb4cb0837737392927fc721932b1eab10f12155b320197bc0f85cb7cf7b9944b6a0605cac05fb8cad4f288c7a25d715045fa221757d6e243c0b42db1a2c7496f8219974a9b081e3aa4b0045b54540bcf77630a0f19559835f0411487131187e5b099570f41a7f349261ae78855e43b0adf95cb77a73cf42b1d258d69b61e1289e66c800f32f0eb73b76f06810336221abbba501f743eeb6a8ca232a83f035b81f93d4fb50c34d88fed7dab9efbe8ce1689ce96f4132de75b57336d2c8e309a6f718a022b9313c57af993509a332eda1366f00f51549c8a0560b81722332392234c76310c913fec3b51b39fdb5c69f1493bf1b27387a7648b0247151f9d772ee64d226d654b9626f6b6029a7f403d125abe7f4d7597042cc1ee800018bbba10dccfb97e817cd9d339d8310534b1f91c40483c833c38c9060bc2f0b876600c5a27dafe868d853ded58bd3cda4a97f655bfa18ef3ba0f6031d819f986fa9769827483946dfa8842f7eb22553efdd3128c58a9370c06f9f4dddc31d272c2244cfc7301dd029d884a8d9e328a73e3aa23a5c4a23f79be080c204adf3903f190fec370e621853d060a608c132f2a5a9dd915de3509d6dcec1a10e46bf8223cb47315ec61e77b5b12fe52b4936e4cda949b718edf1dbdf658d82ee78d3eeeccf723913bf4775c857b861c46155f66f99207a8c2fd6a491f77f9bc39b75dd49f23f182c9d5260cf9dc0a01ad2ca615074082a95615c6c3f254dc3333f740bdd8d30fcf4fcbb0a967f99ffcd7a3b20957e16f8d9348880f6305bc7b2706aaf73bd4df87de9634d7762cb661e5570d7424190965fc6c314e484e31510ed31575758730781151d7fb193f455e734ee4abed0998615119d9e12247cb49ec48cad65036988f6cb969f110bcb0e57598e884318b0953c88ba93554e1523edf9dd5644be4fe0b3fd94d366c42f35b32943099aec392f463497a9659a166fce695c343826d137285a5381597bf94b4fe07db22f9ab751abeab9cac9a0ca296fea8d7cf1ff780b0d9bb3360a0036b33ec74803d1f1032c988557fc4f86b3dbbf7c05d481afeb5a7ab246d34932455dfe5bfbba706adbab44cf45b177eebdddfe497678e7a74aeec9f26207ed1497bc2d31b07eed501d5c6a52d8af5adc35f727aa1ad61444689ffa2c2465a91349ee9122a4b1f7804789602c90d94e745ddae1e21284c82ef419b9cfa20e09ff7d287dd5cc85b73d78c0064afde59b98deefb17b6c85131d99a33a19ab8e26751fbc5ae14ba9c5a8788e317cd7d6720caf8e70f3fe0d9f4b4dbe73d17ff9fe70eeb1fdd7a49d9981af85a5b79ed4a98c69a1c52b2355f3841ba7290f1c32d22bb290cd8064c47d6d86aeaa615a93ae3ea2ba5007ef12fb7392bf9393caf3ae686091503afaa7d2f350dbc5b8fde3846ab600fdc9b8fe0d01681b1f0f500ff5e128db5af1bb6fff3f13357ad20b0d4a388b902699e3ddbcdef0dcc68449d5e464f187aed9b7f14c69fb33b1f718f5a4b1ecbaf0db74e70e181a0928afb4a72da385db3e43d4771d5d87153a98fa1cc831c517887a11be180b15f3efd3658cb853a6b831947501c6379c7da71d7d47d4b9f07b2fb3d39ebe5783f5f5a73331f6e233192fdab0fff1d7b579e2a84facec09babde125c250c55bb5b93f32efd759302626317d4a0aa072050956edf32557b284b9442d5dafca2de4deee81c26d2d6b1775b35688f5d5c2d7088b3b94f71a8dab6ccfaf8f7eca6170e5739a9b3c3504410c827144b8705dc0de6eeed7c9e3922575ba6d06e25894a4ed2709f38f216201de580e3643c19293a5cafdaa35c13a3045e3b65f491319516e0b67d565c235075bbf9bbb4f45877bf84be4ae138125c13b30dcf5eafb3abb0579d653a4ae19a7557fde11febe06dcd7fec32e6c7f90f2296f9af956a82d1ecac337c2763f658775134158159652a54b7e1473157285dd91db096bfc5d1622e419b8688225b18cfeb8ce91914f981c3886cfa3e6efcc10102b6e9c0d1ce6486a8065fbd9954e0905b44a86f0788e82ad531dd7c406279d97efc04427262a858ac22a698d9ae803d31768744d0e89a5ac0299104eea752a8314ecc9b935096098c7652b1c3472bb58c1cd304e59d072932c8b3428357d49de91d381309b06f998ae79cdc187ee50ae1cd89e4d2e7b75bd4280aa143bb711e5a91358d87b5d0a89a96c6696fbb1336fe697a1a4f2bd16901a8fc2a91058e3e5436b58a621b2468f5696950ce6df35b3c00aeca227a186f9c3bf792d61865e35aad6596cd55745781122fd96a7e00e83585fe3ba8ed5026349fba4f44786670bd9c9a1e34df4093c273b8ed609ac84b1a0c4f8b4ef17f73e0111a944a94bace7db75b2ebd0329db85ad16b38a69011dec9ca5441fa96170cb056cf09d501ae4f5589d88c7732c7f9ba7ddb8f197ff275df9a2b9c0091ea540f8b49f557e50434a74c2a827e38689fa59120c17367c405f53269a92abdd49b4668cbfa0071ae0ef7b7a224ae3ea11de29686c5366442b1b608a3be8249176ce944d68b67a348c9a8f791bbc574a1090f693f1d87a024debcb3dfb6b7750e56f3a672c055597931db21632deb9ad22b0bf3d288f38fd108ad49319578a8a86be7f35ee09a5f98d6309d9965918640e527ece2a0ef357f14c1d05223e6ed0122b33dbcf1a026decd44936c1c367682af08a43857fca48974d680f7d0be5094d53271a0967adecaea141be951811514b8d5a3a3ce21909c66a4b3afb55b9b0970af61cf87b2afc00e48e969a1362cbb17188ab924aeb8e63408778643cea7fbf7fca3753cec2493e217a8be1c764d0185e769f1910bab657fb195cf8ae805462b9e0d8ca7b4aff365a6a1db667e1f078a5de7cf751e81fcbe71a5cf83bb78d3e0372348adce241fee91be70d19194954088de80baae86345ba09a62a2bd70beb4594addb435359e32d4d7b32ddbf5bd407695525aea5808beb03a90ba3483fad8201ddd33c4a08d04d75eb6ede97e068a6da8d10d1f2d0791247d60eb61e6d499566d112b580967245c289d59058b924714bd36f7a59b26511726e6cb49ab937da7a057bf20d4634889a508ee4394f735cf4b8137054a61eed5319fc0b6c942921e8751efc58e93025ae69bf378a519580090ddfcb75cec70eb848c3286311473e07a71d3b79b188bc315781adff11a565e52b2bdcd986b07fbd62aa79805032d5808f32e307fae823243fdb8abdf5d09ad75544c12bca67b42c6224201be6454e9636ce3be674c06fa541c651a398281e514cf8a744a8899a8c1af267c15c7316473c5bb33dc961ac456014936979d4a7f1d547da4dd9d378c9cea1e5e37656e70f9da12d6e44abdec1259f2dba7813698b6d5463582e469be455f8adedc7d742602ae9a8926a767862e19bc26a30098a0b3bb26d4d363168ae0a921cb6beac2ecdff4d1d4588e110d8d838eade43d9eab81e3768d654661893fd5a0175a04f1b4c662f74c00f397a4a90c47ae4a33266c2867f0310747b9fb438f64bdf9b410dfe1404a62d9e106a404fce2dfcafbeca6208a897bc464c4eb140968fe051ac75b31e6920af72505dd7bf07fd531ae7de4794dc82b86e4d24860ad0aad489eaddc238ae2c4c74644d78a617ed28afa1dda79ad87a275d3055574e2fc2d6f738fb32220760cc6a0c7d819b3c7565ada9a26827fec5ee323c74b9e0a37388af478e18dbe1a2ab44e0cf9fa6193a72b1a8723cd152872b925badbffca20ef76663fa1056ea04712c7ba6c2538f0a76841272f6665daeb510c6bc97f4fd04089382a4c30ea729aa2bf3f23471dc926f5f36c93457f9e88cd127fdbbccdcdb66f075f0238fcd1777a569b24907d5aeefc90fa46366273b81f20b85818d0887fc329e3f46c8255caaaacef0a0665788b53824885172bb43a0afb5544b87e51c2c780d7245ce190f62b960f87b05dc7737a6918413bc55dd865c2b97f5a6adda6af819d1acf2ce5a6f9779a013681d881d0279c3e86e3e1fdb18669f687618b8f7dac3f2e266b241b12a0e54f5aaf3b3227995e71445d52045e74122634bb80f49c23f9a186e3805c8e64f5e4783320dc09891d08c6940ffbe56746742cf5c7c07cd4cf4e5eac78b243148da77bd08f7be3403b136a5be112bd7d7179fd1d6f4595d7d3b00b1677ed2705a9d6355b10e97f8b0a1ce9189265adaff4e892959a0d60d76834784eeb4c0ab7f17a38079b314bd9a2fae5000ce340b6c08e671809959429bec16962bcecd0f2e20cb21e2bd6d42bc65be2d43eb3b868541927da54affe68b8e32579fc8624e75365c1b4998559de428f6182894456359a2bcdb24ddc6db6dbbf6d3c71b3a260847e23555d2718971799433b972b0d9aecea4282c4ab647d112071e2aa15f9d823db5750957b26c7a58fa6db0e417d207c0d17bf8297c1ae84f46c8da6ce58460b3cd9d17cfedc75977bf9cc159240e8bd2700e52aa0f3044bd84cfdfabd77ac608a41e24580848c651115af3c1875057f587c057bd01a61d8936574d2000b57c1f1c75e89e2409eb28fb027505a87c958d76a52e1fd8bb8a396900c8531db7c3d37cdbc3e5b67507785c5aff037c5cf4dcff41e77378ca8386d6b4260815e5e60a37f740541f37adc1f50d92b2db50fb8fb7bc1757a30822094396f65a7bec0a720ebe8655a5cc5effe351a630668e69a13afbea36a79f23497d4dae00288633376fff4a985d10829643c0a05aaa67d0c5258ab12f6d716e6db0d7090a2233e798a54034c310501663490460ee09fa0e79db3a05f7c708e40f72d9c4decfaccc35dfb5ff97bd5bfbb7f000d9f64f64ef46265a8d8654739b1096076d45bf8587b223e4bf5a8004e28e35513d1152aea5ffee3e5ee638d950dbbdd8e8eb0dc3905ef14518adddbafb167cee2e9c0883b93753bc57bfa06450d094a045b71d70cf13f8094b7b31f5b015e7b5a03c5d26100f2d29bb5ad9d24408e329f627e9443e35ac402fc98e7cd7749ab21e38a6fdec82c9f94e5c9f41aa17633c9440b0fdb306c75a5386fd3eab5cbc385c0c16bad07deeadec230adf21af7fc981d459c72b3864dea46b112002c30eb0e470abf8e685c19acd3acfd92c3efb4dbe7688bf78c263d1dc8c7bec37b67c0db3135622b495d2e4378d57e463faccf7066e64a97cadf6078fa15521abcf4acb849c6c1e190fec10ba60209a05d7ac746326c7aad8d87c16237f855f7e6482d6b13773a384b9445586e5c62c63e24486e9e824ac65de28e165d113d8cf81d84ebebbe46a9d31e780e402c9ad08a9469f80c6dde40d5354c6969c183a1a6714b62f124b113c720a723a746e4eab45bd14f48f7eeca025eaaaa95ed1932ecf23fab2a93aac2e3dc2d6a471ab98c3365e301409f37346d56669136834033f6ce4ad3dae575540be65dea0a71d027061d9e384e35ccd48fd205bfbff725862bfc01c93c5aaadea61bbd6dd61e7d49a3b4f93b38848dba22a048499d8e3005f557b1790b912a1ad948f5951c832f408f3ce9245f0268224c1914ac75f18184e7b834743edac12f1c015cf63b4a2e55c4a7d099eadd6879d376984c643423603128064cd07b80a037fa31a2ef3549fd44b3ad19222cef2449e2fbc43317fea31a749d0f3558a5a409f3784e915b5c1a59ac92b59a0e7f55fe4dd9931e692fe3279485da74320253c92e381c6ecf23b1b96bb44ce4857545bcbb44fb5c1f81c2d61e28a6c599f576338e2de0c901af6038304f80f648c0423d4289fc7eb0d6f6e3b93852171676c1952f73f84246cae53c2099ba9fa7a57e0957f064c4d3aa1828ead9e34f033775a8bd3b8dc9037dfd3c4aafbd2dc29cad4d028d3905ae039e480daaa2ab4d9e9e0df4efa667d1855349a1ca393a7dc643b3226731d8d7c76ba6f5bba32d00c3ed6d86e47a753343ef50692f0cc20256e5916b8b911fae1391f039117213efd02b0fb3219042951ad215c1f6fab93c3aa5a83082d6da0365f10dce08e0f7d8be6babfdd944da4d01b2cc87050df5be2ff6f900315d4f151a93adaa4386e376872279d921b6c5d7c1b197d60d3e9bb9396df9c5b85ec46a932796714ccf5c9503df24d42ccb8c95fbff2a46cac61d15b768e012efd73d4cf344a3b85b13644584d5819b67f795557d2d6d643ca30ad4f751621d633c8012d0d0bb4ab442e6292518d4d30a358f32ed014f08f8da69b74ed37224143eebea26db4ceddc36de873792f5c37ae5f3afd49002c87de7122650c2b58903f63899bfdd58c794ed4fc78114af73e2cd0ae26c52b4022e611a65c2998748421f57e988e90c0904f40c8c76ef2387e290ac701489b447140a766db6cc41775d63da6d5aedd9e7eb3da71b4fe4f36685d28befe320d1256cdcbe753b197367f1ed236afc47a0e1be60ccc95d52b3eb07275187aa2a41355ae42b1b29fd27dfbdd7b1488decddc7fcd56808af1427e26e8b24e88df986207816c2698edd4e18c94a9386b0cf90df615bdc63fb94cfb23833389f6f33ce22cfc521cce0b25519f125f174e65f7579cdb9ab7b4b4e41ea6637edc4c25de481f5df91e2f555d2ee829e026c6fdf469ae22f659edbe7fc0d5906aae3ec0edb8f0b7ca6e6bf8e6650a60d2a45039581c22915d1d538fd8f302455037d9f32ab2559ebac6209cf425c52d2b181a23a1d1254f0b5f0551667b24af5ffc751a581e84450cf0c16c7e1a1ba7a56b102ce19419fba11aa576ed2bd72d43c7d19132a403639af4de689d173dec8cd9bb01c1d371589a9c0d71f49a15f0d0590525317b570f37558337e40f26621ee81109602795639c34409ae937bd6aec545ccd77d527652e1523856fcb1205b1cf2d27b6b25d23f53274cc779ef05e49b59662c80a53a91d9f1bf7bc3c9486c622c17b5cd6b4e9016e21a4866b6d9624a953e9ada4bb0aa1f283fc7fa26a80231ac574bd860d53c9d76831993902337a5add9e600525259e2b314e5ba4fb773c3808215ba3ed548b55c52aa8d41a9e92ec35bf800e8684fd4edf0f62735ce2598e4f8c7c8f4549e6186e29c79ebeae30c556298dcd277a2a129fcabd3943c146c899fd76866390f9f89808081a984a2daa9c4c49302602eb1afd2c78cd080a36861c91699d6ed4820d2844f8d22e2cc60c8b21634492bfab3c940cc58c37656d008008fd728dfcda3d96eb5b05dcd018ef9342a89c2ab0da964ec94ad4be6b9e4beded1b0d365be48645c4d5ef1521afeeadcdf6e8df0983a629175fb857e7847b8165d4e12ef4189666f382a25f9efc0033cd792fb1f77103a926a6d2fabf7e8de8349e7d29642d681476c1527c2d9e2e4b21abffc323e314e488c1cb8662bbb9a8e47231b1015d515ff41401f4c9938559d7a70f94f5febe6feec731ad00509fb162d223467136997a5b021ca05e0db6a069b330d7e66bafd255b42f578c62e731e725b41d2beaafcf9769a1bd26fe99feef5cae32696cb4abee0c22b00dea986e83f0494f6daf0b719f0e50f7db9e30b92728d8eaf75191baa19667503e77db62ec7cd7a20dca577be74cc1c759eab2c1ec950f01542bc2ee58a495595dc6a8c1772cc67db1d10a0d87da0e08ebb565673d72f95b4bf61c62ddac1101d575b15002009e7ad1ed289ce8e2dbbde64551ec9d30f71b9481c15f7bc761cbeb76100cd0233009f2504353e958efd1bcca3136f6242a698d2012350741765241a8f0ea7b84e5083c66f2e946f020adc1763f551751667fb705c3b0b0a13f81e5ac016e02b66cc054252dbb13858ccba7c386ca029d61bc0bb13ec2bd6e39a0f284d9688b1e0739f18caef13d3df56777adb2ccbaf6fd1482f73efb72639dc93485b89220efb4a88583d1d67ea88a69189506c16d35b9d4df2984b3961514e7d06594ca9e90bf2c51c55a0f367875359215f46262fecbe9b32630007659f80fab9cbed46ff309953ddefd84cd301a408311633dc8710d3a4d440f04012b61f8cd5ba40fdabc55c24fa1332a7828de51d0d3a61a55ed52327083b8a1db5634d1773a159572d721e1a3ad8daf69f0cb4da153a96aad3533eb01c9ac74433d79a76a47a8925f6ad916117b19f46b57de939b61e02854782b86901e8e4120307232755077d9889aa4f3f61f9efc4fc75f5655705cb62959856882140830c25d69a8d01d11bddb68e2243917021030792083eda65ca1424052022b5dede18054f0dc4a14eb7c58b29ac3468dbf79f8d2b1221bc14186d80cbbb83cade8d5591ab56256a27581b95ea9cac34be26dd1920d686eacf59791ce463854f08b686d0606ffb1516d405e2b8f2b71fce7a3b6302b7b544dd0f9b123f0fe4acbcf38c1e32ea5f0ee0f2ba01811f01e4262924db7f4d43d97feecc06d5f152f4766cacdec27330c99b7024c1b64aa9a02b7941ff4e8450b7fd405874685b8e44e9639c93c1b72c3ed700b75357856b195da25171d4d8b8375947b64876891f3521cb6964b945200cafbec3f598cbccbf986d5c9fe1dd57f3eabb5bc0d2630a62343c7f8aa4a706e555d02b7e32db72a17b638c5258ef731e560341ad6a71580f419a4ba56b809c02fb93f858262686d14ba9a760b83c693bae6d6605dfc511817fd2dff54c5c4a44a46bc66900703f42c240e725430a034d949e4b47eac2bcda19a53baefe4add0805535234d290d641b01b6dfb79cd5acb3c3ab95efb131e4565b040e72f234615c2732eccdad1d9c29f668c898438767d5130d16892c927da190d8a11bc1ae60699dead472036fb0beb3135be41ec38315c067db6c053c74fb64d3e488bcc36f26e8054db167db95639f6a4c92497fcd84a4309e0ecfda7721611b024f4e9f12aae543238d869401e413d1c39c2eff67c930b9f169537a510bdfe0a633b877a2a0e38f1324962547b2f56c9a9fbd1be5836379b8454aad8958507e1d2cfcccdc715e75b240bca1bbd8a4b1d19b51d4a07a73b1139e39642987c9bd7a0530415c49554fba1964af932d66d6447f6fd4f56eb5675c140f92d0e8270105aa04539b7b37f72b868f8a85f3a024e0389f5130822a33b3e7643587be12607bb07f7b92804e7043613bb1b9a8d69e8eaaf7217d1ee573854d3ed8458536bfe97cb3786a3ce60a9448a625ce9bb31031a6d7768422c2598183d73d3a43b9943eb739a26b71de26a6be250260ade7ec058cc2009b8327c347f2263cc511939cfc61e0c4544dbdce07c0580580e5a6d6508bc71e340633e6f1c57a09560a670a06c1f2ad5057db5d52cc97ea08d4c07c5fd0b2d71dace2787fd3c47d76e4fd4e5fea1772324104663cbe0e873311213ec35b645ec1fc123fa9fa2941b5ad6efbcb91564286e3e22c7cf8ab9b94a2c5022afc5f679e47e9f4251eea4c9af56586c2d775ccd1643db1239227ed70fffb2140c4d56fdc4504a7c77a5265ae74e7dc5361822111acd8b7f7dda7dcda4c45b77552a395723cb626740f46c6e5322af0af3ab69031298fef044f5b64d0f2ad76eb67771afa2950c327e89bac05c461c1bbb98b421920e163f62a2b9abbfc7ea2a7197067b0407e940df84f041848ff5e12908b182f0703ae937cbf622f1bb2ed7b91164c7fa3f8d72da12a6098f9ae53aedc8d5fd8c8c63629ce9d5ae3b62db36001f04a98256c584a950d263ef4ee827c45fdb6827e1990251bee7792d40629bffabbc89c99016d274e6d95a167b35f893892cef29403339c0fb51decef3be1897d501f871c47afd1c901d8a81d17b125989dfa0f8d6bffbf745679beb188b83d5709a6f395f1d398a9f56eed1a3442ec00ddd01d5d2842daf47810b4e5af688860b93827f88d5705e3c4771b9dd365fd6fd544df102c40d71364d8434904800437896b86e41b0f51a188f466188f1dbd68eedb20149872b61c67b32a62c300094e70"
298 | </script>
299 | </html>
300 | 


--------------------------------------------------------------------------------
/examples/example-file.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!--
  3 | Portable Secret generated with https://mprimi.github.io/portable-secret/
  4 | 
  5 | This file is self-contained, it embeds an encrypted payload.
  6 | It uses your browser's cryptograpy APIs to decrypt it, if you know the password.
  7 | -->
  8 | <html>
  9 | <head>
 10 |   <meta charset="UTF-8" />
 11 |   <style>
 12 |   body {
 13 |     background-color: floralwhite;
 14 |     font-size: large;
 15 |     margin: 50px;
 16 |   }
 17 | 
 18 |   div {
 19 |     margin: 5px;
 20 |   }
 21 | 
 22 |   pre {
 23 |     padding: 5px;
 24 |     white-space: pre-wrap;
 25 |     word-break: keep-all;
 26 |   }
 27 | 
 28 |   button {
 29 |     font-size: large;
 30 |     padding: 12px 20px;
 31 |   }
 32 | 
 33 |   input {
 34 |     font-family: monospace;
 35 |   }
 36 | 
 37 |   textarea {
 38 |     font-family: monospace;
 39 |   }
 40 | 
 41 |   .decrypted {
 42 |     background-color: palegreen;
 43 |     border: 2px dotted forestgreen;
 44 |   }
 45 | 
 46 |   .hint {
 47 |     background-color: lavender;
 48 |     border: 2px dashed black;
 49 |   }
 50 | 
 51 |   /*
 52 |   pre.decrypted {
 53 |   }
 54 |   */
 55 | 
 56 |   img.decrypted {
 57 |     padding: 12px 20px;
 58 |   }
 59 | 
 60 |   a.decrypted {
 61 |     font-size: xx-large;
 62 |   }
 63 | 
 64 |   input.password_input {
 65 |     font-size: large;
 66 |     padding: 12px 20px;
 67 |   }
 68 |   </style>
 69 |   <script>
 70 |   // Display the encryption inputs on the page (invoked during body onload)
 71 |   async function init() {
 72 |     document.getElementById("secret_type").innerHTML = secretType
 73 |     document.getElementById("salt").setAttribute("value", saltHex)
 74 |     document.getElementById("iv").setAttribute("value", ivHex)
 75 |     document.getElementById("cipher").innerHTML = cipherHex
 76 | 
 77 |     if (secretType == 'file') {
 78 |       document.getElementById("target_file").innerHTML = `Download file.${secretExt}`
 79 |     }
 80 | 
 81 |     document.getElementById("password").addEventListener("keydown", (event) => {
 82 |       // Decrypt when the user hits the Enter key after entering their password.
 83 |       if (event.key === "Enter") {
 84 |         decrypt();
 85 |       }
 86 |     })
 87 |   }
 88 | 
 89 | 
 90 |   // Invoked when the 'Decrypt' button is pressed
 91 |   async function decrypt() {
 92 |     try {
 93 |       setMessage("Generating key from password...")
 94 | 
 95 |       // Load salt, convert hex string to byte array
 96 |       let salt = hexStringToBytes(saltHex)
 97 |       if (salt.length != saltSize) {
 98 |         throw new Error(`Unexpected salt size: ${salt.length}`)
 99 |       }
100 | 
101 |       // Load IV, convert hex string to byte array
102 |       let iv = hexStringToBytes(ivHex)
103 |       if (iv.length != blockSize) {
104 |         throw new Error(`Unexpected IV size: ${iv.length}`)
105 |       }
106 | 
107 |       // Load password, as byte array
108 |       let password = new TextEncoder().encode(document.getElementById("password").value)
109 |       if (password.length == 0) {
110 |         throw new Error(`Empty password`)
111 |       }
112 | 
113 |       // Wrap password into a Key object, as required by cryptography APIs
114 |       let passwordKey = await window.crypto.subtle.importKey(
115 |         "raw", // Array of bytes
116 |         password,
117 |         {name: "PBKDF2"}, // What algorithm uses the key
118 |         false, // Cannot be extracted
119 |         ["deriveKey"] // What the key is used for
120 |       )
121 | 
122 |       // Derive a key from the password, using PBKDF2
123 |       let key = await window.crypto.subtle.deriveKey(
124 |         {
125 |           name: "PBKDF2", // https://en.wikipedia.org/wiki/PBKDF2
126 |           salt: salt,
127 |           iterations: iterations,
128 |           hash: "SHA-1", // As per standard v2.0
129 |         },
130 |         passwordKey, // Wrapped password
131 |         {
132 |           name: "AES-GCM", // What algorithm uses the key
133 |           length: keySize * 8, // Key bitsize
134 |         },
135 |         false, // Cannot be extracted
136 |         ["decrypt"] // What the derived key is used for
137 |       )
138 | 
139 |       setMessage("Decrypting...")
140 | 
141 |       // Load ciphertext, convert hex string to byte array
142 |       let cipher = hexStringToBytes(cipherHex)
143 | 
144 |       // Decrypt with AES-GCM
145 |       // https://en.wikipedia.org/wiki/Galois/Counter_Mode
146 |       let decryptedBuffer = await window.crypto.subtle.decrypt(
147 |         {
148 |           name: "AES-GCM", // Name of block cipher algorithm
149 |           iv: iv, // Initialization vector
150 |         },
151 |         key, // Derived key
152 |         cipher // Ciphertext
153 |       )
154 | 
155 |       // Remove padding (added as necessary for block cipher)
156 |       // https://en.wikipedia.org/wiki/Padding_(cryptography)#PKCS#5_and_PKCS#7
157 |       decrypted = removePadding(new Uint8Array(decryptedBuffer))
158 | 
159 |       // Render decrypted payload on the page
160 |       if (secretType == "message") {
161 |         // Decode bytes to UTF-8
162 |         plainText = new TextDecoder().decode(decrypted)
163 |         // Display the plaintext on the page
164 |         document.getElementById("target_text").innerHTML = plainText
165 |         document.getElementById("text_output_div").hidden = false
166 |       } else if (secretType == "image") {
167 |         // Transform image to base64 string
168 |         b64Data = btoa(decrypted.reduce((data, byte) => data + String.fromCharCode(byte), ''))
169 |         // Create 'data' URI
170 |         // https://en.wikipedia.org/wiki/Data_URI_scheme
171 |         const imageData = `data:image/${secretExt};base64,${b64Data}`
172 |         // Display image inline
173 |         document.getElementById("target_image").setAttribute("src", imageData)
174 |         document.getElementById("image_output_div").hidden = false
175 |       } else if (secretType == "file") {
176 |         // Transform image to base64 string
177 |         b64Data = btoa(decrypted.reduce((data, byte) => data + String.fromCharCode(byte), ''))
178 |         // Create 'data' URI
179 |         // https://en.wikipedia.org/wiki/Data_URI_scheme
180 |         const fileData = `data:application/octet-stream;base64,${b64Data}`
181 |         // Activate download link
182 |         document.getElementById("target_file").setAttribute("href", fileData)
183 |         document.getElementById("target_file").setAttribute("download", `file.${secretExt}`)
184 |         document.getElementById("file_output_div").hidden = false
185 |       } else {
186 |         throw new Error(`Unknown secret type: ${secretType}`)
187 |       }
188 | 
189 |       setMessage("Decrypted successfully")
190 | 
191 |     } catch (err) {
192 |       // TODO better handle failing promises
193 |       setMessage(`Decryption failed: ${err}`)
194 |       return
195 |     }
196 |   }
197 | 
198 |   // Transform hexadecimal string to Uint8Array
199 |   function hexStringToBytes(input) {
200 |     for (var bytes = [], c = 0; c < input.length; c += 2) {
201 |       bytes.push(parseInt(input.substr(c, 2), 16));
202 |     }
203 |     return Uint8Array.from(bytes);
204 |   }
205 | 
206 |   // The cleartext input must be padded to a multiple of the block size
207 |   // for encryption. This function removes the padding, expected to be
208 |   // compatible with PKCS#7 described in RFC 5652.
209 |   // https://en.wikipedia.org/wiki/Padding_(cryptography)#PKCS#5_and_PKCS#7
210 |   function removePadding(input) {
211 |     // Last byte is the amount of padding
212 |     padAmount = input[input.length-1]
213 |     unpaddedSize = input.length - padAmount
214 |     return input.slice(0, unpaddedSize)
215 |   }
216 | 
217 |   // Update page with status of decryption
218 |   function setMessage(msg) {
219 |     document.getElementById("errormsg").innerHTML = msg
220 |   }
221 |   </script>
222 | </head>
223 | <body onload="init()">
224 | 
225 |   <h1>This page contains a secret <span id="secret_type"></span></h1>
226 |   <h2>Enter the password to decrypt it</h2>
227 |   <h3>Created with <a href="https://mprimi.github.io/portable-secret/">Portable Secret</a></h3>
228 | 
229 |   <p>
230 |     This file contains a secret (message, file, or image) that can be recovered if you know the password.<br>
231 |     The secret can be decrypted without an internet connection, this file has no dependencies and no data leaves the browser window.
232 |   </p>
233 | 
234 |   <div>
235 |     <h4>Password hint:</h4>
236 |     <pre class="hint">A yellow edible fruit with elongated shape. 6 letters, all lowercase
237 | 
238 | (N.B. this is a _weak_ password. But for this example it will do)
239 | </pre>
240 |   </div>
241 | 
242 |   <div>
243 |     <h4>Password:</h4>
244 |     <input type="text" id="password" placeholder="See hint above" class="password_input" required>
245 |   </div>
246 | 
247 |   <div>
248 |     <button type="button" onclick='decrypt()'>Decrypt</button>
249 |     <span id="errormsg"></span>
250 |   </div>
251 | 
252 |   <div id="text_output_div" hidden>
253 |     <pre id="target_text" class="decrypted"></pre>
254 |   </div>
255 | 
256 |   <div id="image_output_div" hidden>
257 |     <img id="target_image" class="decrypted">
258 |   </div>
259 | 
260 |   <div id="file_output_div" hidden>
261 |     <a id="target_file" class="decrypted">Download</a>
262 |   </div>
263 | 
264 |   <details>
265 |     <summary>Details</summary>
266 | 
267 |     These are decryption inputs, that can be safely transmitted in the clear.
268 |     Without the correct password, they are useless.
269 | 
270 |     <div>
271 |       Salt:
272 |       <input type="text" id="salt" value="" readonly>
273 |     </div>
274 | 
275 |     <div>
276 |       IV:
277 |       <input type="text" id="iv" value="" readonly>
278 |     </div>
279 | 
280 |     <div>
281 |       Ciphertext:<br>
282 |       <textarea rows="8" cols="80" id="cipher" readonly></textarea>
283 |     </div>
284 |   </details>
285 | </body>
286 | <script>
287 | const secretType = "file"
288 | const secretExt  = "zip"
289 | const saltSize   = 16  // bytes
290 | const blockSize  = 16 // bytes
291 | const keySize    = 32   // bytes
292 | const iterations = 1000000
293 | const saltHex    = "2129324c961c36f1f95f19a7ad3e6fbb"
294 | const ivHex      = "da90ba2419169b097b0d5c12adbafb89"
295 | const cipherHex  = "65eb864716b78d18ba170a32275328f7217c1b76f462d17589141d0007afd40bf0aadab0cc4f332e99d51208c834a78d043fec66d556ca1b28126f4d335cf54eabe755025efbe31d01d998c101ec8843134e19994a451605afca0b76533a3e85ec0b5fa98a2d2f2cb9e028842fcf5ab09b9fb999f6b651b914231f33d37ef4a515899cab577714f49ea275688d0b59074305c690dea30610bef138277a0929a4b5cc5d116c1a7dbcc088f3b06334bc40938dad673e7141bdebea661bd37103ab62e21cb3cfb81853a2d6b37a76a250fee2bf61b787a4bec53cb86a3a7099c122e38296b07eaf5bd87eee2b0f5c5311a38e698b03189ea60be0bcf360098453320abd69b6e9c0b9b5d3771eb0fd082a36722c7690e0d76f3bf54dae67e20a4e6ebfcd20424c3347ecee3d07fec2b10036d68fb5f742af91cb16265ecc25af8a2667a2a7c9916318f27f16daa684e1522c1cd6439327371519f593f744d06f98cc3597f0ea05167053463baaea2cb424dd9e940a3ea1bdc06a54e89429c3dbbcdc41a5329efbd367d175abe6f91cd08cae511ef9b4e7cc41ed416ec804fa8aaae1101706d6609910c6bac95511ed65efd4cf6db77f2886f0a7c624726876dd571dea081b25008c6aa003a809edc43a6a2363471ddf6adda08c110fd48c32bfd7c43e285889712b7796cbf77b730447be75471d0dfe7de3db900ee0c56daac30ecea12c0f62aefa9d53a8ecf7ca7f26df790b42789736446c10254a6832e5017eeba4ee3e52bb0fac7a0db30f82190705324e1fe9b42873365cd06acad450c6a0a6"
296 | </script>
297 | </html>
298 | 


--------------------------------------------------------------------------------
/examples/example-image.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!--
  3 | Portable Secret generated with https://mprimi.github.io/portable-secret/
  4 | 
  5 | This file is self-contained, it embeds an encrypted payload.
  6 | It uses your browser's cryptograpy APIs to decrypt it, if you know the password.
  7 | -->
  8 | <html>
  9 | <head>
 10 |   <meta charset="UTF-8" />
 11 |   <style>
 12 |   body {
 13 |     background-color: floralwhite;
 14 |     font-size: large;
 15 |     margin: 50px;
 16 |   }
 17 | 
 18 |   div {
 19 |     margin: 5px;
 20 |   }
 21 | 
 22 |   pre {
 23 |     padding: 5px;
 24 |     white-space: pre-wrap;
 25 |     word-break: keep-all;
 26 |   }
 27 | 
 28 |   button {
 29 |     font-size: large;
 30 |     padding: 12px 20px;
 31 |   }
 32 | 
 33 |   input {
 34 |     font-family: monospace;
 35 |   }
 36 | 
 37 |   textarea {
 38 |     font-family: monospace;
 39 |   }
 40 | 
 41 |   .decrypted {
 42 |     background-color: palegreen;
 43 |     border: 2px dotted forestgreen;
 44 |   }
 45 | 
 46 |   .hint {
 47 |     background-color: lavender;
 48 |     border: 2px dashed black;
 49 |   }
 50 | 
 51 |   /*
 52 |   pre.decrypted {
 53 |   }
 54 |   */
 55 | 
 56 |   img.decrypted {
 57 |     padding: 12px 20px;
 58 |   }
 59 | 
 60 |   a.decrypted {
 61 |     font-size: xx-large;
 62 |   }
 63 | 
 64 |   input.password_input {
 65 |     font-size: large;
 66 |     padding: 12px 20px;
 67 |   }
 68 |   </style>
 69 |   <script>
 70 |   // Display the encryption inputs on the page (invoked during body onload)
 71 |   async function init() {
 72 |     document.getElementById("secret_type").innerHTML = secretType
 73 |     document.getElementById("salt").setAttribute("value", saltHex)
 74 |     document.getElementById("iv").setAttribute("value", ivHex)
 75 |     document.getElementById("cipher").innerHTML = cipherHex
 76 | 
 77 |     if (secretType == 'file') {
 78 |       document.getElementById("target_file").innerHTML = `Download file.${secretExt}`
 79 |     }
 80 |     
 81 |     document.getElementById("password").addEventListener("keydown", (event) => {
 82 |       // Decrypt when the user hits the Enter key after entering their password.
 83 |       if (event.key === "Enter") {
 84 |         decrypt();
 85 |       }
 86 |     })
 87 |   }
 88 | 
 89 |   // Invoked when the 'Decrypt' button is pressed
 90 |   async function decrypt() {
 91 |     try {
 92 |       setMessage("Generating key from password...")
 93 | 
 94 |       // Load salt, convert hex string to byte array
 95 |       let salt = hexStringToBytes(saltHex)
 96 |       if (salt.length != saltSize) {
 97 |         throw new Error(`Unexpected salt size: ${salt.length}`)
 98 |       }
 99 | 
100 |       // Load IV, convert hex string to byte array
101 |       let iv = hexStringToBytes(ivHex)
102 |       if (iv.length != blockSize) {
103 |         throw new Error(`Unexpected IV size: ${iv.length}`)
104 |       }
105 | 
106 |       // Load password, as byte array
107 |       let password = new TextEncoder().encode(document.getElementById("password").value)
108 |       if (password.length == 0) {
109 |         throw new Error(`Empty password`)
110 |       }
111 | 
112 |       // Wrap password into a Key object, as required by cryptography APIs
113 |       let passwordKey = await window.crypto.subtle.importKey(
114 |         "raw", // Array of bytes
115 |         password,
116 |         {name: "PBKDF2"}, // What algorithm uses the key
117 |         false, // Cannot be extracted
118 |         ["deriveKey"] // What the key is used for
119 |       )
120 | 
121 |       // Derive a key from the password, using PBKDF2
122 |       let key = await window.crypto.subtle.deriveKey(
123 |         {
124 |           name: "PBKDF2", // https://en.wikipedia.org/wiki/PBKDF2
125 |           salt: salt,
126 |           iterations: iterations,
127 |           hash: "SHA-1", // As per standard v2.0
128 |         },
129 |         passwordKey, // Wrapped password
130 |         {
131 |           name: "AES-GCM", // What algorithm uses the key
132 |           length: keySize * 8, // Key bitsize
133 |         },
134 |         false, // Cannot be extracted
135 |         ["decrypt"] // What the derived key is used for
136 |       )
137 | 
138 |       setMessage("Decrypting...")
139 | 
140 |       // Load ciphertext, convert hex string to byte array
141 |       let cipher = hexStringToBytes(cipherHex)
142 | 
143 |       // Decrypt with AES-GCM
144 |       // https://en.wikipedia.org/wiki/Galois/Counter_Mode
145 |       let decryptedBuffer = await window.crypto.subtle.decrypt(
146 |         {
147 |           name: "AES-GCM", // Name of block cipher algorithm
148 |           iv: iv, // Initialization vector
149 |         },
150 |         key, // Derived key
151 |         cipher // Ciphertext
152 |       )
153 | 
154 |       // Remove padding (added as necessary for block cipher)
155 |       // https://en.wikipedia.org/wiki/Padding_(cryptography)#PKCS#5_and_PKCS#7
156 |       decrypted = removePadding(new Uint8Array(decryptedBuffer))
157 | 
158 |       // Render decrypted payload on the page
159 |       if (secretType == "message") {
160 |         // Decode bytes to UTF-8
161 |         plainText = new TextDecoder().decode(decrypted)
162 |         // Display the plaintext on the page
163 |         document.getElementById("target_text").innerHTML = plainText
164 |         document.getElementById("text_output_div").hidden = false
165 |       } else if (secretType == "image") {
166 |         // Transform image to base64 string
167 |         b64Data = btoa(decrypted.reduce((data, byte) => data + String.fromCharCode(byte), ''))
168 |         // Create 'data' URI
169 |         // https://en.wikipedia.org/wiki/Data_URI_scheme
170 |         const imageData = `data:image/${secretExt};base64,${b64Data}`
171 |         // Display image inline
172 |         document.getElementById("target_image").setAttribute("src", imageData)
173 |         document.getElementById("image_output_div").hidden = false
174 |       } else if (secretType == "file") {
175 |         // Transform image to base64 string
176 |         b64Data = btoa(decrypted.reduce((data, byte) => data + String.fromCharCode(byte), ''))
177 |         // Create 'data' URI
178 |         // https://en.wikipedia.org/wiki/Data_URI_scheme
179 |         const fileData = `data:application/octet-stream;base64,${b64Data}`
180 |         // Activate download link
181 |         document.getElementById("target_file").setAttribute("href", fileData)
182 |         document.getElementById("target_file").setAttribute("download", `file.${secretExt}`)
183 |         document.getElementById("file_output_div").hidden = false
184 |       } else {
185 |         throw new Error(`Unknown secret type: ${secretType}`)
186 |       }
187 | 
188 |       setMessage("Decrypted successfully")
189 | 
190 |     } catch (err) {
191 |       // TODO better handle failing promises
192 |       setMessage(`Decryption failed: ${err}`)
193 |       return
194 |     }
195 |   }
196 | 
197 |   // Transform hexadecimal string to Uint8Array
198 |   function hexStringToBytes(input) {
199 |     for (var bytes = [], c = 0; c < input.length; c += 2) {
200 |       bytes.push(parseInt(input.substr(c, 2), 16));
201 |     }
202 |     return Uint8Array.from(bytes);
203 |   }
204 | 
205 |   // The cleartext input must be padded to a multiple of the block size
206 |   // for encryption. This function removes the padding, expected to be
207 |   // compatible with PKCS#7 described in RFC 5652.
208 |   // https://en.wikipedia.org/wiki/Padding_(cryptography)#PKCS#5_and_PKCS#7
209 |   function removePadding(input) {
210 |     // Last byte is the amount of padding
211 |     padAmount = input[input.length-1]
212 |     unpaddedSize = input.length - padAmount
213 |     return input.slice(0, unpaddedSize)
214 |   }
215 | 
216 |   // Update page with status of decryption
217 |   function setMessage(msg) {
218 |     document.getElementById("errormsg").innerHTML = msg
219 |   }
220 |   </script>
221 | </head>
222 | <body onload="init()">
223 | 
224 |   <h1>This page contains a secret <span id="secret_type"></span></h1>
225 |   <h2>Enter the password to decrypt it</h2>
226 |   <h3>Created with <a href="https://mprimi.github.io/portable-secret/">Portable Secret</a></h3>
227 | 
228 |   <p>
229 |     This file contains a secret (message, file, or image) that can be recovered if you know the password.<br>
230 |     The secret can be decrypted without an internet connection, this file has no dependencies and no data leaves the browser window.
231 |   </p>
232 | 
233 |   <div>
234 |     <h4>Password hint:</h4>
235 |     <pre class="hint">A yellow edible fruit with elongated shape. 6 letters, all lowercase
236 | 
237 | (N.B. this is a _weak_ password. But for this example it will do)
238 | </pre>
239 |   </div>
240 | 
241 |   <div>
242 |     <h4>Password:</h4>
243 |     <input type="text" id="password" placeholder="See hint above" class="password_input" required>
244 |   </div>
245 | 
246 |   <div>
247 |     <button type="button" onclick='decrypt()'>Decrypt</button>
248 |     <span id="errormsg"></span>
249 |   </div>
250 | 
251 |   <div id="text_output_div" hidden>
252 |     <pre id="target_text" class="decrypted"></pre>
253 |   </div>
254 | 
255 |   <div id="image_output_div" hidden>
256 |     <img id="target_image" class="decrypted">
257 |   </div>
258 | 
259 |   <div id="file_output_div" hidden>
260 |     <a id="target_file" class="decrypted">Download</a>
261 |   </div>
262 | 
263 |   <details>
264 |     <summary>Details</summary>
265 | 
266 |     These are decryption inputs, that can be safely transmitted in the clear.
267 |     Without the correct password, they are useless.
268 | 
269 |     <div>
270 |       Salt:
271 |       <input type="text" id="salt" value="" readonly>
272 |     </div>
273 | 
274 |     <div>
275 |       IV:
276 |       <input type="text" id="iv" value="" readonly>
277 |     </div>
278 | 
279 |     <div>
280 |       Ciphertext:<br>
281 |       <textarea rows="8" cols="80" id="cipher" readonly></textarea>
282 |     </div>
283 |   </details>
284 | </body>
285 | <script>
286 | const secretType = "image"
287 | const secretExt  = "jpeg"
288 | const saltSize   = 16  // bytes
289 | const blockSize  = 16 // bytes
290 | const keySize    = 32   // bytes
291 | const iterations = 1000000
292 | const saltHex    = "d08ba7371bc62336ecdb48c983b5e7f8"
293 | const ivHex      = "f9171803759e32668ed533ae646bf8c0"
294 | const cipherHex  = "34ba6964b732ee94b10efd036421df482ab19c1d5169fbcf395968cafdc3cd4657920d9f8e54db68730fa0b05389f936f044cc50731cba091415b7d481c61b146ab5d39621e8b49249d69564f560f71e4beeed7769046fa895fc00d6dba90b99ee4dd3008162e77d4f5eb1d2c9064a79e8d8f9538d86adb7c058bc89e5de622d5fdc7147a0bf48433016687d3ca5c3bb6b0f93b1536740f818a98192c1548b0a6c993b4fa4c2dabe02e6c73e8e8cc62846d9662d1b44edf8f589a97cdc0a8fb75235691c540d1b296a9c74b9a0e0c4f3b0c51a27c692814b24e5acabcedb5ab4620275f7b5abfae52bc058eef4d30af128b4c9623040ca9193ca19b1674ab1860ed49a16a34aa8032fce28a44861c8edd52391bdab1a2aeb9220f1b10ac6670e0d578720a34892a2edea983b8ac673c623f3ea51811442de37e376d070e482c1e826d5d377e7bd8cbcd717a3859cddb99e5cc1f2aabbe6f599cf6ea1f85d881b88c537646f309ce037f169c7394e54eff3c0ceccbeb5426d3caacc2123cb0a3e7943e7bc1122956b7127a6b0427ab38411e031670dbe08b8139d9887a971e44a04693290a0be683a13697afd170c08b8a822a6206a314374555070270afa2df60de16b799028fe83f819d42b4a1964911819d755f91472e2cf5fde5f251d4adeacc0f624ab8946bbd63b16d8a3f3e0e5223b80cb28d31227c5d170c67986e77250e205dc0f6ef7735a870cfd73f6e26061b9e0a457803713dfa6bf59ef14962df1b5c22cecd02ab70bfdbff7951803ad8157c85b944f8b522d859a50c963b91a27b1eca9ffe45018bdca1d3057f96093c49e913faa96fa54f3eabef7439b2ecdb6f258cb818cea670a989fe7c50cb8ba75d2bdeaf9ddf334e231b9191afbc7c9ac5cd83c3da818902cc4be47b3a4dd5759df01ca5907d60189dea45db1505cd19f4bcb79db6418ee82cfcb1dbc65676eb2d2b62d435a5c7d1a6e4c9743e2c1abbf2280775d276875f8e6e824a1a4f4d0810a2f43f5e8ce8ea29b0632c22c5d25ae9cb18a4f6fe8a465a8256f783cac2148ad3d1917da993cf396270b3d36781d93cfef4810cd0d4126c0d19f0c9724670a7edec5ef5117084f7e8b2a7d6f193c1091ac0604bd93147d156d66d109b10b1377cf0486629e585229f07ce0e95764cbd48f94b72ccad217d30b537af360f9d2c601537c711ad7f6374cbfe99189a21ff4ff24aa9c3751c5d9be5da17701d647e4b1b79867023c75b7a83fd8f99b90108256406c233cdecb50be6eb63164d3d00966c77d5a2676a71e0667900c79dc20857fa64ef6ed8533477f434a83e0b6a79d67a489d49661382274080bc9241324c50f7e733dc5bd56011e06254ccdab6c91fef34aeada96b3c4e8c663b8d936ae9930dd3f2f42fe05c813cf324725f7a1b8039a1d111a5551fade18fec58c3c203d240d8d64bd6b48da2c67d75eadfe3d51f22fdad7ec85c8670166d03e04cbb7a2a4e1ed881ba942d3856a4b5883ebb644a325a9d0cf3f0bf95ab15f8163931090e5df424f3a6f434016b409e12fb95d79b6c16690885b8a555b57e66b1e6a1cc448f2caab16ea543e0e6540788b8bc8731e5db18dd1c70858f23ef586aa7e8bbd83cc2248a277a289f36f536dceb2fe6f5efa91afdcc7c9bb91910bdcb13914bed387181d6638caef1a64ec9570fb0a122532223d09d9798cf9e7e183790e757e5b2dc0d17e9133f1b1458ed904d6d8247be4bcb72041cb86e56c4ba1e52bfc3d03ef09eba0b7ecfc0775ed5952f06f9469249af8cf20cc8faedee77d85c019cc2807c31d7ee7d9f7f68c8fd85514938a3de6cb9c59ef3e23a2fc06ab3bf1b45a16dd6736056377e87fb502d3c7e40ea2d0e6c6211f89a7dd21a8fcb687908ffb3ada5d072c7cb5e5d1c5add1174303f428b5002988a73f2adf507d977cadc371d806bfceeb20ffcc46e4a50cc24254ef075ecdce37b1bdc59e60b92bf7cb783f414910d6166c4c417fbcf6c2dcb41b4bb2ebfb1b06f32687703e6a80e8a8dcb8288eff94a689d1dc2079fe89835ac93d33f4fe8fc7433d4a44851cd24bad06e941eacbecc0f40e2e1c8379a1c76bdc1de7d87ece889dc4fcba10a05d3b7dfcfcff9ee76e85f89cc87f090454b1bb54ff2660915ec92e17f3cd0aaa90b3a69fd59bd1c2331edc77dc72d697898e0e19aa53c260e1e9f2b7e6eb24de64737a2ade0c746b6f9ff372752debb85062bbbcec43c39b49efe816959f12515230bc28aad124196b5d0b251ea80a6f67eeae0734891ee22a3209fe85ac7cc80ec329f548188f247bc222f99c142c703f261d216811fba7b5113d316b3cd9b47655a0e9765ddb4d79d9268f12d58b3c1a814bd379b96fe67413763f51860fa67d2d0b2a088666826df3e6a12c9b6d79ec5e159d747ef41aee050ac67d20a20000df175612d65ca4802361814c530b25bff501deb872c12443853abe5ba8efaba9a1b98fd67c81623e7e09aa2737e7bcc8316d986521ca29936456766ed8879275fc41a847c1b610ecef92c7a2b2e967762e96e4b7ee0d24952573b42a6f835c9e2299b0bd218e3b6853ca44aafc76585d7c754bde3076963fd142d943a475418bdea5efb75415eb4921427b876396a0c5a9052072f0db8fce066e403e7a16128a31d12fd09304f8ada467c4bcac31972fef89d60e90dc82a16347e9b6c8d66050b322e06f2e6adb30c56d0d326f49d8999b4a46e62f7220f8e06dfecc9568575aee32d0847c5c1bc7ed06348c0cf5f620e403c9e6804edf5b6a13754c3664ef9e65a5140069a22a89f12cb286da0b18865be4b14422721c783398bcfcc52437badcd4c9192fabdea61d3c8bb84c6eb499707644723ff635b03b2aff5e862f699146837eb502e6bacf2a576aeef4f47694c8e88a66ba967086689f3d851307b493c4ffcfd079de17afee5f334ff99bb4c9733b7593417d12dd87876b9d0f412442e4760e0a69f16f483cf96cf5924b3ed8d4aceff97e318f4a68087cca4c372fffd79eb3231661c282aa9057db22675aadee38c21ba07780de01e70ca780b28149b15d8fd00a34cf9dbfb9b159c840cff9bcb60f49a4b147c0d5bf16ad8cf038c07f6a6cf587ef6ad2d160ed5a28cc85957f8d64d6769c600f1385eef85330c174f321d9d84c7deb04b564b15e8a3831e828ab8dfbcf487a264af5fee683b7bbfc3462a88d0d7eb64258a76a04de47efaf15cd0bf7342b220298ed3c48c99540804e6979d3f48597c41e4efe13040450188252cc306828f47c066aed3fd431381159857c3990cd7562cdba223377a824b3529c558e2cd552fe964ceda2f84e07bdc67d16c31faac447ea92a4d26045c474df07255a3c3fbe96161d5ded364da102c5c8d827fbd0b33a99a08dcd6998458a28a1df35099d21bfa2136586fa7614f2f7bdbd50875abb5f3fed0fb84696da56032d16e8494c89c44bc3eb65dcb6197021a828312dc68f2afadfd2603586c09655c92c3345d2278c60b221af04cfda93c149addd93a7540b2f6edffae69bfedc7ad508f08005be470b3df8c3a51d0459e73710cc3c9ef2cb8f30a79ac856f6cdc631ec4494f570bfb921b4bf93ad13cce6d470a0e066c58580c897273653cf006553f03866226bdac8d19d5a33c62194ebdfeb3be121c949d72a573f65431fb08ed6f6061f5fa2eddcf628dbbcb995331ff0336403eb19d05b2cc4046c77781d8648246c23c84ddba4d4e26f9962917b61eaa7e20dea98d3ffe43f63a21ac9d576b108b0a8a25a41c75a84ce4f982ca2d8dee6f5952c36e9c2fe32885dc0d57da05035cf0aaac4ebf1e07336578c9427c602d0abfbe9e15e251949e971594c7baea07983d117dbda4b77a813ec6a077a07a37354c26a2d1e2c9e6811ab489252179b2aecf0edd33c5b1ac268114d48cbb5082cdb80a337453a1d9b40bdf18a00f5f02ffdae67584f468f2db8302dae98d9a1c208d5807c3d506d30b56d902f8c561c5179d76108d7e9777614f569aa3c6e87b5317d4ad3b26c0dd7e2485fcd2939480044956741365ae046928511da321e6d224088f91fb9c2d782814a49b58f7b4552b02d7453c86daad18a5c5ca8060ab6b7ee8aa80d69cf0c2cdd650fae781335445966b34471282779f3da8cf08d9d623702beca5304f92a06e2bdc580ed56f1cad7ee5eeb5cc9ab5e795f99a42ea87e536d5e2969582a54634caf8e086691a3e54d013ea277ed8ea6fe00e2e86b78ab95cd8e14df41583b78d881c9fce82b70071f784458f86869b0790d95b210805e8f7c8d41fc9c3d06f88d6ea98e6e80b9dc9870f78028ece5a31d2334ceae8d87e4de37f32e2e5bf5f91abca027f80cdebd61dbc719f6651123f5ccc643c51eed5a95d8129a0ef752d39142e8beb28d58ce5859ea66dd47f0ac77aad881565895c7c6135ccb71bda2a5e8aa05cc55f436663ffef3ca62764ac90aeffbd353fce323157d9126dcd30503724117359845b0ea4283b9f42ab8373889144838e320da919d903e05976153c7743608668b5f478fa3c6b7347abac4d7fc3443c1b45c32f4681ac6eb61bb46e6c49cc4d427f22beaba5f21d7c3eb77e47c05eb7d583bbf94f8de35c82ed7e63fb872178ce0891572a4917f5accf3869f800fd387fbe38e21733f4ebcc507c1e8ae8ec0756283d559e105d0d397ea6a84d9817db1c81ead43feaa9ab1161233c9fad65081b3dc5c412649e7725586a3cde751b694e5656695ed575894c3fbd37ede7d7375abeedef4d8266f4b07f55686336da93f6d399e7b4d68ada3145cefca383bf65a4d5b6f693fe60a4b6e49b5de5d8042d961eeea3bd25916ade99442663d6c1743d25f3011c9dd4d3fd118dab496f7ff1ba29b14597853336633c3fe80ee3f6b12f20ab9160e60b3d7cc553a4b495233f8adf1754e7144d12d9a42227d8dd7d6ce5795be8df2b67b888ff30459dd422003260c8305b916cf8cb0c9ac4e5712ef40fc21b262b97aa1f15d7b364f6b0904a3cce432f91c2938449f22d9d298e6698b2c7dddb180999c8a8ba324555972372c0f9d045589b74bafe68d1a30df93e3a656f72d0078eeedf5f64d3eca9d8ba1bd8c2d5069ad2621f3fff332e57e064801da7288f7e5408b4182a641ba6106831d8e4fc5c9f8a5976cdd8089db0a7f2db8c5acb0276e3d6c4edeca85f7dbaf566bfc4405ac938f3e949e073163e173a19da37964e780b2d3063d2091f60e769a8aa679c6928f6cbd60250752eee5b03757fe9787c702010e2e72cc9a636516d4827e0d9706300967cb29fe3a94552d48e842a5c9b619bd8a1e5e3eac0436dc59d464b44be7c0445092694fb1f5979583140c1fdb7ac74b45f06793c656d5279bea992fecf87c8fd1f7ba431821eb2a87e36d0560def9e0687f8bae3ab74073052869168649ef4bad9158ef7bb9a461c51ff3e4e26bcfb70d95bb0fd0d048d2d9b769065f8e69e101f71d41b91984bda0a436429f89e1fcc2e50a5eba9aa4c9fbd4e61026a1847f38a2a34d4eebd92bd4f43babec1d6035cab2ec7e0ad0b9ebfe14a152db5c48dc81a22dfa053e9a0c7d8634c38a6117112409693f3bb9927b2ca05a2638f329a56edaef7258ef3692ae31a58c774cc1540a26c41e83699399cf5bdd8bae8b2c65aabc2cfd40c6558d7caf2fbd7ec11e7a5ae62c31548e90392fd9e70713fc07596da3767357d95377f0b20e5cd94d1ca3557cd21da70f5a47bf207f503fa9d1a4464675829373754875a2c7c7531515361f1e2e295d18a538eecb037d4a454339cba27aea8419ba4db29384f2738011362204ece21cc98a3efed01754db7e43ce25a7b02c28c3bec31d5f54401043847f726acd11996e82f8a5a2bbb74f45265522265d915f617727b0097a4025a05b54d63496be53ae5c4dd068dd93e55058029d6aab11584a17ea8b09ef6d75be6ff41084b03a24abdffc4def91cd86f44690a9c88340854edebd1af39ced11394f5bbce11cf496d5cd0d127c334f4147470cecdb5dfe345779a1d7b730041bd380eda67dcc4c9b563c29af7f372303838a1a1a51bcb2f451f6ecc1a5ae4a9b03f1d23565f88330489c171f041b79af184ce45dbeaf47efc5f38909e13e185d96e65519dcf1cc3287466b3fd18925cf9701834911a374ee47f6a1f6aafdf8cadeb755ab48818ec2554fd01944620ec88abde8f3b09c5a3ec143f6551da28ff1a50f50773771038fb1e1971b0f45e4b3fde3ba20b965bf39b9fabccd6b7855382fd3887e2dde38ed17704db69f9d37d0c416df1e30319afe946138f1bfef1f2dec97caf15aa01f723cf800b20962d523d1e8ec43b3072e355fb7bcbf0f8b76357187f3a2e9bbe6eb86fd0744e8e3f95ef964669f0b8243681ddf363758463a1108489564ba9c184ee5e0d4f6be7288b6dade7588804cf988178c5ff921fe6fd514a3005ddc0c07216be9558afd5d9e71a592482699013b9ebc5cabc7ea0da5618bae53e0262e72b53399de428a1114713a5381e1e5566c2a71327023b48105531e871c284a946e1c73fb2c250428f3aef385fd5816c2480501ba54175c7f61c1e2a0b4577c712c8d3e1e2a456179da65f457737c41667b513d9a58b66205323b250ff3cf49a77d00c6b6d0708dbb65647bd0f564638eb1567525207c846c744e386baf0867199d8a488b666baa994607e372ae1ea9c97d712adf1d23675e08d5b69451357080439d593a622d6845ede035c8e1579aacb42445ee96081f39ff985fb3ccdfd98c801577026c2aa8874a8b424518d0a7953196ae0d604b1f71728290946d7ae1127e9c650ed9d9a69706408804ad9ec749fdc4204e83777bfa04fae802550043340e257dfea547eeb14e0912935604f7b2de8322d826b8189a32d0cdf705973ebb575884055c947d28e360f88875d924987d62473e3469e0340692538e41467b7c563d034a90de6e574b9172a093fb4738a3be370538222d2aaa2038843a3b1cce6f479e99d30e4dc777216412d64b66ba508deef3142806e7f78e7fc2c3e28cbf2a4a646819abc7a3e166e0eebe670476489034f825d05e966a452796a01ac2d6aeaaa4abacbd0bef870e97a002f494acf096ab092706bd4cb47c3b098873b56e1d69d527a0d60be3d58fbd97f0e154f489fbe2a0bbed924602fbead4d62b54c3ad1a9a30d16c13f463df977d17594a63411cd163203d0709a871cdf3cf76a331383f9c1cb8998c64811cd9b68f2d8e818b3eee69a27afaeac65348b0c89892191accca21a4d0fdf9c67554bfc3c7f01c88d17f85d84b894d7c93e8ae2d2c0e76c474a9819ef189ef52c50c5e974f7b5de4670c941319be0dc7507233ac211100c9e8fc7b592741b8cdb1e945cc479685c7496d928b15710bd09f7a4dc3d2b6017ce9113cd4c8568392bd502c59618527d8ec3a8e8b9bed442acc4a6cf201e39e1704afe9addb4ae6d548034934dd42a1be6c4f86dec45a20640b172da0bac7b4e0d218bb24659107e6bf6d20cf9fbf3dffa7a15491ecd09802dfba18427877a2436cf7ccadf0537526b6dce523c4bc8bedfb7f819c2177e80c9b4cde6f282fb96a555f93cec6d5e53ad5b2f8a00b2c8a3c1806e99c5e6c460510622704ed5f4224ec1a790252aff202da86d567bef98c107678e34264d6a7698933a9c0b04f43a4af9ff6e8a7e2441c721accca102f7741310a4384ff33c31523801eeb0db5dcefc9760768187fe151ac1e39e334bf106bf6cf157df5965a48ef0d0b2c71ac052e3018368ad08a92805d53163be40540f93872550dc61974d7b9d21671b96dd13d1db89372a9847be8d0dbade639d95db61bdb14c5086c829785aab11a0e86f25884f600672b96880239f49a90fc714dc6a2bb41364c2842a068239651e4516c64e5d8e47cba8b1351b69a084304e812d8f2c441a95a5526bc4ea1c0d6274251aff21d2143a89e59599715f941f6484c49d10162cf3d73d5a4ffc358bb3c35f6e80e831a2877bf73c44084bfce0f533b47495d1f03a74cd5121792def2621dc0281e9b4ac99443d98162d3a0b7edb35cf847ea561eae01ca114d7556e7858ef3c93b9bdbc6a84aa7b81d4aa2c3a85f8f899e54f892db5cc438ed997020f72496c496304408e6038147a0302defd5d63b5161042006a68fd28949c899f1f2b7b3937d93952f8bf28569cedcb6c1a74adf84b87cfd05ec9f47830702d9bf4e470e97dc2af40e6aefdec9130b632fa5555cd016fa68b6b81d7ecfc493b8442e15bfa2125e19c2d7dab2319af56c6baa2a8b069bc8ff2911e25266b04d5882f0f761b2daceacf57ea7a9e27b6673de99af7c312ed552c9df01cc6e55012d0b260ab70e5c8bb9e087803875a823d9754172be69d1adf63fe13d3fe376b8a3f4c297a8985385a868b8e430c6bd6d6e394fd0d7846270803214d4e4edffff49714a9dd78c6f99b18f7d79e0863d401ae20f29de783d428c29b7c668e0c08cff386d3f8fbf55a4219234e9bc26abc05efc3797265f4d716f1e5f1c00d1c325ede2903f015ab5a3104f13f716360275cedbdfeaa58d4d0515431d527819cbc1f586ffc1ac0b397c0350a55364d83d6ec361d7a5d1b10b8c3edd0b7729d7a488550d86c9aea83241710e09b1c39bdd7d213e3c9ed67b3bf779bec31a6c37fb29bb67a37e7f2e1c8497aa4d7974f28b09208f6b24ddc1ba0bbdf608c0d3b66e7e5bfaaa093dc856547f30ebc1160a37351d93766ac2bb3bb4f3046aaa17c9e90b9ed6854136eeac960b08642c0d9c871cc37dfc96c2ec52f435e4ca54c095ce881a345b4c3aba18d0b51920b09768bcb23a4c5838abf1ba68dd9964479263904415c6d4a3423e3810c546c6e4ca3e5283d38de54581f816d238241f0b8b85278c7e347b27ab3b0078fa2c6f43ee0e717507e6f273c2c3d5191929f4cfeb02b8e784bf4cbcdcfff0e86979529a0e069b4a061c6cea5511c7a16ba5870250072fc7a04dabbf9c378ed1723a593e5ffb2f98f03696183ac9890b109445902ba6ce084572dad62416da1337c579e6d44e6614f680ccfa5501dbae08013457bdd36cf4d8e167fcc5129de25d554028fcc613b6b17ff78da315057870df1fcc44932d974f3832afb5ba1a97e55784e3adabb1488c10c0dc0d4502545692cad469f6f0a1d241c490b744a59cf9d5a1b6320f8d51ecb2181ef2c4496056ebfb762e93ad1696bb23d12f652bd7b844a66c3afa27ff54040e2f79b3c059ccaae2db1a45a9a2bffa9bc768a91d28b9e8a8e7263d2192d33028ebc2b3dc5d2a52cc12a81577dea5e3c954192038a6eea635cc45a09389d2c6c607ba7a6299ac58fd03df035fdab22da9e14eebb61da4d51f968387cfb4401a8e29671e8d80837c063a85a179ff86564188eee6f6639e8455bb515ef5816d9bfdffb67702ff5927271c493c2d7a93c99376cd97ee545ff0e69c3f23adb603c2de21fa08c61153552cd568b42bb4b67cbc381dca3c06c2061bdcd28f4cf01f96080387391743f44d96363e4e3d48c9fe174a15cc15d91dff7775deafd21cfc5017a05797d1c1de67892f3900687db684172c80eb4595fbf553b7f6fe6bc7c57c871ed6ddc4dbda64c12a0f487f2209a3e073bef45ce20a6e809d1c62a6589d5554dd3a9dc7ff0fd25ef14513ef63a6c2dc3bce92946daa41943e2c75a0ca3ff9ac62815fef10c8d0bad84d0dc975296f6c15a36d279402d5e9b203453815f2d2eb4d1d595c30be33d871af857fb14c5c21350958eede24be424455dd30c126a18241865a7576c1894aef71c1078b1d8c88ab586615e71de23bdb1b691424a666413d99a6076dea8356039188c53ff3b661328ee7566a3c65f1ccfeef577d9a0b196dc44317dd0823741178e313ea1b76c80963c268fd5b10da248bc076aa7b55fb357768c703cc90825945dcc975f5cd0e842bf2cf37989223cc5e4ceba9f808d1634eea2dd50fc2ec06fe2ac269207d997a9e1a801d92cf7a88c8e85d1308b6ac9e323e8472eef4ba97aa5e63765be2959952ef8e3dba49da5a283147506a181e4084f7e6e9a7c0b26c5683a013ad2ad0b4bb6722eeb6413ab9abc66052fd3ec1ee45d9eb10fe627b72dedf546a8fd7fb4184a15487ce4199a39edb1a1439bd8b06d737a61fe5fa8611f1bd141f869ec695c1295f0f0618435dacffdefb00887708c093720b9ca7b77db43e8a102109ed1ed5ba41ab2e516503dc73f2034a1885315176f80514388feccfcc8c47b9a7612e18e9059f022540b39d8a70fcbc1501765753d990d88231caceb6aec666bff35f58c6581894340eb07b5abe08b3648d70f012c2a034d1d15a54d23b0df398bc860f6f973c445f4715555d3f0c96faaa9db25fda46b62bb1af24e7fd619bf70304e53ba3c2ec2e67ba8509cda1e5e6cbd48a5fe41fbdc96e931bcb2a22ec6a492252e118d8234bc01db16080093ad2c29b8bd5c51c0d2e8801d020b250ca0984291e2707097cd8d71d7bce74a200405df9a32755c95e85983c1888dbc0af509ad3f75012c5b6b621bb324e5f6b93e15d0cb90fd99e27a1c2b38597bc339ca01bf3edf5a565e3ccad29c4f56509ac7c2ceb15da8d85f58cfb694bd0cc33df5bd743c0d074178935b525b55671dccf638b853440856af474dc192981610619319b47e1d8c1a3f8cdcf25d9ce5696b1fbb5b88648a7bb9eb4786de69081252d7f0a2b8b4c668c455a9fe2c5d58e29aee6b21e5cdf3cafa3a23e90bc350eb33d25583ea2b6430bf3f9f674afbef2292482fd36701011885354d36fb32829bc518faf593d035bb1cb7ffbf173d85e4038b97be2b3a9ed3b5610ee8e520acb0e49e6b190cab916307f35a837fe366db78cd8c47a53560a6d2334dbbe39245fb2e354564bb822797f6a4b81d0a0cd3aa46de61f105aed59c013d7c6ea3557638f7b2b2e5a49aacc584f954820cd864b60872d61203e47f821a5a7c2434bdf76d8df505fd43ee817bbdc26868a78780f38e5e8c4c8d4bdc05e8409275e05d7723de6d69fd3a46e561232c28871be3b0b4f9c650819aed18c31dd6a9b3b49d95db5f948bfe36a067a3e89a13d7275e778f23ca2b0d22d7198be3b2246286922c4376ac15054c2fbd5b1e5ad06ad53a0209675298172d7a0c55e1ed253398e724a17259a5a029b1adb035857fceee4765836838628926a16e3e996f13fa49336e50f91579d702e85713549cc58047c898b94a7c416dab6530d93a1022580dfb8ed9958dc7f9c7461163537baf70a8dae718ae00a57360eb1c89e597d31d44dced0d8c62d2ac4cb984b331f3316a200881029c359d51231584b4dfe2455ded5e929ce62fd56d3e5128155e68e995ad0b0c9321397c4419ed2d0f47654e9aa8720454d36e7ec84996150f6fa5d37eeb88eb1faecb7dd50008653d69a186e76610d677548e6c42d76bbeb24841cd92bb75364ebeeed0539d2cc85168b205b7bcfcbe6de3f30ad5438db14b2b50ca2efe4fbd5a4734c235f89ee0cf51b1e58f7a1d61e2c1059b8cc5554359f555e64a0a8e7f416c2648c7eb9440d3454f2108bcafcb4c3f553e6a12592ea73d8e495830837e8f1dbf3c64fccae976e32ece6f87593cc63e3dfdf12a33d060be2b5dd2e620dfd9f9394b435580844310237e4945d028dba6321e39b2d2139a1dd2e09531a83b52b2482fcf125d5b678560861aa926f3a77b78e5a2fc990e0b1267c4098af80e64f08fb1be05725c23120f5fbd28ace858d26491823e9b0bb3b278dfe87bfa98fc9ffefdb76f93c78a3bc5b21f0097f3e0452f4f2c82c06cc703798e455889e243ab0d54d30a4520ea4ca888fa3c1a6c2e87de9cebb2847ddfd6541b7a5d48c02c8760965ab83f28c318d0ce4cdce192fee60e88ecee2e55166d9e8406cb9a328a103bb592c65a0011806f82ed6f27d46505306e5f2cfa4b8e52b70aac2735043d25e955d8616373f3d7d235690bcfdc3633702b6341c3020ec5659ae619244f4093dc9d7e32afa3a44bb0697a63c9e5075e5b871ab4d094e5de8d8e6a05f8744103d24590507ad659762af2c4a071b5e4f7d4be9486cdbc5d6c7e08109216bab4c2d4eb3e39a1f9f3d83f7c6a6e4dc72a323cf08742cad4dc47d6427c970289bec34d87c17b54f0cdf0119a6a4ac9ec45c5b0d99de1f46275f340463d89afd49bec6e7cb97a0a8c691aa081af6376d87d478f8a12526bfc5b3328827430cc241e8dc3f05086bf1628a04164637c812c778a68ce95ff2a17cdf6cbda53937ad47c66a7f30477e25cfd1309eea6d92c564198a11b1b825ae4d43108e39e8c7ced2e7fe39c8536241af029a6eebb7297818e1319185b21ca6d0d514f675684920b2cd8db642bc456063d014838b5d78fd5d669b8ad0ffd65e037f72b2a6b99f1285e5c36c3b47d01f7de83d3af4cb035258a1f8a95581178f7b02843e6c3f06d4cd9755c9fd3841cc8822ce528504db2282f1688bd3d12b8dbc779a23df10d45cbf8739a1103e425dab334883821728de605925bb751ba9e84929a67e57458a6a42657feaec85a2733ce4fbb1cb6fb12e834c6a560bd5d489f4cc87510e879ce68739ce0495aba39e4d3c0d05e5b3970b2b0e70de2f2ee183b1cefb090154c62e27edbdc3b0772cfc8c7ae49e1fd698e1ceaac23e535fda5789509364572c3ac2dad13e4eae68dabbc7fd15d07a15935a84ae432e9d01b34b8f125e711400da2ba29ee02e5aba0599eb424bba49ff71eafabe2b4704c9f71aaa63d6c9c943bda2ca97e36872a131114c01de44ecf036ce3699f258bd7c79b39442ae77032fa60fc307d3fafaace86b9d15008c7e3af31d8b03f95a8e5cb52dee4708382468b10d7bc88889b423e6ce7e09f6eb852006acf58f83c627afc765705397ef28450e194edae9cb28b3161ef2558a690dd219ce492592401d4d70f6bd8f829f24de3eb16e5604c78449fb0ac0d849e600b0da04ad95e87f646d2e07d1f3efbe90b6a5cdce72b69f086940237c1b16e1f9c46d44cb3ac66599fcebb5673c57ec2311b4b8028b2ddc64c4893d80121bbc3cda9ab06fb13b4f9d44b4004a22d425940d7042ddd8343d711dd6c490ac094cfafa362bef0a6e3aaa857bde68693136599dde689ae01a87381f10fecdbd6fda5d5cdf60eda5cd189676a5c5ef2ff26a517c4171c908a6cf068efbaeb9bd6d5c5d336a442eb65874dcb5223ca19f3b06c70d0d349411e50ccaf38de83deb23930332504769a4f943cea8a345a4b740c83255b01ad089e647f58008f0cbfb467a9c26bd28e956cbae9eff36da3a18dcad1756df51b2cd468866928dd5cf84b069982329b242360ad53a61afed48e335c64bd7352bf7c5fbbe708ee7477e2b2430820b46e9ef2d603180640607c38813154eaf66b4c845325b00843ebe587e1197f0ac3501ca1437cdaff08ad9ca59b04d88055f4834f97be2d611c14b1e7c397a23345c5897a3fcdf606f849b5dd4f91e971fda828d59cab867ff1ad20ac259059c9439af8d4fca64f1aa989f993baaf8e6fc2ea402e4438b05067f9a9ecd62963d8a190ba4b6762d5762ace0fd32259a30289ea21ed138686d321439d0419767bc024c47e4d56a356837219d750ea85759b0a155409965e60ec371bd0ec5d4335d044431e830b2e5d38a4f976d4c3f93bfe6002a0b012f96e0ea2ff07345b1aa7a9dc5c24c921e2072466ee5ea8398b2b8ed8cf9c5458069da157266845be4b35a31eb15b227b0711a15b4fec2d7280d8173d92a98948bc9af046e22db4c682867f586f38829837609317a3966cf46e1717d1676bea38ee72cf017ceedc56c46365314b8bcbcbad655901e33bee059061e9e6e479db0244ebf1e4adef4f6b18d46c3b7668bca44887c1032225b12b5ddb1fadb4ed120b1c4a098995ea6b5df1d701f1b11d4d04511968e5b19f468dff97c220171bb064bc7a58f139a221f5c8cb5be4b006aa565c53fb4a823617926b080301bfca773355c930eb1cdbf205390baca064d57f96362a7180009d26fefc2184fc059a2c97fef738c008caa8bb9eb12da9c2f6c8426e74795eb66ba7ff61e1bff5dee2e8d882ea1d93031d1e6ae0b91fa87e4186af69b4e1e891b137f4510ae4058b7fc819d3736c93937381d06fad0c053ffd0597a3a2c7a62188f4534f3f17c8ee4c45fdce53e9f3e63853ab26a1ab75b0c2d146e95663baa4384f9e059c4393a04eee0163ba4ff7f2c466bbd1c91b98a36c431a664f7c695c60b45810ad8ebf7bc320520d926a5dc1f594f5ca91d2d46bb0fc8d3ffec7eaf055369a38531f21d5d728567d21aa716297c5614b72e7080d20145389f74cd8613a03e14c198879756b3373c4dc6dd459ef9965ca3c43d7a2a8035e364d5b878115bc6a01f1dfcf1a5d4fa5a48e8bebef1eada2bb7df06be0c06f6a6c3462d1c75795eb6886a60f391653a5f1215e024d8cc9c54d0c7f3c0a60a0c19e0f42721e2c54ca41c7955adc84485276ea21d0577eaed30d3610421bb43b4b37853be1806c567c1b91ee1100bddf9823929cc58bee26044fef850cb4b18664caa19b326418f0f3f65b463ed945aa9e261ea7c21ccce261a51b64d451ea08bb83f87aac01acf95f48e5234875313ccf9ebf91d4aaa469ec18010e1f58349bb7f0caf8176ff26f964a26017b7c68f483e4afc48ab0bcf2042f4e157d2637ea6a82305b3bfc874603983360478c526ec767359693ea09d713c502b05f0a57fbd98f7e62b3efbfdfea0951d6cf86b12ad784c898ce11353fc43e56b074274c5971e62a9edb715d06c8298d195cfbaf063c4ec2e0a21539e0b7691d5355fb660566e07578d6d3b9224c7aecdd2025c5b0e7d26bc25cb510d080d52a6d829b8b1462a438bb707504a0697f6adde8260764496ac5a92a77d37036d37de03745f2c820871848059d52e94d964ba17f450b82a6c3322da517c42e2b51995b1086f8953aada1681eb43f366eb324b52b11a89376e2acd14ab150676592b585951b6c15cdb39b8ca46a679524cfa5adb3c954ca0bb69e40462dd40a0fe4aa3fc7f870435ec62455ec8949c40414404ad85cf457fa31b0a9d7b8b103dd928e3437e6d77279f3763b77e82d10cd8992b43ca6da87170edd841528061af25281f10e4093acbbe5c178f98c2001703d14ff8a0fec41281f5203aaad5c19367e234e9063872ea13ca044c14cf04cf7480dc319ce13077fdd8814248fb27482709d0ec22d15b6255f8c741d0c4bd8b96369da640891560a3e91f185e81b02b69ab21a72646462e3050e057e99b0c5e397aec9274ff3080943e0fbe7471f58c7a26cdf6933912762cbea684abdac71f4ce03794c3413feeed7938d4824ed2aedeffbe95c2937084415358595269b25f4f754667fcddbd237b1d1a1ea5790986ce2519cd5f128251369a935da513d7ed49a0662b049064f92b9c04b9d139d4f494b9d09158263971d43972c9641dda391b377690f2e4053259a59763989573ad5ac153a843c5494abb888e08645701dbc1488fba2f9b2ddfe9a94a2c75f85a342be41523017887d548210bffb884fa759431ab50bc6a4bf08248ad656de327a34c0555b1ac633db702057d28e6f7c8abddbdfa71d9122b9ffb135062b528bb973093a0b20041e89cb289d744e1f57e8d66ef2ae145250d95fe8fbf6ef9379ccdd0012b9bcb52fee5c0c0ac148b2824c5f71af959d4da4d8a33e25a3dca66af7bd0f59f0d2359fc"
295 | </script>
296 | </html>
297 | 


--------------------------------------------------------------------------------
/examples/example-message.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!--
  3 | Portable Secret generated with https://mprimi.github.io/portable-secret/
  4 | 
  5 | This file is self-contained, it embeds an encrypted payload.
  6 | It uses your browser's cryptograpy APIs to decrypt it, if you know the password.
  7 | -->
  8 | <html>
  9 | <head>
 10 |   <meta charset="UTF-8" />
 11 |   <style>
 12 |   body {
 13 |     background-color: floralwhite;
 14 |     font-size: large;
 15 |     margin: 50px;
 16 |   }
 17 | 
 18 |   div {
 19 |     margin: 5px;
 20 |   }
 21 | 
 22 |   pre {
 23 |     padding: 5px;
 24 |     white-space: pre-wrap;
 25 |     word-break: keep-all;
 26 |   }
 27 | 
 28 |   button {
 29 |     font-size: large;
 30 |     padding: 12px 20px;
 31 |   }
 32 | 
 33 |   input {
 34 |     font-family: monospace;
 35 |   }
 36 | 
 37 |   textarea {
 38 |     font-family: monospace;
 39 |   }
 40 | 
 41 |   .decrypted {
 42 |     background-color: palegreen;
 43 |     border: 2px dotted forestgreen;
 44 |   }
 45 | 
 46 |   .hint {
 47 |     background-color: lavender;
 48 |     border: 2px dashed black;
 49 |   }
 50 | 
 51 |   /*
 52 |   pre.decrypted {
 53 |   }
 54 |   */
 55 | 
 56 |   img.decrypted {
 57 |     padding: 12px 20px;
 58 |   }
 59 | 
 60 |   a.decrypted {
 61 |     font-size: xx-large;
 62 |   }
 63 | 
 64 |   input.password_input {
 65 |     font-size: large;
 66 |     padding: 12px 20px;
 67 |   }
 68 |   </style>
 69 |   <script>
 70 |   // Display the encryption inputs on the page (invoked during body onload)
 71 |   async function init() {
 72 |     document.getElementById("secret_type").innerHTML = secretType
 73 |     document.getElementById("salt").setAttribute("value", saltHex)
 74 |     document.getElementById("iv").setAttribute("value", ivHex)
 75 |     document.getElementById("cipher").innerHTML = cipherHex
 76 | 
 77 |     if (secretType == 'file') {
 78 |       document.getElementById("target_file").innerHTML = `Download file.${secretExt}`
 79 |     }
 80 | 
 81 |     document.getElementById("password").addEventListener("keydown", (event) => {
 82 |       // Decrypt when the user hits the Enter key after entering their password.
 83 |       if (event.key === "Enter") {
 84 |         decrypt();
 85 |       }
 86 |     })
 87 |   }
 88 | 
 89 |   // Invoked when the 'Decrypt' button is pressed
 90 |   async function decrypt() {
 91 |     try {
 92 |       setMessage("Generating key from password...")
 93 | 
 94 |       // Load salt, convert hex string to byte array
 95 |       let salt = hexStringToBytes(saltHex)
 96 |       if (salt.length != saltSize) {
 97 |         throw new Error(`Unexpected salt size: ${salt.length}`)
 98 |       }
 99 | 
100 |       // Load IV, convert hex string to byte array
101 |       let iv = hexStringToBytes(ivHex)
102 |       if (iv.length != blockSize) {
103 |         throw new Error(`Unexpected IV size: ${iv.length}`)
104 |       }
105 | 
106 |       // Load password, as byte array
107 |       let password = new TextEncoder().encode(document.getElementById("password").value)
108 |       if (password.length == 0) {
109 |         throw new Error(`Empty password`)
110 |       }
111 | 
112 |       // Wrap password into a Key object, as required by cryptography APIs
113 |       let passwordKey = await window.crypto.subtle.importKey(
114 |         "raw", // Array of bytes
115 |         password,
116 |         {name: "PBKDF2"}, // What algorithm uses the key
117 |         false, // Cannot be extracted
118 |         ["deriveKey"] // What the key is used for
119 |       )
120 | 
121 |       // Derive a key from the password, using PBKDF2
122 |       let key = await window.crypto.subtle.deriveKey(
123 |         {
124 |           name: "PBKDF2", // https://en.wikipedia.org/wiki/PBKDF2
125 |           salt: salt,
126 |           iterations: iterations,
127 |           hash: "SHA-1", // As per standard v2.0
128 |         },
129 |         passwordKey, // Wrapped password
130 |         {
131 |           name: "AES-GCM", // What algorithm uses the key
132 |           length: keySize * 8, // Key bitsize
133 |         },
134 |         false, // Cannot be extracted
135 |         ["decrypt"] // What the derived key is used for
136 |       )
137 | 
138 |       setMessage("Decrypting...")
139 | 
140 |       // Load ciphertext, convert hex string to byte array
141 |       let cipher = hexStringToBytes(cipherHex)
142 | 
143 |       // Decrypt with AES-GCM
144 |       // https://en.wikipedia.org/wiki/Galois/Counter_Mode
145 |       let decryptedBuffer = await window.crypto.subtle.decrypt(
146 |         {
147 |           name: "AES-GCM", // Name of block cipher algorithm
148 |           iv: iv, // Initialization vector
149 |         },
150 |         key, // Derived key
151 |         cipher // Ciphertext
152 |       )
153 | 
154 |       // Remove padding (added as necessary for block cipher)
155 |       // https://en.wikipedia.org/wiki/Padding_(cryptography)#PKCS#5_and_PKCS#7
156 |       decrypted = removePadding(new Uint8Array(decryptedBuffer))
157 | 
158 |       // Render decrypted payload on the page
159 |       if (secretType == "message") {
160 |         // Decode bytes to UTF-8
161 |         plainText = new TextDecoder().decode(decrypted)
162 |         // Display the plaintext on the page
163 |         document.getElementById("target_text").innerHTML = plainText
164 |         document.getElementById("text_output_div").hidden = false
165 |       } else if (secretType == "image") {
166 |         // Transform image to base64 string
167 |         b64Data = btoa(decrypted.reduce((data, byte) => data + String.fromCharCode(byte), ''))
168 |         // Create 'data' URI
169 |         // https://en.wikipedia.org/wiki/Data_URI_scheme
170 |         const imageData = `data:image/${secretExt};base64,${b64Data}`
171 |         // Display image inline
172 |         document.getElementById("target_image").setAttribute("src", imageData)
173 |         document.getElementById("image_output_div").hidden = false
174 |       } else if (secretType == "file") {
175 |         // Transform image to base64 string
176 |         b64Data = btoa(decrypted.reduce((data, byte) => data + String.fromCharCode(byte), ''))
177 |         // Create 'data' URI
178 |         // https://en.wikipedia.org/wiki/Data_URI_scheme
179 |         const fileData = `data:application/octet-stream;base64,${b64Data}`
180 |         // Activate download link
181 |         document.getElementById("target_file").setAttribute("href", fileData)
182 |         document.getElementById("target_file").setAttribute("download", `file.${secretExt}`)
183 |         document.getElementById("file_output_div").hidden = false
184 |       } else {
185 |         throw new Error(`Unknown secret type: ${secretType}`)
186 |       }
187 | 
188 |       setMessage("Decrypted successfully")
189 | 
190 |     } catch (err) {
191 |       // TODO better handle failing promises
192 |       setMessage(`Decryption failed: ${err}`)
193 |       return
194 |     }
195 |   }
196 | 
197 |   // Transform hexadecimal string to Uint8Array
198 |   function hexStringToBytes(input) {
199 |     for (var bytes = [], c = 0; c < input.length; c += 2) {
200 |       bytes.push(parseInt(input.substr(c, 2), 16));
201 |     }
202 |     return Uint8Array.from(bytes);
203 |   }
204 | 
205 |   // The cleartext input must be padded to a multiple of the block size
206 |   // for encryption. This function removes the padding, expected to be
207 |   // compatible with PKCS#7 described in RFC 5652.
208 |   // https://en.wikipedia.org/wiki/Padding_(cryptography)#PKCS#5_and_PKCS#7
209 |   function removePadding(input) {
210 |     // Last byte is the amount of padding
211 |     padAmount = input[input.length-1]
212 |     unpaddedSize = input.length - padAmount
213 |     return input.slice(0, unpaddedSize)
214 |   }
215 | 
216 |   // Update page with status of decryption
217 |   function setMessage(msg) {
218 |     document.getElementById("errormsg").innerHTML = msg
219 |   }
220 |   </script>
221 | </head>
222 | <body onload="init()">
223 | 
224 |   <h1>This page contains a secret <span id="secret_type"></span></h1>
225 |   <h2>Enter the password to decrypt it</h2>
226 |   <h3>Created with <a href="https://mprimi.github.io/portable-secret/">Portable Secret</a></h3>
227 | 
228 |   <p>
229 |     This file contains a secret (message, file, or image) that can be recovered if you know the password.<br>
230 |     The secret can be decrypted without an internet connection, this file has no dependencies and no data leaves the browser window.
231 |   </p>
232 | 
233 |   <div>
234 |     <h4>Password hint:</h4>
235 |     <pre class="hint">A yellow edible fruit with elongated shape. 6 letters, all lowercase
236 | 
237 | (N.B. this is a _weak_ password. But for this example it will do)</pre>
238 |   </div>
239 | 
240 |   <div>
241 |     <h4>Password:</h4>
242 |     <input type="text" id="password" placeholder="See hint above" class="password_input" required>
243 |   </div>
244 | 
245 |   <div>
246 |     <button type="button" onclick='decrypt()'>Decrypt</button>
247 |     <span id="errormsg"></span>
248 |   </div>
249 | 
250 |   <div id="text_output_div" hidden>
251 |     <pre id="target_text" class="decrypted"></pre>
252 |   </div>
253 | 
254 |   <div id="image_output_div" hidden>
255 |     <img id="target_image" class="decrypted">
256 |   </div>
257 | 
258 |   <div id="file_output_div" hidden>
259 |     <a id="target_file" class="decrypted">Download</a>
260 |   </div>
261 | 
262 |   <details>
263 |     <summary>Details</summary>
264 | 
265 |     These are decryption inputs, that can be safely transmitted in the clear.
266 |     Without the correct password, they are useless.
267 | 
268 |     <div>
269 |       Salt:
270 |       <input type="text" id="salt" value="" readonly>
271 |     </div>
272 | 
273 |     <div>
274 |       IV:
275 |       <input type="text" id="iv" value="" readonly>
276 |     </div>
277 | 
278 |     <div>
279 |       Ciphertext:<br>
280 |       <textarea rows="8" cols="80" id="cipher" readonly></textarea>
281 |     </div>
282 |   </details>
283 | </body>
284 | <script>
285 | const secretType = "message"
286 | const secretExt  = ""
287 | const saltSize   = 16  // bytes
288 | const blockSize  = 16 // bytes
289 | const keySize    = 32   // bytes
290 | const iterations = 1000000
291 | const saltHex    = "f3cb8d76529b21fce9000a4de1d400e5"
292 | const ivHex      = "a8fef2a068034152e5f8a18efa98eea4"
293 | const cipherHex  = "057281d7c24c2c4fd17ee845dc67aa093a2b51a616e8bbfe5d7cdddfbadca809ca1ba273cc90192d9fe5c8b236dcdac5ce3fb4583485f3be8bffa5c0b29329b60146b3f05168241d42103ecb52c6fc43efa2dd0895b0f4e6483ffdc43d1edad10f5b14d7aba314647afb53ae80c9f1cf"
294 | </script>
295 | </html>
296 | 


--------------------------------------------------------------------------------
/images/cryptography.drawio:
--------------------------------------------------------------------------------
  1 | <mxfile host="app.diagrams.net" modified="2024-07-14T18:48:15.181Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15" etag="Fd3fDYkvEhBwjvAFQdbX" version="24.6.5" type="device">
  2 |   <diagram name="Page-1" id="T1-6JBChSrpK32Yw8LHf">
  3 |     <mxGraphModel dx="2162" dy="856" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
  4 |       <root>
  5 |         <mxCell id="0" />
  6 |         <mxCell id="1" parent="0" />
  7 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-13" value="" style="swimlane;startSize=0;strokeWidth=3;fillColor=none;fontColor=#ffffff;strokeColor=#000000;fillStyle=solid;rounded=1;dashed=1;" parent="1" vertex="1">
  8 |           <mxGeometry x="-40" y="120" width="680" height="520" as="geometry">
  9 |             <mxRectangle x="-40" y="110" width="50" height="40" as="alternateBounds" />
 10 |           </mxGeometry>
 11 |         </mxCell>
 12 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;strokeWidth=3;" parent="lAIXfmTGiXvmbAfdySJ4-13" source="lAIXfmTGiXvmbAfdySJ4-6" target="lAIXfmTGiXvmbAfdySJ4-2" edge="1">
 13 |           <mxGeometry relative="1" as="geometry" />
 14 |         </mxCell>
 15 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-6" value="RNG" style="triangle;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=14;" parent="lAIXfmTGiXvmbAfdySJ4-13" vertex="1">
 16 |           <mxGeometry x="70" y="395" width="60" height="80" as="geometry" />
 17 |         </mxCell>
 18 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;strokeWidth=3;" parent="lAIXfmTGiXvmbAfdySJ4-13" source="lAIXfmTGiXvmbAfdySJ4-5" target="lAIXfmTGiXvmbAfdySJ4-1" edge="1">
 19 |           <mxGeometry relative="1" as="geometry" />
 20 |         </mxCell>
 21 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-5" value="RNG" style="triangle;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=14;" parent="lAIXfmTGiXvmbAfdySJ4-13" vertex="1">
 22 |           <mxGeometry x="70" y="50" width="60" height="80" as="geometry" />
 23 |         </mxCell>
 24 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-198" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.75;entryDx=0;entryDy=0;strokeWidth=3;" parent="lAIXfmTGiXvmbAfdySJ4-13" source="lAIXfmTGiXvmbAfdySJ4-2" target="lAIXfmTGiXvmbAfdySJ4-11" edge="1">
 25 |           <mxGeometry relative="1" as="geometry" />
 26 |         </mxCell>
 27 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-2" value="IV&lt;div style=&quot;font-size: 14px;&quot;&gt;(16B)&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=14;" parent="lAIXfmTGiXvmbAfdySJ4-13" vertex="1">
 28 |           <mxGeometry x="195" y="404" width="120" height="60" as="geometry" />
 29 |         </mxCell>
 30 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;strokeWidth=3;" parent="lAIXfmTGiXvmbAfdySJ4-13" source="lAIXfmTGiXvmbAfdySJ4-1" target="lAIXfmTGiXvmbAfdySJ4-3" edge="1">
 31 |           <mxGeometry relative="1" as="geometry" />
 32 |         </mxCell>
 33 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-1" value="Salt&lt;div style=&quot;font-size: 14px;&quot;&gt;(32B)&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=14;" parent="lAIXfmTGiXvmbAfdySJ4-13" vertex="1">
 34 |           <mxGeometry x="192" y="60" width="120" height="60" as="geometry" />
 35 |         </mxCell>
 36 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;strokeWidth=3;" parent="lAIXfmTGiXvmbAfdySJ4-13" source="lAIXfmTGiXvmbAfdySJ4-3" target="lAIXfmTGiXvmbAfdySJ4-7" edge="1">
 37 |           <mxGeometry relative="1" as="geometry" />
 38 |         </mxCell>
 39 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-3" value="PBKDF2" style="triangle;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=14;" parent="lAIXfmTGiXvmbAfdySJ4-13" vertex="1">
 40 |           <mxGeometry x="355" y="110" width="110" height="110" as="geometry" />
 41 |         </mxCell>
 42 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;strokeWidth=3;" parent="lAIXfmTGiXvmbAfdySJ4-13" source="lAIXfmTGiXvmbAfdySJ4-7" target="lAIXfmTGiXvmbAfdySJ4-11" edge="1">
 43 |           <mxGeometry relative="1" as="geometry" />
 44 |         </mxCell>
 45 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-7" value="Key&lt;div style=&quot;font-size: 14px;&quot;&gt;(32B)&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#6a00ff;fontColor=#ffffff;strokeColor=#3700CC;fontSize=14;" parent="lAIXfmTGiXvmbAfdySJ4-13" vertex="1">
 46 |           <mxGeometry x="496" y="135" width="120" height="60" as="geometry" />
 47 |         </mxCell>
 48 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;strokeWidth=3;" parent="lAIXfmTGiXvmbAfdySJ4-13" source="lAIXfmTGiXvmbAfdySJ4-10" target="lAIXfmTGiXvmbAfdySJ4-11" edge="1">
 49 |           <mxGeometry relative="1" as="geometry" />
 50 |         </mxCell>
 51 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-10" value="Padded plaintext" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;fontSize=14;" parent="lAIXfmTGiXvmbAfdySJ4-13" vertex="1">
 52 |           <mxGeometry x="192" y="281" width="180" height="80" as="geometry" />
 53 |         </mxCell>
 54 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-19" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;strokeColor=default;strokeWidth=3;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=11;fontColor=default;labelBackgroundColor=default;endArrow=classic;" parent="lAIXfmTGiXvmbAfdySJ4-13" source="lAIXfmTGiXvmbAfdySJ4-195" target="lAIXfmTGiXvmbAfdySJ4-10" edge="1">
 55 |           <mxGeometry relative="1" as="geometry">
 56 |             <mxPoint x="190" y="335.5" as="sourcePoint" />
 57 |           </mxGeometry>
 58 |         </mxCell>
 59 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-11" value="&lt;div style=&quot;font-size: 14px;&quot;&gt;AES-GCM&lt;/div&gt;&lt;div style=&quot;font-size: 14px;&quot;&gt;(SHA-256)&lt;/div&gt;" style="triangle;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=14;" parent="lAIXfmTGiXvmbAfdySJ4-13" vertex="1">
 60 |           <mxGeometry x="478" y="253.5" width="120" height="135" as="geometry" />
 61 |         </mxCell>
 62 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-195" value="&lt;div style=&quot;font-size: 14px;&quot;&gt;PKCS#7&lt;br style=&quot;font-size: 14px;&quot;&gt;&lt;/div&gt;&lt;div style=&quot;font-size: 14px;&quot;&gt;Pad&lt;/div&gt;" style="shape=rhombus;perimeter=rhombusPerimeter;whiteSpace=wrap;html=1;align=center;fillColor=#e1d5e7;strokeColor=#9673a6;fontSize=14;" parent="lAIXfmTGiXvmbAfdySJ4-13" vertex="1">
 63 |           <mxGeometry x="38" y="291" width="120" height="60" as="geometry" />
 64 |         </mxCell>
 65 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-201" value="Encrypt" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontSize=28;fontColor=default;labelBackgroundColor=none;fontStyle=5;" parent="lAIXfmTGiXvmbAfdySJ4-13" vertex="1">
 66 |           <mxGeometry x="280" width="120" height="50" as="geometry" />
 67 |         </mxCell>
 68 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-12" value="Password" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=18;" parent="1" vertex="1">
 69 |           <mxGeometry x="-40" y="20" width="120" height="60" as="geometry" />
 70 |         </mxCell>
 71 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.75;entryDx=0;entryDy=0;strokeWidth=3;" parent="1" source="lAIXfmTGiXvmbAfdySJ4-12" target="lAIXfmTGiXvmbAfdySJ4-3" edge="1">
 72 |           <mxGeometry relative="1" as="geometry">
 73 |             <Array as="points">
 74 |               <mxPoint x="-80" y="50" />
 75 |               <mxPoint x="-80" y="313" />
 76 |             </Array>
 77 |           </mxGeometry>
 78 |         </mxCell>
 79 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-8" value="Plaintext" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=18;" parent="1" vertex="1">
 80 |           <mxGeometry x="-40" y="680" width="170" height="130" as="geometry" />
 81 |         </mxCell>
 82 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-185" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;strokeWidth=3;" parent="1" source="lAIXfmTGiXvmbAfdySJ4-156" target="lAIXfmTGiXvmbAfdySJ4-178" edge="1">
 83 |           <mxGeometry relative="1" as="geometry" />
 84 |         </mxCell>
 85 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-156" value="Ciphertext" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#B9E0A5;strokeColor=#6c8ebf;fontSize=18;" parent="1" vertex="1">
 86 |           <mxGeometry x="685" y="386" width="190" height="110" as="geometry" />
 87 |         </mxCell>
 88 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-180" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.75;entryDx=0;entryDy=0;strokeWidth=3;" parent="1" source="lAIXfmTGiXvmbAfdySJ4-157" target="lAIXfmTGiXvmbAfdySJ4-171" edge="1">
 89 |           <mxGeometry relative="1" as="geometry">
 90 |             <Array as="points">
 91 |               <mxPoint x="940" y="313" />
 92 |               <mxPoint x="940" y="263" />
 93 |             </Array>
 94 |           </mxGeometry>
 95 |         </mxCell>
 96 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-157" value="Salt" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=18;" parent="1" vertex="1">
 97 |           <mxGeometry x="685" y="275" width="190" height="75" as="geometry" />
 98 |         </mxCell>
 99 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-161" value="IV" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=18;" parent="1" vertex="1">
100 |           <mxGeometry x="685" y="531" width="190" height="75" as="geometry" />
101 |         </mxCell>
102 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-162" value="" style="swimlane;startSize=0;strokeWidth=3;fillColor=none;fontColor=#ffffff;strokeColor=#000000;fillStyle=dots;rounded=1;dashed=1;" parent="1" vertex="1">
103 |           <mxGeometry x="920" y="120" width="620" height="520" as="geometry" />
104 |         </mxCell>
105 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-170" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;strokeWidth=3;" parent="lAIXfmTGiXvmbAfdySJ4-162" source="lAIXfmTGiXvmbAfdySJ4-171" target="lAIXfmTGiXvmbAfdySJ4-173" edge="1">
106 |           <mxGeometry relative="1" as="geometry" />
107 |         </mxCell>
108 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-171" value="PBKDF2" style="triangle;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=14;" parent="lAIXfmTGiXvmbAfdySJ4-162" vertex="1">
109 |           <mxGeometry x="59" y="60" width="100" height="110" as="geometry" />
110 |         </mxCell>
111 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-172" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;strokeWidth=3;" parent="lAIXfmTGiXvmbAfdySJ4-162" source="lAIXfmTGiXvmbAfdySJ4-173" target="lAIXfmTGiXvmbAfdySJ4-178" edge="1">
112 |           <mxGeometry relative="1" as="geometry" />
113 |         </mxCell>
114 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-173" value="Key&lt;div style=&quot;font-size: 14px;&quot;&gt;(32B)&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#6a00ff;fontColor=#ffffff;strokeColor=#3700CC;fontSize=14;" parent="lAIXfmTGiXvmbAfdySJ4-162" vertex="1">
115 |           <mxGeometry x="202" y="85" width="120" height="60" as="geometry" />
116 |         </mxCell>
117 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-187" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;strokeWidth=3;" parent="lAIXfmTGiXvmbAfdySJ4-162" source="lAIXfmTGiXvmbAfdySJ4-178" target="lAIXfmTGiXvmbAfdySJ4-175" edge="1">
118 |           <mxGeometry relative="1" as="geometry" />
119 |         </mxCell>
120 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-178" value="&lt;div style=&quot;font-size: 14px;&quot;&gt;AES-GCM&lt;/div&gt;&lt;div style=&quot;font-size: 14px;&quot;&gt;(Reverse)&lt;/div&gt;" style="triangle;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=14;" parent="lAIXfmTGiXvmbAfdySJ4-162" vertex="1">
121 |           <mxGeometry x="181" y="254" width="120" height="135" as="geometry" />
122 |         </mxCell>
123 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-188" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=3;" parent="lAIXfmTGiXvmbAfdySJ4-162" source="lAIXfmTGiXvmbAfdySJ4-175" target="lAIXfmTGiXvmbAfdySJ4-196" edge="1">
124 |           <mxGeometry relative="1" as="geometry" />
125 |         </mxCell>
126 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-175" value="Padded plaintext" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;fontSize=14;" parent="lAIXfmTGiXvmbAfdySJ4-162" vertex="1">
127 |           <mxGeometry x="350" y="281.5" width="180" height="80" as="geometry" />
128 |         </mxCell>
129 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-196" value="&lt;div style=&quot;font-size: 14px;&quot;&gt;PKCS#7&lt;br style=&quot;font-size: 14px;&quot;&gt;&lt;/div&gt;&lt;div style=&quot;font-size: 14px;&quot;&gt;Trim&lt;/div&gt;" style="shape=rhombus;perimeter=rhombusPerimeter;whiteSpace=wrap;html=1;align=center;fillColor=#e1d5e7;strokeColor=#9673a6;fontSize=14;" parent="lAIXfmTGiXvmbAfdySJ4-162" vertex="1">
130 |           <mxGeometry x="460" y="430" width="120" height="60" as="geometry" />
131 |         </mxCell>
132 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-202" value="Decrypt" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontSize=28;fontColor=default;labelBackgroundColor=none;fontStyle=5;" parent="lAIXfmTGiXvmbAfdySJ4-162" vertex="1">
133 |           <mxGeometry x="250" width="120" height="50" as="geometry" />
134 |         </mxCell>
135 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-182" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;strokeWidth=3;" parent="1" source="lAIXfmTGiXvmbAfdySJ4-181" target="lAIXfmTGiXvmbAfdySJ4-171" edge="1">
136 |           <mxGeometry relative="1" as="geometry">
137 |             <Array as="points">
138 |               <mxPoint x="880" y="70" />
139 |               <mxPoint x="880" y="207" />
140 |             </Array>
141 |           </mxGeometry>
142 |         </mxCell>
143 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-181" value="Password" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;fillColor=#ffe6cc;strokeColor=#d79b00;fontSize=18;" parent="1" vertex="1">
144 |           <mxGeometry x="920" y="40" width="120" height="60" as="geometry" />
145 |         </mxCell>
146 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-183" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.75;entryDx=0;entryDy=0;strokeWidth=3;" parent="1" source="lAIXfmTGiXvmbAfdySJ4-161" target="lAIXfmTGiXvmbAfdySJ4-178" edge="1">
147 |           <mxGeometry relative="1" as="geometry">
148 |             <mxPoint x="1110" y="660" as="targetPoint" />
149 |           </mxGeometry>
150 |         </mxCell>
151 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-189" value="Plaintext" style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=18;" parent="1" vertex="1">
152 |           <mxGeometry x="1370" y="680" width="170" height="130" as="geometry" />
153 |         </mxCell>
154 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-191" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.25;entryY=0;entryDx=0;entryDy=0;strokeWidth=3;" parent="1" source="lAIXfmTGiXvmbAfdySJ4-1" target="lAIXfmTGiXvmbAfdySJ4-157" edge="1">
155 |           <mxGeometry relative="1" as="geometry" />
156 |         </mxCell>
157 |         <mxCell id="lAIXfmTGiXvmbAfdySJ4-200" style="edgeStyle=orthogonalEdgeStyle;shape=connector;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;strokeColor=default;strokeWidth=3;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=11;fontColor=default;labelBackgroundColor=default;endArrow=classic;" parent="1" source="lAIXfmTGiXvmbAfdySJ4-11" target="lAIXfmTGiXvmbAfdySJ4-156" edge="1">
158 |           <mxGeometry relative="1" as="geometry" />
159 |         </mxCell>
160 |         <mxCell id="--6wiBrmQFSUpI-zjuBX-1" style="edgeStyle=orthogonalEdgeStyle;shape=connector;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.75;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;strokeColor=default;strokeWidth=3;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=11;fontColor=default;labelBackgroundColor=default;endArrow=classic;" edge="1" parent="1" source="lAIXfmTGiXvmbAfdySJ4-2" target="lAIXfmTGiXvmbAfdySJ4-161">
161 |           <mxGeometry relative="1" as="geometry">
162 |             <mxPoint x="568" y="451" as="sourcePoint" />
163 |             <mxPoint x="695" y="451" as="targetPoint" />
164 |           </mxGeometry>
165 |         </mxCell>
166 |         <mxCell id="--6wiBrmQFSUpI-zjuBX-2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0;entryDx=170;entryDy=80;strokeWidth=3;entryPerimeter=0;" edge="1" parent="1" source="lAIXfmTGiXvmbAfdySJ4-196" target="lAIXfmTGiXvmbAfdySJ4-189">
167 |           <mxGeometry relative="1" as="geometry">
168 |             <mxPoint x="885" y="451" as="sourcePoint" />
169 |             <mxPoint x="1111" y="452" as="targetPoint" />
170 |             <Array as="points">
171 |               <mxPoint x="1580" y="580" />
172 |               <mxPoint x="1580" y="760" />
173 |             </Array>
174 |           </mxGeometry>
175 |         </mxCell>
176 |         <mxCell id="--6wiBrmQFSUpI-zjuBX-3" style="edgeStyle=orthogonalEdgeStyle;shape=connector;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;strokeColor=default;strokeWidth=3;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=11;fontColor=default;labelBackgroundColor=default;endArrow=classic;exitPerimeter=0;" edge="1" parent="1" source="lAIXfmTGiXvmbAfdySJ4-8" target="lAIXfmTGiXvmbAfdySJ4-195">
177 |           <mxGeometry relative="1" as="geometry">
178 |             <mxPoint x="285" y="579" as="sourcePoint" />
179 |             <mxPoint x="695" y="579" as="targetPoint" />
180 |             <Array as="points">
181 |               <mxPoint x="-80" y="745" />
182 |               <mxPoint x="-80" y="441" />
183 |             </Array>
184 |           </mxGeometry>
185 |         </mxCell>
186 |       </root>
187 |     </mxGraphModel>
188 |   </diagram>
189 | </mxfile>
190 | 


--------------------------------------------------------------------------------
/images/cryptography.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mprimi/portable-secret/60ad4ca81b9851aeeead719082e25730f82e0a38/images/cryptography.png


--------------------------------------------------------------------------------
/notes.txt:
--------------------------------------------------------------------------------
 1 | https://www.w3.org/TR/WebCryptoAPI/#aes-gcm
 2 | 
 3 | https://en.wikipedia.org/wiki/Galois/Counter_Mode
 4 | 
 5 | https://nvlpubs.nist.gov/nistpubs/Legacy/SP/nistspecialpublication800-38d.pdf
 6 | 
 7 | https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API
 8 | 
 9 | https://base64.guru/developers/javascript/examples/unicode-strings
10 | 
11 | https://developer.mozilla.org/en-US/docs/Glossary/Base64
12 | 
13 | https://stackoverflow.com/questions/23223718/failed-to-execute-btoa-on-window-the-string-to-be-encoded-contains-characte
14 | 
15 | https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs
16 | 


--------------------------------------------------------------------------------