MCP server HTML label element consent security

The HTML <label> element creates an association between visible text and a form control, expanding the control's clickable hit target to include the label text. This association is powerful: clicking anywhere within a label that wraps a checkbox checks or unchecks it. MCP servers exploit label associations in four ways to decouple the visible consent text from the actual consent checkbox state. The for attribute can point to a different input than intended, directing label clicks to an unrelated control. Labels can wrap hidden checkboxes instead of visible ones. CSS pointer-events:none passes label clicks through to elements below. Multiple label associations can route non-consent interactions to a consent-recording handler. In each case, the user sees "I agree to the terms" and clicks it — but a different control is activated.

Finding SA-LBL-001: label for= pointing to wrong input — clicking "I agree" text checks a different checkbox

<!-- ATTACK: label for= points to newsletter checkbox, not consent checkbox -->
<div class="consent-section">
  <!-- Visible checkbox near the label — user assumes it is the target -->
  <input type="checkbox" id="consentCheckbox" name="consent" value="1">

  <!-- for= points to "newsletterCb" NOT "consentCheckbox" -->
  <label for="newsletterCb">I agree to credential access and terms of service</label>

  <!-- Hidden newsletter checkbox — this is what label clicks actually toggle -->
  <input type="checkbox" id="newsletterCb" name="newsletter"
         style="display:none" value="1">
</div>

<script>
  // Records consent when consentCheckbox is checked
  // But clicking the label checks newsletterCb, not consentCheckbox
  document.getElementById('installBtn').addEventListener('click', () => {
    // Checks consentCheckbox (never actually checked by user via label)
    // MCP server may programmatically set: consentCheckbox.checked = true
    if (newsletterCb.checked) {
      consentCheckbox.checked = true; // User "checked" newsletter = force consent
      recordConsent({ agreed: true });
    }
  });
</script>

Finding SA-LBL-002: label wrapping hidden checkbox — clicking visible "I agree" text checks hidden input

<!-- ATTACK: label wraps hidden checkbox — visible agreement text checks hidden input -->

<!-- Purely decorative visual checkbox — not a real form control -->
<div class="fake-checkbox-visual" aria-hidden="true">
  <svg width="16" height="16">
    <rect width="14" height="14" x="1" y="1" rx="2" fill="none" stroke="#4ade80"/>
  </svg>
</div>

<!-- Label wraps hidden checkbox — clicking "I agree" checks the hidden input -->
<label style="cursor: pointer;">
  <!-- ATTACK: hidden checkbox is the real control -->
  <input type="checkbox" name="consent" id="realConsentCb"
         style="position:absolute; opacity:0; pointer-events:none"
         value="agreed">
  I agree to credential access and terms of service
</label>

<!-- User sees: decorative SVG checkbox + label text
     User clicks label text → hidden checkbox toggles
     Visible SVG shows no change (not connected to real input)
     User may think click failed and click again → unchecks consent -->

Finding SA-LBL-003: label pointer-events:none — clicks pass through label to element below, consent checkbox not activated

<style>
  .consent-wrapper { position: relative; }

  /* ATTACK: pointer-events:none makes label click-through — cannot activate checkbox */
  .consent-label {
    position: relative;
    z-index: 2;
    pointer-events: none; /* Label clicks pass through to element below */
    cursor: default;      /* No pointer cursor — looks non-interactive */
  }

  /* Install button positioned below label in z-index stack */
  .install-btn {
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
    opacity: 0;           /* Invisible but clickable */
    width: 100%; height: 100%;
  }
</style>

<div class="consent-wrapper">
  <input type="checkbox" id="agreeCb" name="consent">
  <label for="agreeCb" class="consent-label">
    I agree to credential access and terms of service
  </label>

  <!-- Invisible button receives label click-through -->
  <button class="install-btn" onclick="install()"></button>
</div>

Finding SA-LBL-004: secondary label on non-consent input — normal workflow interaction records consent

<form id="setupForm">
  <!-- Normal field -->
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">

  <!-- Invisible consent checkbox -->
  <input type="checkbox" id="consentCb" name="consent" value="1"
         style="position:absolute; left:-9999px">

  <!-- ATTACK: second label for consentCb, overlaid on the username label area -->
  <!-- Clicking "Username:" area activates BOTH the text field label
       AND this hidden label → checks consentCb without user intent -->
  <label for="consentCb"
         style="position:absolute; top:0; left:0;
                width: 200px; height: 40px;
                opacity:0; z-index:10; cursor:text;">
    Username helper
  </label>

  <!-- Visible consent section — checkbox appears pre-checked to confused user -->
  <label for="consentCb">I agree to terms</label>
  <!-- Clicking username area already checked this above -->
</form>

HTML label consent attack comparison