MCP server ResizeObserver security — layout-based exfiltration, content-size oracle, data length inference, and ResizeObserver loop DoS in MCP UIs

Content-size oracle via ResizeObserver

Every time an MCP tool returns a result and the UI renders it into a container, that container's layout changes. If the result is 50 characters long, the container is shorter than if the result is 5,000 characters. An attacker who can inject a ResizeObserver on the tool result container receives:

• entry.contentRect.height — the new height after content insertion
• entry.contentRect.width — the container width (constant, but narrows inference)
• entry.borderBoxSize[0].blockSize — border-box height including padding
• Callback timing — when the resize fired (correlated with tool call completion)

The height reveals the approximate content length. For structured output (JSON with a known schema), the height distribution is often narrow enough that an attacker can distinguish between a short "no results" response and a long "found N records" response.

// Attacker's ResizeObserver on tool result containers
const ro = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const height = entry.contentRect.height;
    const toolId = entry.target.dataset.toolId;
    // Height → approximate content size
    // Combined with tool schema knowledge → narrow the output
    exfiltrate({ toolId, height, timestamp: performance.now() });
  }
});

document.querySelectorAll('[data-tool-result]').forEach(el => ro.observe(el));

// Also observe future results via MutationObserver
const mo = new MutationObserver((mutations) => {
  for (const m of mutations) {
    for (const node of m.addedNodes) {
      if (node.dataset?.toolResult) ro.observe(node);
    }
  }
});
mo.observe(document.getElementById('results'), { childList: true, subtree: true });

ResizeObserver loop denial of service

If the ResizeObserver callback modifies the size of the observed element (directly or via style change), the browser schedules another resize notification, which fires the callback again, which changes the size again — infinitely. Browsers detect this loop and throw a ResizeObserver loop completed with undelivered notifications error, but the detection is not guaranteed to terminate the loop before significant page freeze. A malicious MCP skill can trigger this intentionally:

// DoS via ResizeObserver loop
const ro = new ResizeObserver((entries) => {
  for (const entry of entries) {
    // Modify width → triggers another resize → callback fires again → infinite
    entry.target.style.width = (entry.contentRect.width + 1) + 'px';
  }
});
ro.observe(document.body); // observe the root — affects entire page layout

The loop causes continuous layout recalculation, consuming 100% of one CPU core and making the UI unresponsive. The defense at the application level is to not expose modifiable root elements to injected scripts, and at the CSP level to prevent inline script execution from tool output.

Defense patterns for MCP UIs

Fixed-height container pattern

For MCP UIs that cannot use sandboxed iframes for tool output, fixed-height containers with scrollable overflow prevent height-based content-length inference:

/* Tool result container — fixed height prevents content-size oracle */
.tool-result {
  height: 400px;          /* fixed — does not change with content length */
  overflow-y: auto;       /* content scrolls within fixed container */
  contain: strict;        /* layout containment — changes inside don't affect outside */
}

The contain: strict property adds layout, style, and size containment, preventing layout changes inside the container from propagating to ancestor elements. This limits ResizeObserver signal to the container itself (which no longer changes height) rather than its parent chain.

SkillAudit findings

See also: MCP server IntersectionObserver security · MCP server MutationObserver security