FalseFlag

A forensic-analyst game with real crypto and stylometry. Reconstruct the intrusion, follow the evidence, expose the false flag.

Comment

Inspiration

Most "learn cybersecurity" content is a quiz. Real intrusions aren't a quiz; they're a chain of small, connected mistakes that an analyst pieces together after the fact. I wanted to put the player in the analyst's chair and have them reconstruct an attack the way it's actually done: backward, from the damage to the attacker. The "false flag" angle, where the obvious culprit is a deliberate misdirection, gave it a real mystery to solve.

What it does

FALSE FLAG is a browser forensic game. A game studio is hijacked on launch day, and a ransom note blames a famous hacking crew. Across five stages — phishing, payload decoding, password cracking, OSINT, and stylometry — the player recovers evidence, pins it to an investigation board, and proves the breach was actually an inside job. Each stage teaches a genuine security skill, and the stages together form the attack chain in reverse.

How I built it

100% vanilla web — HTML, CSS, and ES-module JavaScript, with no framework and no build step. The technical puzzles use real tooling, not mockups:

  • Stage 3 runs a live dictionary attack with the Web Crypto API (SHA-256), hashing each guess and comparing it to the captured hash.
  • Stage 5 computes cosine similarity over function-word frequency and sentence-cadence vectors to fingerprint the ransom note's author.
  • The visual design (a "situation room + evidence locker" desk) is built entirely from CSS — textures are inline SVG noise, so there are zero image assets to load. Game state persists in localStorage, and the whole thing is accessible (Lighthouse Accessibility 100).

Challenges I ran into

  • Making the puzzles teach real concepts without becoming unsolvable or requiring guesswork.
  • Building a tactile, physical "detective desk" look in pure CSS, no images, while keeping text readable and the experience accessible.
  • Designing a difficulty curve where each stage's evidence genuinely unlocks the next.

Accomplishments I'm proud of

  • The cryptography and stylometry are real, running client-side with no backend.
  • A cohesive, bespoke visual identity built from scratch with zero dependencies.
  • A narrative twist that's mechanically earned, the insider is seeded across earlier stages, not just revealed at the end.

What I learned

The anatomy of a breach (phishing → payload → credentials → identity → attribution), how stylometry attributes anonymous text, and how far you can push a pure-vanilla, zero-build web app on both polish and accessibility.

What's next

  • Randomized cases (different culprits, indicators, and aliases) for replay value.
  • More stages covering additional parts of the kill chain.
  • A shareable end-of-case analyst report.

Built With

Share this project:

Updates