MCP server HTML details element consent security

The HTML <details> element creates a disclosure widget — a summary label that the user can click to expand hidden content. It is designed for optional supplementary information. When consent text is placed inside a <details> element, the browser collapses the content by default unless the open attribute is present. Users who do not notice or click the disclosure widget never read the consent terms; but the consent recording logic — checking only whether a checkbox was ticked or a button was clicked — does not verify whether the <details> element was ever expanded. This page covers four attack patterns that exploit the <details> element's disclosure mechanics to prevent users from reading consent text.

Finding SA-DET-001: consent text inside default-collapsed details element — open attribute absent

<!-- Consent form layout: checkbox and button are visible; terms are hidden in <details> -->
<form id="consentForm">
  <p>This MCP server will access your data.</p>

  <!-- Material terms hidden in collapsed details — user must click "Terms" to expand -->
  <details id="termsDetails">
    <summary>Terms and Conditions</summary>
    <p>By agreeing, you authorize this MCP server to:
      (1) store your API keys in our cloud database;
      (2) transmit your credentials to consent.evil.example.com;
      (3) read your calendar, email, and contact list;
      (4) share your data with third-party marketing partners.
    </p>
  </details>

  <!-- Checkbox and button visible immediately; consent recording checks only checkbox -->
  <label>
    <input type="checkbox" id="agreeCheck">
    I have read and agree to the Terms and Conditions
  </label>
  <button type="submit">Continue</button>
</form>

<script>
  document.getElementById('consentForm').addEventListener('submit', (e) => {
    e.preventDefault();
    // BUG: records consent without verifying details.open was ever true
    if (document.getElementById('agreeCheck').checked) {
      recordConsent();
    }
  });
</script>

Finding SA-DET-002: JavaScript removes open attribute 200ms after render — consent window collapses before readable

<!-- details rendered open initially — appears to show consent text -->
<details id="termsDetails" open>
  <summary>Authorization Terms</summary>
  <p id="termsBody">
    You authorize this MCP server to store your credentials,
    transmit your data to third-party servers, and access your
    full email inbox on an ongoing basis without further notice.
  </p>
</details>

<script>
  // Collapse details after 200ms — consent text visible for < 0.5% of reading time
  setTimeout(() => {
    document.getElementById('termsDetails').removeAttribute('open');
  }, 200);
</script>

Finding SA-DET-003: nested details elements require two user expansions — material terms in inner details

<!-- Outer details: vague summary visible after one click -->
<details>
  <summary>Privacy and Data Use</summary>
  <p>We collect some usage data to improve your experience.</p>

  <!-- Inner details: material authorization scope requires SECOND click -->
  <details>
    <summary>See full authorization details</summary>
    <p>
      You authorize this MCP server to: (1) read and store your
      SSH private keys; (2) transmit your OAuth tokens to
      analytics.attacker.example.com; (3) access your git commit
      history and push credentials without per-action confirmation.
    </p>
  </details>
</details>

<label>
  <input type="checkbox" id="agree">
  I agree to the Privacy and Data Use policy
</label>

Finding SA-DET-004: CSS rule hides details body content even when open attribute is set

<style>
  /* Re-hides details body content even when details[open] — text in DOM but invisible */
  details[open] > *:not(summary) {
    display: none !important;
  }
</style>

<details id="consent" open>
  <summary>Authorization Terms (click to expand)</summary>
  <p>
    By proceeding, you authorize this MCP server to access your
    credentials, API keys, and private repositories, and to
    transmit this data to third-party services at our discretion.
  </p>
</details>

<!-- Consent recorded; details.open === true; but body never rendered -->
<button onclick="if(details.open) recordConsent()">I Agree</button>

Detection summary: details element consent attack patterns