Make a cipher, then break one — the 1,200-year duel of codemakers and codebreakers, hands-on in your browser.
CryptLab is a two-panel teaching tool for the classical era of cryptography. Encipher with a Caesar or Vigenère cipher and watch the cipher wheel turn; Break a real substitution cipher with frequency analysis — the same 9th-century technique Al-Kindi invented and that cost Mary, Queen of Scots her head — mapping the ciphertext letter by letter until the plaintext emerges.
It's built for the classroom: the tools are front and centre, the theory hides behind expandable ▸ sections, and everything runs on a phone with no app and no signup.
- Caesar cipher with a live rotating cipher wheel and adjustable shift
- Vigenère cipher with a keyword — polyalphabetic, the cipher that resisted frequency analysis for 300 years
- Expandable notes: how the Caesar cipher works, Kerckhoffs's Principle, why Vigenère held
- Frequency histogram of the ciphertext, tallest bar highlighted, with a per-letter mapping box under each bar
- English-frequency reference row to line the bars up against (E T A O I N S H R…)
- Bijective mapping — each plaintext letter can occupy only one box; assigning it elsewhere clears the old one
- Guess by frequency — auto-fill the ranking, then hand-fix the near-ties
- Five challenges to choose from (or paste your own ciphertext), each a different substitution and difficulty
- A guided walkthrough plus expandable history: Al-Kindi, Mary Queen of Scots, and why more ciphertext makes cracking easier
- Content Security Policy, X-Frame-Options, X-Content-Type-Options via Netlify
_headers - No external dependencies — zero JavaScript libraries, pure vanilla HTML/CSS/JS
- Frontend: Single
web/index.html— vanilla HTML/CSS/JS, no build step, no frameworks - Testing: Playwright end-to-end smoke tests
- Hosting: Netlify (static deploy from the
web/directory)
git clone https://github.com/SecurityRonin/cryptlab.git
cd cryptlab
npm install
npx playwright install chromium
npx playwright test
# Open web/index.html in a browser, or:
python3 -m http.server 3009 --directory web
# Visit http://localhost:3009Frequency analysis was first described by Abu Yusuf Ya'qub ibn Ishaq al-Kindi in 9th-century Baghdad. The Caesar cipher is named for its use by Julius Caesar; the Vigenère cipher is named for Blaise de Vigenère.
MIT License — free to use, modify, and distribute.
Copyright (c) 2026 Albert Hui albert@securityronin.com
Albert Hui (法證黑客) — Security Ronin · linktr.ee/4n6h4x0r