31:T4a5,md`# How to password protect a Notebook secret I sometimes wish to hide a secret in a public notebook, for example, a [service account to run billable cloud commands](https://observablehq.com/@endpointservices/cache-bigquery). This notebook provides functionality to generate a password-protected encrypted payload, which is safe to save in a public notebook. ~~~js import {encrypt} from '@endpointservices/notebook-secret' ~~~ Also provided is a _decrypt_ UI control, which can read an encrypted payload and prompt the user for a password. If the correct password is provided the value resolves to the original secret. ~~~js import {decrypt} from '@endpointservices/notebook-secret' ~~~ This is allows the notebook author to run some privileged commands that other viewers cannot. If you want regular viewers also to be able to run privileged operations, consider using [serverless secrets](https://observablehq.com/@endpointservices/how-to-keep-an-api-key-secret-in-a-public-notebook) where the secret is never exposed to a client browser. If you want to encode a secret for programatic use, use decode instead ~~~js import {decode} from '@endpointservices/notebook-secret' ~~~ `32:[{"id":"3ecf32b394090b2d7b8a0b17ccfcd1568d06036c65e4993ef9916fe06968a2aa7373672a5725f357ba217e4a2b42e314c17ce88e59dbdc83d8b9f63cab6462d4","href":"https://static.observableusercontent.com/files/3ecf32b394090b2d7b8a0b17ccfcd1568d06036c65e4993ef9916fe06968a2aa7373672a5725f357ba217e4a2b42e314c17ce88e59dbdc83d8b9f63cab6462d4","name":"PasswordProtect.png","type":"image/png","lastModified":1615984873663.663,"size":340953}] 2f:{"title":"How to password protect a Notebook secret","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"md`## Step 1, generate an encrypted payload\n\nConfigure the password and the secret\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"viewof pass = html`${Text({\"label\":\"Password\"})}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"viewof secret = Textarea({label: \"Secret\", rows: 6})","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"md`This generates a encrypted payload which is safe to put in a public place`","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"encrypt = async ({\n secret, password\n} = {}) => {\n const salt = window.crypto.getRandomValues(new Uint8Array(12));\n const key = await deriveKey(password, salt);\n const name = \"AES-GCM\";\n const iv = window.crypto.getRandomValues(new Uint8Array(12));\n const ciphertext = await window.crypto.subtle.encrypt(\n {\n name, iv\n },\n key,\n enc.encode(secret)\n );\n return {\n name,\n salt: encode64(salt),\n iv: encode64(iv),\n ciphertext: encode64(ciphertext)\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"encryptedSecret = encrypt({\n password: pass,\n secret\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"md`You will probably need to pass this to the _decrypt_ function so you can click the following button to copy it to the clipboard`","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"toClipboard = {\n const msg = html`Copy encrypted payload`;\n \n function click() {\n button.innerHTML = \"copied!\"\n pbcopy(JSON.stringify(encryptedSecret, null, 2));\n setTimeout(\n () => button.innerHTML = msg.outerHTML,\n 1000\n )\n }\n const ui = html`

\n \n

`\n let button = ui.querySelector(\".copy\")\n \n return ui;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"md`## Step 2, create a _decrypt_ control\n\nThe _decrypt_ UI control takes an encrypted payload as an argument, and prompts the reader for a password. Only when the password is correct, the control can resolve a value which is the decrypted secret.\n\n~~~js\nviewof decryptedSecret = decrypt()\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"md`In the following example the password is \"12345\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof decryptedSecret = decrypt({\n \"name\": \"AES-GCM\",\n \"salt\": \"R6IPpW0u06A+sObp\",\n \"iv\": \"8Qo+fJwwOUBz+UuU\",\n \"ciphertext\": \"D2Hw1RK41fNnYL3MEbJVSdjkQJK2BfjV4hYwavJqdjsbFl5G8QJQUANHri1hE2eLvADXrkFp8tRt7Yk=\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"html`${decryptedSecret}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`### Implementation Notes\n\nWe use \"PBKDF2\" to derive a high quality key from a low quality one like a user password.\n\nWe use \"AES-GCM\" to encrypt the secret payload, which is a notable for being an [authenticated encryption](https://en.wikipedia.org/wiki/Authenticated_encryption) algorithm that is available in the browser.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"function decrypt(encryptedSecret) {\n function input(evt) {\n evt.stopPropagation()\n }\n \n async function keypress(evt) {\n if (evt.keyCode === 13) {\n let decoded = new Promise(() => {})\n try {\n decoded = await decode(password.value, encryptedSecret)\n feedback.innerHTML = \"\";\n } catch (err) {\n console.error(err)\n feedback.innerHTML = \"Please try again\"\n }\n password.value = \"\"\n ui.value = decoded;\n ui.dispatchEvent(new Event('input'));\n }\n }\n \n let ui = html`

\n \n

`\n \n let feedback = ui.querySelector(\".feedback\");\n let password = ui.querySelector(\".password\");\n\n ui.value = undefined\n return ui;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"async function decode(password, encryptedSecret) {\n if (typeof encryptedSecret === 'string') encryptedSecret = JSON.parse(encryptedSecret)\n const key = await deriveKey(password, decode64(encryptedSecret.salt));\n const secret = await window.crypto.subtle.decrypt(\n {\n name: encryptedSecret.name,\n iv: decode64(encryptedSecret.iv)\n },\n key,\n decode64(encryptedSecret.ciphertext)\n );\n return new TextDecoder().decode(secret)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"deriveKey = async (password, salt) => {\n const material = await window.crypto.subtle.importKey(\n \"raw\", \n enc.encode(password), \n {name: \"PBKDF2\"}, \n false, \n [\"deriveBits\", \"deriveKey\"]\n );\n return await window.crypto.subtle.deriveKey(\n {\n \"name\": \"PBKDF2\",\n salt: salt, \n \"iterations\": 100000,\n \"hash\": \"SHA-256\"\n },\n material,\n { \"name\": \"AES-GCM\", \"length\": 256},\n true,\n [ \"encrypt\", \"decrypt\" ]\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"enc = new TextEncoder()","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"encode64 = (buffer) => btoa(String.fromCharCode(...new Uint8Array(buffer)));","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"decode64 = (b64) => Uint8Array.from(atob(b64), c => c.charCodeAt(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"import {html} from '@observablehq/htl'","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"import {Textarea, Text} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"import {pbcopy} from \"@mbostock/pbcopy\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"import { footer } from \"@endpointservices/footer-with-backups\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}