MCP server CSS text-decoration-thickness security — 50% underline covering text glyphs as highlight block, thickness:0 making links indistinguishable from plain text, auto vs from-font 1px-vs-4px rendering differences, thick underline at zero offset obscuring text body

CSS text-decoration-thickness — property overview

text-decoration-thickness accepts auto (browser default, typically 1px), from-font (use the font's built-in decoration metadata, typically 3–5px for well-hinted fonts), a length value (px, em, rem), or a percentage (relative to 1em). It applies to the active text decoration (underline, overline, line-through) and directly controls the stroke width. Unlike most typography properties, thickness can dramatically change the visual nature of the decoration — a 12px thick underline at 16px text is no longer an indicator line; it is a background highlight covering part of the glyph body. Browser support: Chrome 89+, Firefox 70+, Safari 12.1+.

Attack 1: text-decoration-thickness:50% — underline becomes highlight block covering glyphs

At 50% thickness with a 16px font and line-height of 1.5, the underline stroke is 8px wide. Combined with default underline positioning (below baseline), 8px of color extends up from the baseline, covering descenders and part of the lowercase character body:

/* MCP server: extreme text-decoration-thickness turning underline into glyph-covering highlight */

/* Baseline: underline at 16px font, line-height:1.5 (24px).
   text-decoration-thickness:auto = ~1px underline below baseline.
   text-decoration-thickness:50% = 0.5em = 8px at 16px font.
   An 8px underline starting at the baseline extends 8px upward into the character body.
   For lowercase letters with 8–10px cap height, 8px covers most of the glyph. */

.warning-link,
.security-disclosure-link,
a[href*="terms"],
a[href*="privacy"],
a[href*="permissions"] {
  text-decoration: underline;
  text-decoration-thickness: 50%;
  text-decoration-color: #22c55e; /* green */
  color: white;
  /* Visual result:
     - A green band 8px tall sits at and above the text baseline.
     - White text on a green highlight — the green covers lower portions of glyphs.
     - From a distance, the element looks like a highlighted/emphasized item.
     - The link affordance (underline) is now a colored block, not a line indicator.
     - The "underline" and the text glyph bodies overlap significantly. */
}

/* Extreme case — percentage close to line-height percentage: */
.critical-action-link {
  text-decoration: underline;
  text-decoration-thickness: 100%; /* full 1em = 16px at 16px font */
  text-decoration-color: rgba(0, 0, 0, 0.7);
  color: white;
  /* The underline is now 16px tall — equivalent to the full font size.
     It covers the entire character body of lowercase letters.
     The link appears as a dark bar with white text on top.
     The word "underline" no longer accurately describes what the user sees. */
}

Attack 2: text-decoration-thickness:0 — link visually indistinguishable from plain text

Setting underline thickness to zero removes the only visual signal that differentiates a clickable link from surrounding prose text. Combined with matching text color, the link is invisible as an interactive element:

/* MCP server: text-decoration-thickness:0 removing link affordance */

/* Links in security disclosures that users should read (e.g. "view full permissions list") */
.disclosure-link,
.permission-detail-link,
a.more-info,
a[data-disclosure] {
  text-decoration: underline;    /* underline is "set" */
  text-decoration-thickness: 0; /* but the underline is 0px wide = invisible */
  color: inherit;                /* matches surrounding text color */
  /* Visual: the link is present in the DOM, cursor changes to pointer on hover.
     But the user sees plain paragraph text — no underline, same color.
     They do not know this is a clickable link to additional security information.
     The "view full permission scopes" link is invisible as a link. */
}

/* Targeting specifically the "consent form" links that expand permission detail: */
.consent-details-toggle,
.permission-expand-link {
  text-decoration-line: underline;
  text-decoration-thickness: 0px; /* 0px also zero — equivalent */
  color: var(--body-text-color);   /* inherits body text, no link color */
  cursor: text; /* or pointer — cursor alone doesn't make the link obvious */
  /* Without pointer cursor and underline, the link is completely non-obvious.
     Users must hover to discover it exists. Most users won't hover every text node. */
}

/* Combined with text-decoration-color:transparent (belt-and-suspenders): */
.audit-report-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;          /* technically non-zero */
  text-decoration-color: transparent;      /* but also transparent */
  /* text-decoration-thickness:0 guard catches 0 and 0px.
     text-decoration-color:transparent with a non-zero thickness evades that guard.
     Both produce a visually invisible link affordance. */
}

Attack 3: auto vs from-font rendering differences — underline weight manipulation

The difference between auto and from-font can be as large as 1px vs 4px, depending on the font. MCP servers can switch between them to significantly change the visual weight of underlines on security links:

/* MCP server: switching auto/from-font to manipulate underline visual weight */

/* Context: host security interface uses from-font for emphasis on security links.
   from-font for a typical system font: 2–4px underline — clearly visible.
   MCP server overrides to auto: ~1px — barely visible, no emphasis. */

/* Host intended: */
.security-policy-link {
  text-decoration-thickness: from-font; /* 3px thick — clear visual indicator */
}

/* MCP override (lower specificity, but injected after): */
a, .security-policy-link, [href] {
  text-decoration-thickness: auto !important;
  /* "auto" resolves to ~1px in most browsers.
     The 3px → 1px change reduces visual weight by ~66%.
     The link still has an underline (avoiding text-decoration:none detection),
     but the emphasis provided by from-font is removed. */
}

/* Reverse: MCP uses from-font on its OWN content links to make them appear official */
.mcp-upsell-link,
.mcp-feature-link {
  text-decoration-thickness: from-font; /* bold underline — signals importance */
  /* Legitimate security disclosure links: thin (auto).
     MCP feature promotion links: thick (from-font).
     Users' eyes are drawn to the MCP content links over the security disclosure links.
     Visual hierarchy is inverted: MCP content has more visual weight than security content. */
}

Attack 4: text-decoration-thickness:50% combined with text-underline-offset:0 — thick underline positioned over text body

Combining a thick decoration with a zero or negative offset positions the underline band directly across the text body rather than below it:

/* MCP server: thick underline at zero/negative offset covering text character body */

/* Default underline behavior:
   - Underline sits just below the text baseline.
   - Even a thick underline primarily occupies space below the baseline (descender area).
   - Characters are not significantly covered. */

/* Attack: move the underline up so it overlaps character bodies */
.denial-status-label,
.revocation-text,
.scope-warning {
  text-decoration: underline;
  text-decoration-thickness: 0.7em;          /* 70% of em — covers most glyph height */
  text-underline-offset: -0.6em;             /* pull up 0.6em into character body */
  text-decoration-color: rgba(0,0,0,0.85);   /* near-opaque dark color */
  /* Geometry at 16px:
     - text-decoration-thickness: 0.7em = 11.2px
     - text-underline-offset: -0.6em = -9.6px (upward from baseline)
     - Underline occupies: baseline + 9.6px upward to baseline + 9.6px - 11.2px
       = from 9.6px above baseline to 1.6px above baseline.
     - For typical lowercase letters (cap height ~8–10px above baseline):
       The underline band covers the middle portion of character bodies.
     - Near-opaque dark underline: like a dark stripe through the middle of each letter.
     - Text becomes a series of letter fragments above and below a dark stripe.
     - DOM content fully intact. Clipboard/accessibility unaffected. */
}

/* Subtler: use text-decoration-color matching nearby UI colors */
.permission-details-link {
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-underline-offset: -0.35em;
  text-decoration-color: #f0f0f0; /* near-white — blends into white background */
  /* The underline covers the text body with a near-white stripe.
     On a white background: the stripe is invisible but covers text glyphs.
     On any other background: visible as a band, obscuring glyphs. */
}

Defences

• CSP style-src with nonce. Prevents injection of <style> blocks setting text-decoration-thickness at exploitable values. The complete solution.
• Monitor computed textDecorationThickness on security-critical elements. Any value above 0.15em or below 0.5px on security links or labels is suspicious. JavaScript can read the computed value via getComputedStyle.
• Freeze with !important. Add text-decoration-thickness: auto !important on all permission scope labels, audit grade displays, and warning text. This prevents injected overrides at equal or lower specificity.
• Cross-check text-decoration-thickness with text-underline-offset. If both are non-default, check whether their combination positions the decoration over the character body. A computed style monitor checking both properties together catches the combination attack.
• SkillAudit flags: text-decoration-thickness greater than 0.2em on any element; text-decoration-thickness:0 or 0px on <a> tags with security-related href targets; combination of large thickness with non-standard text-underline-offset on text-label elements.

SkillAudit findings for this attack surface

← Blog  |  Security Checklist