Unminify picoCTF 2024 Solution

Published: April 3, 2024

Description

I don't like scrolling down to read the code of my website, so I've squished it. As a bonus, my pages load faster! Browse here, and find the flag!

View-source

Browse to the provided URL (http://titan.picoctf.net:54777/) and open DevTools.

Solution

Want to try it yourself first?

The guided walkthrough reveals hints one step at a time.

Walk me through it
  1. Step 1
    Inspect the DOM
    Observation
    I noticed the page description said the HTML was 'squished' (minified), which meant the flag was still present in the served HTML as plaintext and just needed to be found by searching for the known 'picoCTF{' prefix in DevTools.
    Open DevTools (F12), focus the Elements panel, and Ctrl+F for picoCTF. The matching node highlights and you can read the flag in place.
    Learn more

    Browser DevTools (opened with F12 or Ctrl+Shift+I) provide a live, structured view of the DOM that is far more readable than raw source. The Elements panel lets you navigate the full HTML tree, search for text, and inspect attributes - even in heavily minified pages where the source is a single long line.

    Minification compresses HTML, CSS, and JavaScript by removing whitespace, comments, and shortening variable names to reduce file size and improve load times. It is a performance optimization, not a security measure. The content is identical to the original - it is just harder to read at a glance. The browser's DevTools automatically parse and pretty-print minified code in the Elements panel.

    • Use Ctrl+F in the Elements panel to search for text like picoCTF across the entire DOM tree.
    • The Sources panel has a "Pretty print" button ({}) that reformats minified JS/CSS with proper indentation.
    • View Source (Ctrl+U) shows the raw HTML as served by the server, before JavaScript modifies the DOM.
  2. Step 2
    One-liner option
    Observation
    I noticed that scanning the raw minified HTML by eye would be impractical because the entire page is one long line, which suggested using curl piped to grep with a non-greedy character class to extract just the flag substring automatically.
    curl -s fetches the page and grep -oE picks out only the flag substring. The character class [^}]+ matches any flag body up to the first closing brace.
    bash
    curl -s http://titan.picoctf.net:54777/ | grep -oE 'picoCTF\{[^}]+\}'

    Expected output

    picoCTF{pr3tty_c0d3_743...}
    What didn't work first

    Tried: Run curl without grep and scroll through the output hoping to spot the flag manually.

    Minified HTML compresses the entire page onto one very long line, making it nearly impossible to visually locate a short flag string. The grep -oE pipeline is necessary because it isolates the match - without it you are scanning hundreds or thousands of characters of concatenated HTML for 'picoCTF{' by eye.

    Tried: Use grep -o 'picoCTF{.*}' (greedy dot-star) instead of the [^}]+ character class.

    The greedy .* matches from the first 'picoCTF{' all the way to the very last '}' on the line. In minified HTML where multiple braces appear (CSS rules, JS objects, template literals), this captures far too much text and the flag gets buried in noise. The negated class [^}]+ stops at the first closing brace, which is exactly the end of the flag.

    Learn more

    curl -s fetches a URL silently (no progress bar) and prints the response body to stdout. Piping through grep -oE 'picoCTF\{[^}]+\}' extracts only the matching portion using an extended regex (-E) and prints only the match (-o) rather than the whole line. The character class [^}]+ matches any character that is not a closing brace, so the pattern stops cleanly at the end of the flag.

    This pipeline approach is a fundamental CTF and security research skill. Instead of manually reading through thousands of bytes of minified HTML, you let regex do the work. The same pattern applies to searching server responses, log files, and API output for sensitive information during penetration tests.

    If you redirect to a file and the output looks garbled with escape codes, add --color=never to grep; that flag suppresses ANSI color sequences, which only matter outside an interactive terminal. Real CTF flags are often embedded inside HTML attribute values or JavaScript strings, so a tighter regex is sometimes needed if multiple matches collide on one line.

Interactive tools
  • Strings ExtractorPull printable text from any binary, library, or image. ASCII and UTF-16 detection, configurable minimum length, flag-like highlight, no command line needed.
  • Regex TesterTest regular expressions against a string with live match highlighting, flag toggles, and common CTF pattern shortcuts.

Flag

Reveal flag

picoCTF{pr3tty_c0d3_743...}

Even minified HTML can't hide a plaintext flag.

Key takeaway

Minification is a delivery optimization, not a confidentiality mechanism. It removes whitespace and shortens identifiers to shrink file size, but every byte of content is still sent to the browser in cleartext. Any secret embedded in client-side HTML, CSS, or JavaScript is fully readable via DevTools or curl regardless of how compressed the source looks. Real confidentiality requires keeping secrets server-side, never embedding them in responses sent to untrusted clients.

Related reading

Want more picoCTF 2024 writeups?

Useful tools for Web Exploitation

What to try next