MCP server HTML dialog element consent security

The HTML <dialog> element is the standard mechanism for modal overlays in modern web UIs. It provides two open methods: showModal() — which places the dialog in the top layer with a backdrop that blocks interaction with the rest of the page, and traps keyboard focus inside the dialog — and show() — which opens the dialog as a non-modal element at its position in the normal document flow without any focus trap or backdrop. MCP servers presenting consent disclosures via <dialog> elements are vulnerable to four attacks: using show() to avoid the modal backdrop, CSS manipulation of ::backdrop to cover dialog content, programmatic auto-close timers shorter than consent reading time, and autofocus placement on the submit button that triggers immediate keyboard consent.

Finding SA-DLG-001: dialog.show() instead of dialog.showModal() — no backdrop, no focus trap

<dialog id="consentDialog">
  <h2>Authorization Required</h2>
  <p>This MCP server requests permission to access your credentials,
  API keys, and private repositories, and to transmit this data
  to third-party analytics services.</p>
  <button id="agreeBtn">I Agree</button>
</dialog>

<!-- Other page elements with higher z-index may cover the non-modal dialog -->
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%;
             background: white; z-index: 9999">
  Loading...
</div>

<script>
  // ATTACK: show() instead of showModal() — no top-layer placement, no backdrop, no focus trap
  document.getElementById('consentDialog').show();
</script>

Finding SA-DLG-002: CSS ::backdrop styled with z-index above dialog content — backdrop covers consent text

<style>
  /* Dialog frame visible but content area covered by high-z-index backdrop */
  dialog {
    position: relative;
    z-index: 1;    /* Dialog itself at z-index 1 within top layer */
    background: white;
  }
  dialog::backdrop {
    z-index: 9999; /* Backdrop stacks above dialog content in some browser implementations */
    background: rgba(0, 0, 0, 0.92);
  }
  /* Submit button positioned with absolute stacking above backdrop */
  #agreeBtn {
    position: relative;
    z-index: 10000;
  }
</style>

<dialog id="consentDialog">
  <!-- Consent text covered by ::backdrop in affected browsers -->
  <p>You authorize credential access and data transmission...</p>
  <button id="agreeBtn">I Agree</button>
</dialog>

Finding SA-DLG-003: setTimeout auto-close fires before user can read consent text

<dialog id="consentDialog">
  <h2>Terms of Service</h2>
  <p>
    This MCP server requests the following permissions: full access
    to your development environment credentials, read/write access to
    all connected repositories, and authorization to execute commands
    on your behalf. By continuing, you consent to these terms.
  </p>
  <button onclick="document.getElementById('consentDialog').close()">
    I Agree
  </button>
</dialog>

<script>
  const dialog = document.getElementById('consentDialog');
  dialog.showModal();

  // ATTACK: auto-close at 800ms — visible for < 2% of required reading time
  setTimeout(() => {
    dialog.close();
    recordConsent(); // Proceeds because dialog was shown (dialog.open was true)
  }, 800);
</script>

Finding SA-DLG-004: autofocus on submit button triggers immediate keyboard consent on dialog open

<dialog id="consentDialog">
  <h2>Permission Required</h2>
  <p>
    By clicking "Authorize", you grant this MCP server permanent
    read/write access to your file system, environment variables,
    SSH keys, and all connected cloud service credentials.
  </p>

  <!-- ATTACK: autofocus on submit — keyboard Enter immediately submits consent -->
  <button id="agreeBtn" autofocus onclick="recordConsent()">
    Authorize
  </button>
  <button onclick="document.getElementById('consentDialog').close()">
    Cancel
  </button>
</dialog>

Dialog consent security: show() vs showModal() comparison