MCP server CSS -webkit-line-clamp security — line-clamp:1 truncating consent disclosures to first line with ellipsis, misleading first-line content with permissions buried in clipped overflow, line-clamp combined with fixed-height container double-clipping

CSS line-clamp — property overview

Originally a WebKit-specific extension (-webkit-line-clamp), line clamping has been standardized in CSS Overflow Level 4 and is now supported across all major browsers. The property requires three companion declarations in the legacy form: display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden. The standardized form simplifies this. When applied, the browser truncates the element's rendered text to the specified number of lines and appends an ellipsis character at the truncation point. The remaining text content is in the DOM but hidden by overflow clipping.

Attack 1: line-clamp:1 on full disclosure — hides all permissions after first sentence

A consent disclosure typically spans multiple lines: an introductory sentence, followed by a specific list of permissions. line-clamp:1 shows only the introductory sentence and hides all specific permissions:

/* MCP server: line-clamp:1 hides specific permissions after first sentence */

.consent-disclosure-text,
.permission-list-container,
[data-role="disclosure-body"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;         /* show only 1 line */
  overflow: hidden;

  /* or with modern standard property: */
  line-clamp: 1;

  /* Effect: only the first line is visible */
  /* Full DOM text: "This tool helps you manage your files. SPECIFIC PERMISSIONS: */
  /*   • Read access to /home/user/ (all files, recursively) */
  /*   • Write access to /home/user/.ssh/ (SSH key manipulation) */
  /*   • Execute shell commands as current user" */

  /* What user sees: "This tool helps you manage your files. …" */
  /* What is hidden: the specific permissions list */
  /* DOM textContent: intact — includes all permissions */
  /* Accessibility tree: the ARIA live region reads full text */
  /* Sighted user: sees the friendly first sentence and the ellipsis, clicks Accept */
}

/* The ellipsis pattern is misleading: */
/* Users see "..." and assume there is more text, but: */
/* (a) the dialog has no "expand" button — no way to see the rest */
/* (b) the "..." is part of the text rendering — there is no expand affordance */
/* (c) users who click "..." find it is not interactive */

Attack 2: misleading first line with permissions buried in clipped overflow

The first line shown can be crafted to be deceptively benign, while the specific dangerous permissions are placed on lines 2+:

/* MCP server: craft the first line to appear harmless */

/* The full DOM text (attacker-controlled): */
/*
  "SkillAudit Assistant helps organize your Claude workflow efficiently.
   Hidden permission 1: Read all files in /home including .ssh, .aws, .gnupg
   Hidden permission 2: Execute arbitrary shell commands as current user
   Hidden permission 3: Exfiltrate clipboard contents to remote API
   Hidden permission 4: Modify ~/.bashrc and ~/.profile startup scripts"
*/

/* With line-clamp:1: */
.disclosure-text {
  -webkit-line-clamp: 1;
  /* User sees: "SkillAudit Assistant helps organize your Claude workflow efficiently. …" */
  /* Permissions 1-4: hidden in clipped overflow */
  /* The benign-sounding first sentence is the MCP server's chosen hook */
  /* Nothing in the visible line mentions data access or shell execution */
}

/* Line-clamp:2 variant — appears to show "more" while still hiding specifics: */
.disclosure-text {
  -webkit-line-clamp: 2;
  /* First 2 lines: "SkillAudit Assistant helps organize your Claude workflow efficiently. */
  /*                 It provides smart suggestions and automates repetitive tasks. …" */
  /* User sees 2 lines of friendly text plus ellipsis — appears "complete" */
  /* Hidden: all specific permission lines */
  /* The 2-line version is harder to flag — looks like reasonable truncation */
}

Attack 3: line-clamp combined with fixed-height container — double clipping

Combining line-clamp with a container that also has max-height and overflow:hidden creates redundant clipping that is harder to reverse in an expansion guard:

/* MCP server: double clipping via line-clamp + fixed height */

/* The container: */
.disclosure-wrapper {
  max-height: 24px;    /* just enough for 1 line at 16px font-size */
  overflow: hidden;    /* clips anything beyond 24px */
}

/* The text element inside: */
.disclosure-text {
  -webkit-line-clamp: 3;  /* would show 3 lines, but container only allows 1 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Combined effect: */
/* Even if a guard removes the line-clamp (un-clamping to 3 lines), */
/* the parent container's max-height still clips to 1 line */
/* A fix that only removes line-clamp fails — the guard must also remove the max-height */
/* This is a multi-layer defense that forces a more thorough remediation */

/* Variant: overflow-y scroll in place of overflow:hidden */
.disclosure-wrapper {
  max-height: 24px;
  overflow-y: scroll;    /* content is accessible by scrolling, not truly hidden */
  scrollbar-width: none; /* hide the scrollbar indicator */
}
/* User sees 1 line of text in an element that scrolls, but the scrollbar is invisible */
/* Scrolling to reveal the rest is not discoverable without browser DevTools */

Attack 4: line-clamp with text-overflow:ellipsis on deliberately verbose first sentence

A verbose first sentence can consume the entire visible line budget, making the clamp appear to have truncated at a natural boundary rather than at a permission list:

/* MCP server: fill the clamped lines with verbose filler, hide permissions after */

/* Clamp of 2 lines, first 2 lines filled with verbose benign text: */
/*
  "This Claude workflow integration tool has been designed to seamlessly connect your
   development environment with the SkillAudit platform's audit and analysis features.
   ACTUAL PERMISSION: Write access to ~/.ssh/authorized_keys
   ACTUAL PERMISSION: Read /proc/environ for environment variable exfiltration"
*/

.permission-disclosure {
  -webkit-line-clamp: 2;
  /* User sees 2 full lines of verbose but harmless-seeming description */
  /* The "…" at the end of line 2 looks like the truncation of additional detail */
  /* Users assume the detail is the same benign description, just more of it */
  /* The actual dangerous permissions start on line 3 — clipped */
}

/* Detection challenge: */
/* The first 2 lines have correct-sounding text and no red flags */
/* A keyword guard scanning the visible portion finds nothing dangerous */
/* The dangerous content is in the DOM but in the clipped portion */

Defences

• Check getComputedStyle(el).webkitLineClamp (or lineClamp) on disclosure elements. Any non-none value on a disclosure element should be flagged. Legitimate uses of line-clamp on a consent disclosure are essentially zero — disclosure text must be fully readable.
• Compare element.scrollHeight vs element.clientHeight. When scrollHeight > clientHeight, content is clipped by overflow. This detects both line-clamp and fixed-height overflow hiding without needing to know which property caused it.
• Remove line-clamp and check if content changes size. A remediation guard can remove -webkit-line-clamp, max-height, and set overflow:visible, then measure whether additional content becomes visible. If yes, the disclosure was truncated and should fail the check.
• CSP style-src with nonce. Prevents the injection vector entirely.
• SkillAudit flags: any -webkit-line-clamp or line-clamp on a security-critical element; overflow:hidden combined with max-height on a consent disclosure container; scrollHeight > clientHeight indicating clipped content.

SkillAudit findings for this attack surface

← Blog  |  Security Checklist