Creating Your Own Image Format in the Browser
summary
Claim: a browser can polyfill a new encrypted image format end to end. Implementation uses Service Worker fetch hook to intercept .epg, decrypts bytes with Streams + SubtleCrypto and returns a Response blob typed image/png. Uses AES‑CTR with AES-CTR 128-bit blocks and handles partial blocks via remainder buffering. A streaming TransformStream pipes Response.body through a decrypter so decryption begins before full download, demos work and show much lower latency than batch decrypting.
AI-written summary · about
chapters (23)
- 0:00Intro
- 1:58JavaScript
- 2:59Why this is important
- 3:43Who am I
- 4:55Polyfill
- 6:11Web Crypto API
- 6:48What are we building
- 8:22Fetch event
- 9:17Respond with methods
- 10:00Code
- 14:05Crypto API
- 15:06Crypto Key API
- 19:38Implementing Stream Processing
- 20:48The Streams API
- 21:49The Streams Interface
- 22:37The Decrypter Object
- 23:38The Transform Function
- 25:23Flush Function
- 25:51Demo
- 26:45Conclusion
- 27:32WebAssembly
- 28:14Browser caching
- 28:43Polyfill extensions
related talks
25mEnd-to-End File Encryption in Browser with Open Source Penumbra
39mEncrypting Data in the Browser - Exploring Web Crypto APIs
13mLeveraging Stream API within Service Worker
26mBinary Data Adventures in Browser JavaScript
25mBuilding end-to-end encryption @excalidraw
34mEncrypting Data in the Browser - Exploring Web Crypto APIs
45mBytes and blobs
39mWeb Cryptography