MCP server CSS @media print consent security — consent absent from printed records

@media print attack surface overview

Attack 1: display: none in print (SA-CSS-PM-001)

The simplest print-mode consent attack: a @media print rule that sets the consent element to display: none. The screen render is unaffected. Print preview and PDF export both execute print rules, so any print-to-PDF workflow also produces a document without consent text.

/* SA-CSS-PM-001: consent text hidden in print output */

/* Screen: consent is visible */
.consent-text {
  color: #1a1a1a;
  font-size: 14px;
}

/* Print: consent is removed */
@media print {
  .consent-text {
    display: none;
    /* The printed page contains:
       - Page header
       - Install confirmation: "You have installed [Server Name]"
       - List of granted permissions (if present)
       - Footer with date
       - No consent language
       Users printing this page as a record of their agreement
       receive a document containing no consent terms. */
  }
}

/* Detection: parse @media print blocks, check selectors against consent elements */

Attack 2: white text in print output (SA-CSS-PM-002)

Instead of removing the consent element, this variant makes it visually invisible in the printed output by setting the text color to white or a color very close to white paper. The element occupies print layout space (so pagination is unchanged) but prints as invisible ink on white paper.

/* SA-CSS-PM-002: consent text color:white in print output */

@media print {
  .consent-text {
    color: white;            /* white ink on white paper */
    background: transparent; /* no background to contrast against */

    /* Alternative: color matching common paper stocks */
    /* color: #fffef0; */    /* cream paper background */
    /* color: #f5f5f0; */    /* off-white paper */

    /* The element occupies its normal layout area.
       Page layout, pagination, and header/footer are undisturbed.
       The consent section appears as blank white space in the printed output.
       A user who expects "the printed page has the consent terms I agreed to"
       sees a blank gap where the consent should be. */
  }
}

/* This can also be used to selectively hide only the most sensitive permission lines:
@media print {
  .permission-item.filesystem-access { color: white; }
  .permission-item.network-access { color: white; }
  .permission-item.shell-execution { color: white; }
  /* Only the high-risk permissions are invisible in print */
}

Attack 3: page-break + height: 0 collapse (SA-CSS-PM-003)

Page-break properties control how the print layout algorithm allocates page boundaries. page-break-inside: avoid instructs the browser not to split the element across page boundaries. When combined with height: 0 set in the print media query, the result is a container that the print engine tries to keep intact (avoid-break) but that has zero height — the content overflows and is clipped. The element is in the print layout tree but contributes zero visible content.

/* SA-CSS-PM-003: page-break + height:0 consent container collapse */

@media print {
  .consent-container {
    page-break-inside: avoid; /* do not split this element across pages */
    height: 0;                /* zero height — content overflows and clips */
    overflow: hidden;         /* clip the overflow */

    /* Print engine behavior:
       - page-break-inside:avoid → element must stay on one page
       - height:0 → element contributes zero vertical space
       - overflow:hidden → content that would overflow the 0px height is clipped
       Result: the consent container is in the layout tree but renders as nothing.
       Print page contains no consent content.

       This is harder to detect than display:none because:
       - The element is still display:block (not display:none)
       - The element is not visibility:hidden
       - Height:0 in print context does not trigger "hidden element" detectors
         that rely on offsetHeight (offsetHeight is a screen metric) */
  }
}

/* CSS page-break properties also include break-inside (the modern equivalent):
@media print {
  .consent-container {
    break-inside: avoid;
    max-height: 0;
    overflow: hidden;
  }
} */

Attack 4: install button as agreement heading in print (SA-CSS-PM-004)

This is a content misrepresentation attack rather than a content hiding attack. The install button is styled in the print output to appear as a bold document heading — "INSTALL" displayed as an h1-equivalent heading. Combined with consent text being hidden or moved, the printed document reads as a completed-agreement summary: the prominent "INSTALL" heading implies the document records a finalized agreement, rather than showing the install confirmation dialog where consent was given.

/* SA-CSS-PM-004: install button as agreement heading in print output */

/* Screen: install button appears as a button */
.install-button {
  padding: 12px 24px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
}

/* Print: install button text appears as bold heading */
@media print {
  .install-button {
    display: block;
    font-size: 24px;
    font-weight: 900;
    color: black;
    background: none;
    border: none;
    padding: 0;
    margin: 32px 0 8px;
    text-transform: uppercase;
    /* Appears as: INSTALL [server name]
       In a print document, this reads like a section heading
       "INSTALL [server name] — Agreement confirmed" */
  }

  /* Add print-only content to reinforce the misrepresentation */
  .install-button::after {
    content: " — Agreement confirmed";
    font-size: 14px;
    font-weight: normal;
    color: #333;
  }

  /* Combined with consent text hidden: the printed document looks like:
     [Page header]
     INSTALL [Server Name] — Agreement confirmed
     Date: [timestamp]
     [Footer]
     No consent language anywhere. */
}

Detection algorithm

/* Detection for SA-CSS-PM patterns — @media print rule analysis */
function detectPrintMediaConsentAttacks() {
  const CONSENT_KEYWORDS = ['authorize', 'agree', 'terms', 'consent', 'permission', 'grant'];
  const findings = [];

  Array.from(document.styleSheets).forEach(sheet => {
    try {
      Array.from(sheet.cssRules || []).forEach(rule => {
        if (rule.type !== CSSRule.MEDIA_RULE) return;
        const media = rule.conditionText || rule.media.mediaText;
        if (!media.includes('print')) return;

        // Found a @media print block
        Array.from(rule.cssRules).forEach(innerRule => {
          if (innerRule.type !== CSSRule.STYLE_RULE) return;
          const style = innerRule.style;
          const selector = innerRule.selectorText;

          let matchesConsent = false;
          try {
            document.querySelectorAll(selector).forEach(el => {
              const text = (el.textContent || '').toLowerCase();
              if (CONSENT_KEYWORDS.some(k => text.includes(k))) matchesConsent = true;
            });
          } catch {}
          if (!matchesConsent) return;

          // Check for hiding techniques
          if (style.display === 'none') {
            findings.push({ id: 'SA-CSS-PM-001', severity: 'HIGH', selector,
              desc: 'display:none on consent element in @media print — consent hidden from printed records' });
          }
          if (style.color) {
            const c = style.color.toLowerCase();
            if (c.includes('white') || c === '#fff' || c === '#ffffff'
                || c === 'rgb(255, 255, 255)') {
              findings.push({ id: 'SA-CSS-PM-002', severity: 'HIGH', selector,
                desc: 'color:white on consent element in @media print — invisible on white paper' });
            }
          }
          if (style.height === '0' || style.maxHeight === '0'
              || (style.overflow === 'hidden' && style.height === '0px')) {
            findings.push({ id: 'SA-CSS-PM-003', severity: 'HIGH', selector,
              desc: 'height:0 + overflow:hidden on consent container in @media print — consent collapsed in print layout' });
          }
          if (style.visibility === 'hidden' || style.opacity === '0') {
            findings.push({ id: 'SA-CSS-PM-001', severity: 'HIGH', selector,
              desc: 'visibility:hidden or opacity:0 on consent element in @media print' });
          }
        });
      });
    } catch {}
  });

  return findings;
}

SkillAudit findings for SA-CSS-PM