Inspect HTML picoCTF 2022 Solution

Description

1. Step 1

   Inspect the markup

   Observation

   I noticed the page appeared completely blank with no visible content, which suggested the flag was not rendered on screen but might be hidden in the raw HTML source inside a comment tag.

   Open View Page Source (Ctrl+U / Cmd+Option+U) and look for the <!-- ... --> block. To skip the eyeball step, grab the comment programmatically: 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 shows the live DOM after JavaScript has run, not the raw HTML the server sent. Comments are stripped from the DOM tree by the browser, so they do not appear there at all. View Page Source (Ctrl+U) shows the original server response where the comment is still present.

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

   The page genuinely appears blank because HTML comments produce zero rendered output - there is nothing to find by inspecting what the browser paints. The flag exists only in the raw HTML bytes, not in anything visible on screen, so View Page Source is the only way to find it without using a command-line tool.

   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 2

   Copy the flag

   Observation

   I noticed the flag literal in the form picoCTF{...} sitting directly inside an HTML comment in the page source, which meant no further decoding was needed and it could be copied as-is.

   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.