formcrypt 0.0.0-stage → 0.2.0

package/README.md

@@ -1,3 +1,36 @@
-# Temporary Holding Version
+# formcrypt
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Encrypts the form fields you choose in the visitor's browser, each on its own, then lets the form submit as usual. Your form host (Netlify Forms, Formspree, your own server) sees the same fields as before, holding ciphertext instead of values. You decrypt on your own computer with [formdecrypt](https://github.com/camilodelvasto/formcrypt/tree/main/formdecrypt).
+
+## Use
+
+Create a key pair with `npx formdecrypt keygen`, then:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/formcrypt@0.2" defer></script>
+
+<form name="contact" method="POST" data-netlify="true" data-formcrypt="fc1pk.…your public key…">
+  <input type="hidden" name="form-name" value="contact">
+
+  <fieldset data-formcrypt disabled>           <!-- encrypted -->
+    <input name="name">
+    <input name="email" type="email" required>
+    <textarea name="message"></textarea>
+  </fieldset>
+
+  <button>Send</button>
+</form>
+```
+
+- Fields inside `<fieldset data-formcrypt>` are encrypted, each under its own name. Everything outside, including honeypots and CAPTCHA tokens, is sent unchanged.
+- Keep `disabled` on the fieldset. The script enables it; without the script, those fields can't be sent.
+- Needs HTTPS. File inputs aren't supported.
+
+## What it protects
+
+- **Protects:** the encrypted fields wherever the host keeps them: dashboard, exports, API, notification emails.
+- **Doesn't hide** IP, user agent, time, fields you didn't encrypt, which fields are empty, or roughly how long values are.
+- **Doesn't protect against** whoever serves this script or your page; they could swap the key. Self-host the file if that matters to you.
+- **Lose the private key and the data is gone.**
+
+MIT

package/formcrypt.js

@@ -0,0 +1,91 @@
+/*! formcrypt 0.2.0 · MIT · Encrypts marked form fields in the browser, each on its own, before the form is sent. Format v1 (fc1.) */
+(function () {
+  'use strict'
+  var subtle = globalThis.crypto && globalThis.crypto.subtle
+  var P256 = { name: 'ECDH', namedCurve: 'P-256' }
+  var enc = new TextEncoder()
+
+  function b64(u8) {
+    var s = ''
+    for (var i = 0; i < u8.length; i++) s += String.fromCharCode(u8[i])
+    return btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+  }
+  function unb64(s) {
+    s = s.replace(/-/g, '+').replace(/_/g, '/')
+    return Uint8Array.from(atob(s + '==='.slice((s.length + 3) % 4)), function (c) { return c.charCodeAt(0) })
+  }
+
+  // Encrypts one string for the public key. The field name is authenticated, not encrypted:
+  // a ciphertext only opens under the name it was sealed with.
+  async function seal(value, publicKey, name) {
+    if (!/^fc1pk\./.test(publicKey)) throw new TypeError('expected a public key (fc1pk.…)')
+    var pub = await subtle.importKey('raw', unb64(publicKey.slice(6)), P256, false, [])
+    var eph = await subtle.generateKey(P256, false, ['deriveBits'])
+    var ephRaw = new Uint8Array(await subtle.exportKey('raw', eph.publicKey))
+    var bits = await subtle.deriveBits({ name: 'ECDH', public: pub }, eph.privateKey, 256)
+    var hkdf = await subtle.importKey('raw', bits, 'HKDF', false, ['deriveKey'])
+    var key = await subtle.deriveKey({ name: 'HKDF', hash: 'SHA-256', salt: ephRaw, info: enc.encode('formcrypt/v1') },
+      hkdf, { name: 'AES-GCM', length: 256 }, false, ['encrypt'])
+    var iv = globalThis.crypto.getRandomValues(new Uint8Array(12))
+    var ct = new Uint8Array(await subtle.encrypt({ name: 'AES-GCM', iv: iv, additionalData: enc.encode(name) }, key, enc.encode(value)))
+    var out = new Uint8Array(77 + ct.length)
+    out.set(ephRaw, 0)
+    out.set(iv, 65)
+    out.set(ct, 77)
+    return 'fc1.' + b64(out)
+  }
+
+  globalThis.formcrypt = { seal: seal }
+  if (typeof document === 'undefined') return
+
+  var passing = new WeakSet()
+
+  // Marked fieldsets ship disabled, so without this script (or without Web Crypto) they can't be sent.
+  function reset() {
+    if (!subtle) return
+    document.querySelectorAll('form[data-formcrypt] fieldset[data-formcrypt]').forEach(function (f) { f.disabled = false })
+    document.querySelectorAll('form[data-formcrypt] input[data-formcrypt]').forEach(function (i) { i.remove() })
+  }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', reset)
+  else reset()
+  addEventListener('pageshow', function (e) { if (e.persisted) reset() })
+
+  // Capture phase on document: runs before any handler on the form, and needs no DOM-ready wait.
+  document.addEventListener('submit', async function (e) {
+    var form = e.target
+    if (!(form instanceof HTMLFormElement) || !form.hasAttribute('data-formcrypt') || passing.has(form)) return
+    e.preventDefault()
+    e.stopImmediatePropagation()
+    try {
+      var key = form.getAttribute('data-formcrypt')
+      var sets = form.querySelectorAll('fieldset[data-formcrypt]')
+      var fd = new FormData(form)
+      var names = []
+      sets.forEach(function (set) {
+        Array.prototype.forEach.call(set.elements, function (el) {
+          if (el.name && names.indexOf(el.name) < 0) names.push(el.name)
+        })
+      })
+      for (var i = 0; i < names.length; i++) {
+        var values = fd.getAll(names[i])
+        for (var j = 0; j < values.length; j++) {
+          if (typeof values[j] !== 'string') throw new Error('file inputs are not supported')
+          var hidden = document.createElement('input')
+          hidden.type = 'hidden'
+          hidden.name = names[i]
+          hidden.value = await seal(values[j], key, names[i])
+          hidden.setAttribute('data-formcrypt', '')
+          form.appendChild(hidden)
+        }
+      }
+      sets.forEach(function (f) { f.disabled = true }) // disabled fields are never submitted
+      // Web Crypto can finish inside the original submit dispatch, where Chrome ignores requestSubmit().
+      await new Promise(function (r) { setTimeout(r) })
+      passing.add(form)
+      try { form.requestSubmit(e.submitter) } finally { passing.delete(form) }
+    } catch (err) {
+      console.error('formcrypt: nothing was sent.', err)
+      reset()
+    }
+  }, true)
+})()

package/package.json

@@ -1,6 +1,25 @@
 {
   "name": "formcrypt",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Encrypt chosen form fields in the browser, each under its own name, before the form is sent. Works with any form host. No config, no dependencies.",
+  "main": "formcrypt.js",
+  "files": [
+    "formcrypt.js"
+  ],
+  "keywords": [
+    "form",
+    "encryption",
+    "privacy",
+    "netlify",
+    "static-site",
+    "webcrypto"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/camilodelvasto/formcrypt.git",
+    "directory": "formcrypt"
+  },
+  "homepage": "https://github.com/camilodelvasto/formcrypt/tree/main/formcrypt#readme",
+  "bugs": "https://github.com/camilodelvasto/formcrypt/issues"
+}