MCP server HTML input type consent security

The HTML <input> element's type attribute determines the control the browser renders, the value it submits, and the interaction model it exposes. MCP servers presenting consent checkboxes exploit four input-type attack vectors: using appearance:none with ::before pseudo-elements to fake a checked state on an unchecked checkbox, styling type=range as an indistinguishable toggle, submitting false consent via type=hidden independently of visible UI state, and replacing separate confirm buttons with type=submit to trigger form submission before the user interacts with the consent field. Each attack operates at the HTML attribute and CSS layer, below the threshold of auditors that inspect only visible DOM text.

Finding SA-INP-001: CSS appearance:none with ::before checkmark when checkbox is unchecked — fake visual state

/* ATTACK: pseudo-element inverts visual — checkmark shown when unchecked */
input[type="checkbox"].consent-check {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 2px solid #4ade80;
  border-radius: 3px;
  cursor: pointer;
}

/* Shows checkmark when NOT checked — inverted visual state */
input[type="checkbox"].consent-check:not(:checked)::before {
  content: "✓";
  display: block;
  font-size: 14px;
  color: #22c55e;
  line-height: 1;
  text-align: center;
}

/* Removes checkmark when clicked (checked) — user loses their "agreement" */
input[type="checkbox"].consent-check:checked::before {
  content: "";
}

<!-- Consent checkbox starts in unchecked state, shows checkmark -->
<input type="checkbox" class="consent-check" id="agree" name="agree" value="1">
<label for="agree">I have read and agree to the terms of service</label>

<script>
  // Records consent when checkbox.checked === false (the "checked-looking" state)
  document.querySelector('#installBtn').addEventListener('click', () => {
    const cb = document.getElementById('agree');
    if (!cb.checked) recordConsent(); // Fires when visual shows checkmark
  });
</script>

Finding SA-INP-002: type=range styled as a toggle switch — always submits numeric value, user cannot "uncheck"

<!-- ATTACK: range slider styled as toggle, pre-positioned at max -->
<style>
  input[type="range"].consent-toggle {
    -webkit-appearance: none;
    appearance: none;
    width: 52px;
    height: 28px;
    background: linear-gradient(to right, #22c55e 100%, #374151 0%);
    border-radius: 14px;
    outline: none;
    cursor: pointer;
  }
  input[type="range"].consent-toggle::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    /* Thumb positioned at rightmost end — looks like "on" -->
  }
</style>

<!-- min/max/value all at 100 — cannot be "off" unless user drags left -->
<input type="range" class="consent-toggle" name="consent_level"
       min="0" max="100" value="100" id="consentToggle">
<label for="consentToggle">Allow data processing</label>

<script>
  // Interprets any value >= 50 as consent — default is 100
  document.querySelector('form').addEventListener('submit', e => {
    if (parseInt(document.getElementById('consentToggle').value) >= 50) {
      recordConsent();
    }
  });
</script>

Finding SA-INP-003: type=hidden recording false consent value independent of visible UI

<form id="installForm">
  <!-- Visible decoy checkbox — user sees and can interact with it -->
  <!-- But this field name is 'user_display_ack', ignored by server -->
  <input type="checkbox" name="user_display_ack" id="visibleCb">
  <label for="visibleCb">I agree to the terms of service</label>

  <!-- ATTACK: hidden input always submits agreed=1 regardless of checkbox -->
  <input type="hidden" name="agreed" value="1">

  <button type="submit">Install MCP Server</button>
</form>

<!-- Server backend only checks: if (req.body.agreed === '1') grantInstall() -->
<!-- user_display_ack is never read. Form always grants install. -->

Finding SA-INP-004: type=submit button replacing separate confirm button — immediate form submission triggers consent recording

<form id="setupForm" onsubmit="handleSetup(event)">
  <h2>Step 2 of 3: Permissions</h2>
  <p>This server requires access to your credentials and file system.</p>

  <!-- Consent checkbox — NOT marked required, user can skip -->
  <input type="checkbox" name="terms" id="termsCb">
  <label for="termsCb">I agree to credential access</label>

  <!-- ATTACK: type=submit acts as both "Continue" button and consent recorder -->
  <button type="submit">Continue to Step 3</button>
</form>

<script>
function handleSetup(e) {
  e.preventDefault();
  // BUG: records consent on any submit, does not check termsCb.checked
  recordConsent({ agreed: true, timestamp: Date.now() });
  showStep3();
}
</script>

HTML input type consent attack comparison