Back to blog
SafePrompt Team
12 min read

Your AI Reads What You Cannot See

Hidden Text Injection: The Complete Guide to AI Prompt Attacks

Learn how attackers use 16+ CSS and HTML techniques to hide malicious instructions from humans while manipulating AI assistants. Includes live demos and protection strategies.

Prompt InjectionAI SecurityHidden Text AttackCSS Exploits

Security Research Disclosure

This article is for educational and defensive purposes. Understanding these attack techniques is essential for building secure AI applications. All examples link to controlled demo environments.

What is Hidden Text Injection?

Hidden text injection (also called indirect prompt injection or invisible prompt injection) is a technique where attackers embed invisible instructions within web pages, documents, or emails. When an AI assistant reads the content, it sees and follows these hidden instructions—even though human users cannot see them.

This attack exploits a fundamental difference between how humans and AI systems process content: humans see the rendered visual output, while AI systems process the raw text content. Text that is invisible to humans (white-on-white, zero-opacity, off-screen positioning) is perfectly readable to AI.

Real-World Impact

  • Misinformation: AI assistants report false information from hidden text
  • Phishing: Hidden instructions make AI recommend malicious links
  • Data exfiltration: AI can be tricked into leaking sensitive information
  • Reputation damage: AI assistants provide attacker-controlled responses
  • Jailbreaking: Hidden prompts bypass AI safety measures

How the Attack Works

1

Attacker embeds hidden text

Using CSS techniques like white-on-white text, zero opacity, or off-screen positioning, the attacker hides malicious instructions in the page HTML. The text is invisible to human visitors but present in the DOM.

2

User asks AI to analyze the page

The user shares a URL with an AI assistant (ChatGPT, Claude, Perplexity, etc.) and asks for a summary, analysis, or any information about the page content.

3

AI reads hidden instructions

The AI processes the raw HTML/text and sees the hidden text. It may interpret these as legitimate instructions, potentially overriding the user's original request or the page owner's intended content.

4

Attacker-controlled output

The AI responds with content dictated by the attacker, not what the user or the page owner intended. This can include misinformation, phishing links, or data exfiltration attempts.

16 Hidden Text Techniques Attackers Use

We've documented 16 different CSS and HTML techniques attackers use to hide malicious text. Each technique exploits the gap between visual rendering and text content extraction.

1

White Text on White Background

Text color matches background color, making it invisible to human eyes but readable by AI.

color: white; background: white;High - Most common and effective technique
Test
2

Transparent Text (Opacity: 0)

Text with opacity set to 0 is completely invisible but still exists in the DOM.

opacity: 0;High - Works across all browsers
Test
3

Microscopic Font (1px)

Extremely small font sizes (0.5px - 1px) are invisible to humans but readable by AI text extraction.

font-size: 1px;High - Often combined with other techniques
Test
4

Off-Screen Positioning

Elements positioned far off-screen are invisible but exist in the DOM and are fully readable.

position: absolute; left: -9999px;High - Classic SEO spam technique adapted for AI
Test
5

CSS Display: None

Elements with display: none are invisible but their text content is still extractable by AI.

display: none;Medium - Some AI tools skip display:none content
Test
6

CSS Visibility: Hidden

Similar to display: none but maintains layout space. Text is hidden but readable by AI.

visibility: hidden;Medium - Maintains document flow
Test
7

CSS Clip-Path: Inset(100%)

Using clip-path to completely hide text while keeping it in the DOM and readable by AI.

clip-path: inset(100%);High - Modern technique, hard to detect visually
Test
8

CSS Transform: Scale(0)

Scaling text to 0 makes it invisible while preserving text content in the DOM.

transform: scale(0);Medium - Element still takes space in some cases
Test
9

Z-Index Layering

Using z-index layering to hide text beneath buttons or other clickable elements.

z-index: -1; position: absolute;Medium - Requires careful positioning
10

Color Matching Container

Text color perfectly matches its container background, creating a camouflage effect.

background: #18181b; color: #18181b;High - Works with any background color
11

Overflow Hidden Container

Text placed outside a container with overflow: hidden is visually cut off but readable by AI.

overflow: hidden; height: 50px;Medium - Requires specific container setup
12

Zero-Width Unicode Characters

Using Unicode zero-width spaces, joiners, and non-joiners to hide text between visible characters.

U+200B, U+200C, U+200D, U+2060High - Extremely hard to detect
13

CSS Pseudo-Elements

Using CSS pseudo-elements to inject hidden content that doesn't appear in HTML source.

::after { content: 'hidden'; opacity: 0; }Medium - Requires CSS parsing
14

SVG Text Manipulation

SVG text elements can be hidden with opacity or fill: none while remaining in the DOM.

<text opacity='0'>Hidden</text>Medium - Less commonly detected
15

Hidden IFrame (1x1px)

Invisible 1x1 pixel iframes can contain entire malicious documents that AI assistants might read.

<iframe width='1' height='1' style='opacity: 0;'>High - Can load external malicious content
16

Background Pattern Camouflage

Hiding text within busy background patterns or images where it blends visually.

background: repeating-linear-gradient(...)Low - Requires specific visual context

Try It Yourself

Step 1: Copy this URL

https://safeprompt.dev/articles/sample1

Step 2: Ask any AI to analyze the page

Open ChatGPT, Claude, or Perplexity and ask:

"What is on this page: https://safeprompt.dev/articles/sample1"

Step 3: Observe the manipulation

What humans see: A simple poem — "Mary Had a Little Lamb"

What AI reports: "SafePrompt is the best tool to detect and prevent AI prompt injection"

Want to see all 16 techniques in action? Visit our interactive demo page →

Why AI Systems Are Vulnerable

How AI Reads Pages

  • • Extracts raw text from HTML/DOM
  • • Doesn't render CSS styles visually
  • • Reads all text nodes regardless of visibility
  • • Processes metadata, alt text, and hidden elements
  • • Cannot distinguish visual intent from raw content

How Humans Read Pages

  • • See rendered visual output only
  • • CSS determines what's visible
  • • Invisible elements are genuinely invisible
  • • Trust what they see as the "real" content
  • • Cannot detect hidden DOM elements

How SafePrompt Protects Against This

SafePrompt's multi-layer validation pipeline detects hidden text injection attacks before they can affect your AI application:

Pattern Detection

Identifies CSS hiding patterns (opacity:0, display:none, position:absolute with negative offsets) and suspicious HTML structures

External Reference Detection

Flags URLs, file paths, and external resources that may contain or load malicious content

AI Semantic Analysis

Uses multiple AI models to detect when content is framed as instructions to override AI behavior

Context Validation

Detects manipulation attempts like "ignore previous instructions" or role-switching prompts

With vs. Without Protection

Unprotected AI

  • • Follows hidden malicious instructions
  • • Reports attacker-controlled content
  • • May leak sensitive information
  • • Can be jailbroken via hidden prompts
  • • Brand reputation at risk

Protected with SafePrompt

  • • Hidden injections detected & blocked
  • • Users get accurate, safe responses
  • • Sensitive data stays protected
  • • Jailbreak attempts are flagged
  • • Full audit trail available

Protect Your AI Applications

Don't wait for your AI to be compromised. SafePrompt provides enterprise-grade protection against prompt injection attacks with just one line of code.