Inspect HTML picoCTF 2022 Solution

Description

1. Step 1Inspect the markup

   Observation

   The page renders completely blank with no visible content. So the flag is not on screen at all, and an HTML comment in the raw source is the obvious place for it.

   Open View Page Source (Ctrl+U / Cmd+Option+U) and look for the <!-- ... --> block. To skip the eyeball step, grab the comment programmatically against the instance URL (the original jupiter.challenges.picoctf.org host is retired): curl -s https://jupiter.challenges.picoctf.org/problem/17682/ | grep -oP '<!--\s*\K[^-]*(?=\s*-->)'. The flag literal is sitting in plain HTML.

   What didn't work first

   Tried: Opening DevTools and searching the Elements panel for the flag.

   The Elements panel does render comment nodes, but it shows the live DOM after scripts have run, and a comment sits collapsed and dimmed under its parent element where it is easy to scroll straight past. View Page Source shows the original response as one flat block of text you can search in a single pass.

   Tried: Looking at the visible page content for any hidden or disguised text.

   The page really is blank, because an HTML comment produces no rendered output, so inspecting what the browser paints finds nothing. The flag exists only in the raw HTML bytes, which makes View Page Source the only route short of a command-line client.

   Learn more

   HTML comments use the syntax <!-- comment --> and are completely ignored by the browser renderer - they produce no visible output on the page. The trap is that "not rendered" gets confused with "not transmitted." The browser still receives every byte of the comment in the HTML response and stores it in the DOM tree; the renderer simply skips painting it. Anyone who can fetch the page can read the comment. They were historically used to hide JavaScript from old browsers that didn't understand <script> tags, but that workaround became obsolete in the late 1990s.

   View Page Source (Ctrl+U / Cmd+Option+U) shows the raw HTML exactly as the server sent it, before JavaScript has a chance to modify the DOM. This is distinct from the Elements panel in DevTools, which shows the live DOM after JavaScript execution. For finding content hidden in the original HTML - like comments - View Source is the right tool.

   In real security audits, HTML comments are routinely inspected for developer notes, internal paths, software version strings, API endpoints, and accidentally left-in credentials. Automated scanners specifically check for comments, and it's standard practice to strip them from production HTML responses using minification tools before deployment.

2. Step 2Copy the flag

   Observation

   The flag sits in the page source as a plain picoCTF{...} literal inside an HTML comment. Nothing needs decoding; copy it as it stands.

   Once you spot the <!-- picoCTF{...} --> comment, copy the contents between braces.

   Learn more

   Finding the flag in the source is the entire challenge - no decoding or further analysis needed. This is intentional: the goal is to teach the habit of checking page source before assuming a page has no hidden content. Many real-world secrets have been discovered this way, including internal API documentation URLs, debug endpoints, and staging environment credentials.

   If you prefer the command line, curl -s URL | grep '<!--' extracts all comment lines from an HTML page without opening a browser. This approach scales well when you need to check many pages programmatically, and is the basis of automated web scraping and security scanning tools. For the larger family of "client-trusted" mistakes (hidden form fields, JS auth checks, debug routes left in production), see Web challenges: real-world bug patterns.

Flag

Even simple view-source challenges reinforce the need to hide secrets server-side.