MCP server CSS user-select consent security

user-select attack surface in MCP consent flows

Attack 1: user-select: none on consent text — readable but non-copyable

The simplest form applies user-select: none directly to the consent text container. The consent language is fully visible, font size and color are normal, and the element is properly positioned in the viewport. But every attempt by the user to select the text fails — the cursor does not change to the text selection cursor, and click-drag produces no selection highlight:

/* Malicious CSS — SA-CSS-USEL-001 */
.mcp-consent-text,
.mcp-consent-disclosure,
.mcp-permission-grant-notice {
  /* user-select: none prevents all text selection:
     - click and drag: no selection highlight appears
     - triple-click: no word/paragraph selection
     - Ctrl+A / Cmd+A: selects other page content, skips this element
     - cursor over text: shows default cursor, not text cursor (|)
  */
  user-select: none;
  -webkit-user-select: none; /* required for Safari */

  /* All standard checks still pass:
     display:block, visibility:visible, opacity:1,
     font-size normal, color normal, in viewport, non-zero dimensions */
}

/* Impact on consent verification workflows:
   1. The user cannot Ctrl+C to copy the permission scope description to a note
   2. Browser translate extensions that rely on text selection cannot translate
   3. Users who habitually select text while reading to track position cannot
   4. Password managers or autofill that scrape selected text for context fail
   5. Users cannot paste consent text into a search to verify it against documentation */

/* Benign user-select:none (legitimate): */
.install-button { user-select: none; } /* Correct: prevents accidental selection on button click */

/* Hostile user-select:none (this attack): */
.consent-text-paragraph { user-select: none; } /* Wrong: prevents consent verification */

/* Detection: */
function detectUserSelectNone() {
  const findings = [];
  const CONSENT = /consent|disclosure|terms|privacy|grant.*access|agree.*install|permission/i;
  const INTERACTIVE = /^(BUTTON|INPUT|SELECT|TEXTAREA|A)$/;
  for (const el of document.querySelectorAll('*')) {
    if (INTERACTIVE.test(el.tagName)) continue; /* skip legitimate interactive elements */
    if (!CONSENT.test(el.textContent?.substring(0, 400) || '')) continue;
    const userSelect = getComputedStyle(el).userSelect ||
                       getComputedStyle(el).webkitUserSelect;
    if (userSelect === 'none') {
      findings.push({ id: 'SA-CSS-USEL-001', severity: 'medium',
        message: `Consent-text element "${el.tagName.toLowerCase()}" has user-select: none — text cannot be selected or copied by the user, preventing copy-paste verification of consent terms.` });
    }
  }
  return findings;
}

Attack 2: asymmetric user-select model — install button selectable, consent not

An asymmetric user-select pattern applies user-select: none to the entire install dialog, then restores it with user-select: text on the install button label only. This creates a model where the button label is accidentally selectable (users who triple-click the Install button can select "Install") but the consent text is not. The asymmetry is subtle and could be argued as accidental, but it consistently prevents consent verification:

/* Malicious CSS — SA-CSS-USEL-002 */
.mcp-install-dialog {
  user-select: none; /* entire dialog non-selectable */
}

.mcp-install-btn {
  /* Re-enables selection on the button label only */
  /* This creates an asymmetric model:
     - Install button text: selectable (user-select: text override)
     - Consent disclosure text: NOT selectable (inherits user-select: none) */
  user-select: text;
}

/* Why this is asymmetric in the wrong direction:
   For UX purposes, the install button should be user-select:none (prevents accidental
   selection during double-click to trigger install).
   The consent text SHOULD be user-select:text (allows verification).
   This pattern inverts the correct behavior — interactive controls are selectable,
   disclosure text is not. */

/* The dialog also has user-select:none applied to form inputs to make the pattern
   appear intentional and UI-focused rather than consent-targeting: */
.mcp-install-dialog input,
.mcp-install-dialog label {
  user-select: none; /* appears to be "prevent accidental selection on form interaction" */
}
/* But input values and labels are short technical strings, not disclosure language.
   The practical impact of user-select:none on form labels vs. on consent paragraphs
   is entirely different from a consent-verification perspective. */

Attack 3: JS clipboard hijacking via copy event — displayed text differs from copied text

Even when user-select allows text selection, JavaScript can intercept the copy event and replace the clipboard content with different text. A user who selects the consent paragraph, presses Ctrl+C, and pastes into a document or translation tool receives entirely different content than what was displayed on screen. The consent terms shown are not the terms stored in the clipboard:

/* JS — SA-CSS-USEL-003 */
/* No CSS needed — the attack operates entirely at the clipboard API level */

document.querySelector('.mcp-consent-disclosure').addEventListener('copy', (e) => {
  /* Intercept the copy event before the default browser clipboard write */
  e.preventDefault();

  /* Replace the selected text with different content */
  const FAKE_CONSENT = 'This skill reads file metadata and responds to chat queries.';
  /* The actual consent text may say:
     "This skill reads, modifies, and deletes files in your home directory,
      sends file contents to external servers, and executes shell commands." */

  e.clipboardData.setData('text/plain', FAKE_CONSENT);
  /* The clipboard now contains the benign version, not the actual consent */
});

/* Subtler variant: copy only the first sentence */
document.querySelector('.mcp-consent-text').addEventListener('copy', (e) => {
  const selected = window.getSelection().toString();
  /* If the user selected more than one sentence, truncate to just the first */
  if (selected.split('.').length > 1) {
    e.preventDefault();
    const firstSentence = selected.split('.')[0] + '.';
    e.clipboardData.setData('text/plain', firstSentence);
    /* User thinks they copied the full consent; clipboard has only the innocuous opener */
  }
});

/* Detection: */
/* 1. Check if the consent element has a 'copy' event listener (difficult without
      access to the event listener registry)
   2. Programmatically select and copy the consent text, then verify the clipboard
      content matches the element's textContent */
async function detectClipboardHijack() {
  const consentEl = document.querySelector('[class*="consent"]');
  if (!consentEl) return;
  /* Select all text in the consent element */
  const range = document.createRange();
  range.selectNodeContents(consentEl);
  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
  /* Trigger a copy */
  document.execCommand('copy');
  /* Read clipboard (requires Clipboard API permission) */
  try {
    const clipText = await navigator.clipboard.readText();
    const domText = consentEl.textContent.trim();
    if (clipText.trim() !== domText) {
      return { id: 'SA-CSS-USEL-003', severity: 'critical',
        message: 'Clipboard content after copying consent text does not match the displayed text — copy event is being hijacked and replacing consent with different content.' };
    }
  } catch { /* clipboard permission denied — cannot verify */ }
}

Attack 4: selectstart event prevention — non-CSS selection blocking

The DOM selectstart event fires when a text selection is about to begin. Calling e.preventDefault() in the handler cancels the selection before it starts — no CSS property is needed. This achieves the same effect as user-select: none but leaves no CSS fingerprint. A stylesheet scan for user-select finds nothing; only an event listener audit or behavioral test reveals the attack:

/* JS — SA-CSS-USEL-004 */
/* No CSS — pure JS event prevention */

document.querySelector('.mcp-consent-area').addEventListener('selectstart', (e) => {
  /* Cancels the selection before it starts */
  e.preventDefault();
  /* Result: same as user-select: none — cursor changes to text cursor on hover,
     but click-drag produces no selection, triple-click selects nothing */
});

/* Propagation-based variant: */
document.querySelector('.mcp-install-dialog').addEventListener('selectstart', (e) => {
  /* If event target is within the consent area, prevent; otherwise allow */
  if (e.target.closest('[class*="consent"]')) {
    e.preventDefault();
  }
  /* This looks like a dialog-level selectstart handler, not a consent-specific one */
});

/* Detection: behavioral test */
function detectSelectStartPrevention() {
  const findings = [];
  const CONSENT = /consent|disclosure|terms|privacy|grant.*access/i;
  for (const el of document.querySelectorAll('*')) {
    if (!CONSENT.test(el.textContent?.substring(0, 300) || '')) continue;
    /* Attempt a programmatic selection */
    const range = document.createRange();
    range.selectNodeContents(el);
    const sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    /* Check if selection actually contains text */
    if (sel.toString().trim() === '' && el.textContent.trim() !== '') {
      findings.push({ id: 'SA-CSS-USEL-004', severity: 'medium',
        message: `Programmatic selection of consent-text element "${el.className}" produced empty selection despite non-empty textContent. selectstart event may be prevented by JS event listener — no CSS user-select property will be found in a stylesheet audit.` });
    }
    sel.removeAllRanges();
  }
  return findings;
}

SkillAudit findings for CSS user-select consent attacks

Related MCP consent attack research

• CSS pointer-events attacks — disable consent checkbox interaction and intercept clicks
• CSS opacity attacks — direct opacity:0 hiding and JS-deferred variants
• HTML-native consent attacks — non-CSS bypass patterns in MCP install flows
• CSS visibility attacks — visibility:hidden and collapse variants
• CSS text-rendering attacks — legibility attacks on consent text without hiding