🐍Stuck on syntax? Open the Python cheat sheet — variables, loops, errors & camp recipes
🐍 Project · Session 2 · ~50 minutes

Mission: Python HTML Detective

In DevTools you hunted for hidden flags by hand. Now you'll write a small Python script that does the same thing automatically, scanning any web page in milliseconds and printing every secret it finds.

🔊 NARRATION

1️⃣ What you're building

A short Python script that fetches any web page and scans it for hidden info:

🎯 The detective will find

  • 📝 HTML comments — including the FLAG{...} strings developers forgot to delete
  • 👁️ Hidden form inputs — fields with type="hidden" that contain user IDs, tokens, debug flags
  • 🧬 Suspicious URL parameters — links to ?debug=true, ?page=admin etc.
  • 📦 Other juicy patterns — anything you can describe with a regex

By the end, you'll point your script at the Candy Shop and watch it dump every flag in seconds — the same flags you spent ages hunting for in DevTools.

🗺️ How the notebook is laid out — read this before you start

Students often hit this one confusion early. The first few missions in the notebook don't fetch a real website. They give you a tiny pretend HTML page already typed out, stored in a variable called target_html. Here's why, and here's what to do.

📍 You'll see target_html = '''<!DOCTYPE html>...''' — that's normal

It's a mini fake e-commerce page hard-coded into the cell. You don't need internet, you don't need to host the Candy Shop, and the same HTML loads every time. The missions then run regex on this string to teach you the patterns.

Why this matters: if requests.get() failed for any reason (offline, slow network, wrong URL), the whole notebook would break before you even got to learn regex. The hardcoded HTML guarantees there's something to work with.

📋 The notebook's journey, in 3 phases

  1. Phase 1 — Learn regex with a known page
    Missions 1–4 (roughly) use target_html — the hardcoded HTML string. You write small regex patterns and verify they match the right things. No internet needed.
  2. Phase 2 — Stretch it to real URLs
    Later missions swap target_html = '''...''' for target_html = requests.get(url).text. Now your same regex code works on real public sites. The URL you pick is up to you (or your teacher).
  3. Phase 3 — Hunt the Candy Shop for real
    Final mission: point your script at the live Candy Shop URL your teacher provides. Your script dumps every flag in a fraction of a second. That's the win moment.

🎯 What you actually do in each TODO cell

Every mission cell has a placeholder line like:

comments = ___ # <-- replace ___ with your code

Your job is to replace the ___ with a complete line of Python. Each cell tells you:

⚠️ The mistake almost everyone makes

The pattern shown in the hint is just one piece of the full line. You can't paste it on its own — Python doesn't speak HTML and you'll get SyntaxError: invalid syntax.

❌ WRONG — SyntaxError
comments = <!--(.*?)-->
You pasted only the pattern. Python sees random HTML and crashes.
✅ RIGHT — works
comments = re.findall(r"<!--(.*?)-->", target_html, re.DOTALL)
Pattern is a string (in quotes), wrapped in re.findall(...) with where to look and the flag.

The mental model: the pattern is a tool. re.findall is the worker who uses the tool. You have to tell the worker WHAT tool to use (pattern), WHERE to look (target_html), and how (re.DOTALL). Just handing them a tool with no instructions doesn't work.

Try it on your own first — getting stuck is part of learning. But here are the exact lines if you need a nudge:

Mission 2 — find every HTML comment

comments = re.findall(r"<!--(.*?)-->", target_html, re.DOTALL)

Mission 3 — find every hidden form input

hidden = re.findall(r'<input[^>]*type="hidden"[^>]*>', target_html)

Mission 4 — find every FLAG{...}

flags = re.findall(r"FLAG\{[^}]+\}", target_html)

Final mission — swap to a real URL

url = "https://books.toscrape.com" # or the live Candy Shop URL target_html = requests.get(url).text # now your same regex works on a real page

Pattern to read these: re.findall(pattern, where_to_look, optional_flags). The pattern is the bit in the r"..." string. r just means "raw string — backslashes are literal".

2️⃣ Sneak peek — what the code looks like

Don't worry about understanding this yet — the notebook walks you through every line. This is just so you know what to expect.

import requests, re url = "https://books.toscrape.com" # ← any public URL works html = requests.get(url).text # grab the page # find every FLAG{...} in the page flags = re.findall(r"FLAG\{[^}]+\}", html) print("🚩 Flags found:", flags) # find hidden HTML comments comments = re.findall(r"<!--(.*?)-->", html, re.DOTALL) print("🔎 Comments:", len(comments), "found")

~6 lines of real code does what you did manually in DevTools all session. That's the power of automating the boring stuff.

⚠️ Critical: Colab can't see localhost

Colab runs on Google's servers, not on your laptop. So URLs like http://localhost:8000/CandyShop_Website.html will not work — Google's servers can't reach your machine.

If your code prints "Found 0" for everything, this is almost certainly why. Your html variable will be empty (or an error message), so the regex finds nothing.

What to use instead:

  • Ask your teacher for the live Candy Shop URL they're hosting for the class (something like https://ck-cybersecurity-01.web.app/CandyShop_Website.html)
  • Or practice on https://books.toscrape.com — it's public, fast, and full of HTML comments to find
  • To check if the fetch worked: print(len(html)) — a big number means you got the page; 0 or a short number means the URL didn't work

3️⃣ Why we're using Google Colab

Python doesn't run inside web browsers directly, so we need somewhere to run it. Google Colab is the easiest choice:

📋 5-step setup (once per student, takes about a minute)

  1. Download the notebook by clicking the Download button below. It's a small file called CodeKids_HTML_Detective_Student.ipynb.
  2. Open Google Colab in a new tab by clicking the Open Colab button. If asked, sign in with your Google account.
  3. In Colab, click File → Upload notebook at the top-left.
  4. Pick the file you just downloaded. Colab opens it and you're ready to go.
  5. Run each code cell by clicking the ▶ play button next to it (or pressing Shift + Enter). Read the text between cells — it explains what's happening.

💡 Tips for success

  • Run cells top to bottom — each one depends on the cells above it
  • If a cell errors, click ▶ on it again — most errors are just typos you can fix in the cell
  • The notebook has 🎯 mini-challenges — try them before peeking at the teacher version
  • Once your script works on the Candy Shop, try pointing it at any other practice page — different patterns, same code

🆘 If you get stuck

"NameError: name 'requests' is not defined"
You skipped the first code cell that imports the library. Run the top cell first.
"Connection refused" or "ConnectionError"
The URL you're scanning isn't reachable from Google's servers. If you're scanning localhost, that won't work — Colab can't see your machine. Use the live Candy Shop URL your teacher provides.
"My regex isn't matching anything"
Print the raw HTML first (print(html[:1000])) to make sure you got the page. Then test your regex on a few characters of that output.
"I lost my work!"
Colab autosaves to Google Drive once you're signed in. Open Colab → File → Open notebook → "Recent" tab.

4️⃣ Point the detective at other websites

The script is just requests.get(url) + some regex. Change the URL and you've got a brand-new investigation. Here are some safe, legal practice targets:

import requests, re url = "http://localhost:8000/CandyShop_Website.html" html = requests.get(url).text # grab the page # patterns can change too — different sites, different hunts hits = re.findall(r"FLAG\{[^}]+\}", html) print("Found:", hits)
↓ what the script prints
Candy Shop · find FLAGs > Found: ['FLAG{HELLO_HACKER_YOU_FOUND_ME}', 'FLAG{INSPECT_ELEMENT_IS_POWERFUL}', ...]
Same 7 lines of Python. Just swap the URL and the detective moves to a new case.
🍭 Your Candy Shop http://localhost:8000/
CandyShop_Website.html
The whole reason you wrote this script. Hunts down all 16 flags in milliseconds. → Open Candy Shop
🌐 example.com https://example.com The most boring page on the internet — perfect for testing. Tiny, clean HTML you can read end-to-end. → Visit
🛠️ httpbin.org https://httpbin.org/html A site explicitly built for testing HTTP clients. Shows you exactly what your script is sending. → Visit
📚 books.toscrape.com https://books.toscrape.com A fake bookstore made specifically for scraping practice. Hundreds of book listings, prices, ratings, images — all yours to extract. → Visit
💬 quotes.toscrape.com https://quotes.toscrape.com Sibling site to books.toscrape — quotes by famous authors. Try extracting just the quotes, or just the authors, or just the tags. → Visit
📖 Wikipedia article https://en.wikipedia.org/wiki/
Cybersecurity
Real, complex HTML. Count how many <a> tags or extract every section heading. Bigger pages = more fun patterns. → Visit
📰 BBC News homepage https://www.bbc.co.uk/news Extract every headline of the day. Try counting how many start with the word "How" — pattern recognition at real-world scale. → Visit
🧪 OWASP Juice Shop https://juice-shop.
herokuapp.com
A deliberately broken e-shop run by the OWASP security community. Like our Candy Shop but with even more puzzles. Try once you outgrow our flags. → Visit

🎯 Mini-challenges to try on these sites

⚠️ Ethical scanning — the detective's code

  • Only scan public pages. If a site has a login wall, you don't have permission to scan past it.
  • Don't hammer. Sleep 1 second between requests. Real servers are people's livelihoods.
  • Check robots.txt. Add /robots.txt to any URL to see what the site asks scrapers NOT to touch. Respect it.
  • Don't republish what you scrape. You can analyse data for yourself. You can't repost a whole news site as your own.
  • Never scan a real bank, government site, or anything sensitive. Even if it's technically public, you can land in serious trouble. The .toscrape sites and OWASP Juice Shop exist specifically so you don't have to.

5️⃣ What you'll learn

6️⃣ Want to peek at the finished version?

Once you've worked through the student notebook on your own — even if you didn't finish every mission — you can grab the fully completed version to compare your code against, or to learn the bonus tricks.

✅ What's inside the complete notebook

  • Every mission already solved, ready to ▶ play
  • A reusable scan_page() function that bundles all 3 regexes into one tool
  • A live example on books.toscrape.com — same code, real data
  • 📚 Bonus: extract book titles from the bookstore using a capture group
  • 🔗 Bonus: extract every external link, email, script tag, and API-key-shape from any page
  • 👩‍🏫 Teacher notes at the end covering common stumbles and a bug-bounty tie-in

⚠️ Don't peek too early

  • You'll learn 10× more by writing the missions yourself first — even if your code is messy or breaks
  • Wrong answers are how your brain figures out what's right. Skipping that = nothing sticks
  • Treat the complete version as a last-resort answer key, not a shortcut
  • If you finish the student version on your own → use the complete one to learn the bonus moves (scan_page, capture groups, more patterns)