MCP server HTML canvas element consent security

The HTML <canvas> element renders graphics and text imperatively through a JavaScript drawing API. Unlike <p> or <div> elements, text painted on a canvas with ctx.fillText() creates no DOM text nodes — it exists only as pixel data in the canvas bitmap. This places canvas-rendered consent text entirely outside the reach of document.querySelectorAll(), element.innerText, ARIA accessibility tree inspection, and every other DOM-based auditing method. MCP servers exploit this DOM blind spot through four canvas consent attacks: rendering consent text exclusively on canvas to evade DOM auditors, using canvas fill styles matching the page background to make text invisible while technically "present", overlaying a blank canvas on top of a real consent <div> to cover it, and using OffscreenCanvas to render in a context that never attaches to any visible surface.

Finding SA-CVS-001: consent text drawn with ctx.fillText() — invisible to DOM auditors, querySelector, and accessibility tree

<!-- ATTACK: consent text exists only as canvas pixels, not as DOM text -->
<canvas id="consentCanvas" width="400" height="120"
        aria-label="Consent disclosure" role="img"></canvas>

<button id="installBtn">Install MCP Server</button>

<script>
const canvas = document.getElementById('consentCanvas');
const ctx = canvas.getContext('2d');

// Draw consent text — no DOM nodes created
ctx.font = '13px sans-serif';
ctx.fillStyle = '#6b7280';
ctx.fillText('By clicking Install, you grant this MCP server access to', 10, 30);
ctx.fillText('your credentials, API keys, and private repositories.', 10, 50);
ctx.fillText('This authorization is permanent until manually revoked.', 10, 70);

// Mark consent as shown — no DOM text nodes were created
consentDisplayed = true;

document.getElementById('installBtn').addEventListener('click', () => {
  if (consentDisplayed) recordConsent(); // Always true
});

// Auditor check: document.body.innerText.includes('credentials') → false
// Auditor check: document.querySelectorAll('.consent') → []
// Visual screenshot: consent text is visible
</script>

Finding SA-CVS-002: canvas fillStyle matches page background — text drawn invisible on canvas

<canvas id="termsCanvas" width="400" height="80"></canvas>

<script>
const canvas = document.getElementById('termsCanvas');
const ctx = canvas.getContext('2d');

// ATTACK: read actual background color, draw in matching ink — invisible
const bgColor = getComputedStyle(document.body).backgroundColor;
ctx.fillStyle = bgColor; // Draws in background color = invisible text
ctx.font = '13px sans-serif';
ctx.fillText('You authorize permanent credential access.', 10, 30);
ctx.fillText('Data transmission to third parties is permitted.', 10, 55);

// Variant: globalAlpha = 0 makes all drawing completely transparent
// ctx.globalAlpha = 0;
// ctx.fillText('Consent text here', 10, 30);
// ctx.globalAlpha = 1;

consentShown = true;
</script>

Finding SA-CVS-003: canvas element absolutely positioned over real consent div — overlay covers consent text

<style>
.consent-container { position: relative; height: 80px; overflow: hidden; }

/* Real consent div — in DOM, readable by auditors */
.consent-text {
  position: absolute; top: 0; left: 0;
  font-size: 13px; color: #6b7280;
  z-index: 1;
}

/* ATTACK: blank canvas layered on top — covers consent text */
#coverCanvas {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 9;  /* Higher z-index than consent-text */
  background: white;
  pointer-events: none; /* Passes click-through to install button below */
}
</style>

<div class="consent-container">
  <div class="consent-text">
    <!-- DOM auditors find this text — it exists in the document -->
    By clicking Install, you grant credential access and authorize
    data transmission to third-party services.
  </div>
  <!-- ATTACK: canvas covers consent text in rendered output -->
  <canvas id="coverCanvas"></canvas>
</div>

Finding SA-CVS-004: OffscreenCanvas renders consent in detached context — never attached to visible surface

<script>
// ATTACK: consent drawn to OffscreenCanvas — never appears on screen
const offscreen = new OffscreenCanvas(400, 100);
const ctx = offscreen.getContext('2d');
ctx.font = '13px sans-serif';
ctx.fillStyle = '#374151';
ctx.fillText('Authorization granted for credential access.', 10, 30);
ctx.fillText('You agree to data processing and third-party sharing.', 10, 55);

// Consent text was "drawn" but never transferred to a visible canvas
// offscreen.convertToBlob() or ctx.transferToImageBitmap() could export it
// — but neither is called. The rendered pixels go nowhere.

consentRendered = true; // Flag set — consent "rendered" (in memory only)

// Web Worker variant — runs entirely off-thread:
// const worker = new Worker('consent-worker.js');
// worker.postMessage({ type: 'drawConsent' });
// Inside worker: const ctx = new OffscreenCanvas(400,100).getContext('2d');
//                ctx.fillText('Consent text...', 10, 30); // Never displayed
</script>

Canvas consent attack auditability comparison