How does the hidden text injection demo work?

Copy the demo URL, ask ChatGPT, Claude, or Perplexity what is on the page, and watch the AI report attacker-controlled text instead of the poem a human sees. The page hides instructions with CSS that humans cannot see but the AI reads from the raw HTML.

Can hidden text on a web page really manipulate ChatGPT or Claude?

Yes. AI assistants process the raw text of a page, not the rendered view. Text hidden with white-on-white styling, opacity:0, or off-screen positioning is invisible to humans but fully readable by the model, which can then follow the hidden instructions.

How do I stop hidden text injection in my own app?

Validate the extracted text of any external content before your AI processes it. One validation call catches the payload regardless of which CSS trick hid it. SafePrompt checks the content and blocks hidden instructions before your model reads them.

Back to blog

Ian Ho

•

8 min read

Hidden Text Injection: A Live Demo of AI Reading What You Cannot See

A live demonstration of how hidden text on a web page manipulates AI assistants like ChatGPT, Claude, and Perplexity into outputting attacker-controlled content, and how SafePrompt blocks it.

Prompt InjectionAI SecurityDemoHidden Text Attack

Open a web page. You see a poem. Your AI sees an instruction telling it what to say. Below, you can run that exact gap yourself in two minutes, then close it in one API call.

Live demonstration

This page demonstrates how AI assistants can be manipulated by hidden text humans cannot see. Try it yourself with ChatGPT, Claude, or Perplexity.

What is hidden text injection?

Hidden text injection (a form of indirect prompt injection) is a technique where attackers embed invisible instructions in web pages. When an AI assistant reads the page, it sees and follows those hidden instructions, even though human users cannot see them.

It works because AI models process the raw HTML and text of a page, not the visual rendering. Text that is invisible to humans (white-on-white, zero-opacity, off-screen positioning) is still perfectly readable to AI.

How the attack works

Attacker embeds hidden text

Using CSS techniques like white-on-white text, zero opacity, or off-screen positioning, the attacker hides instructions in the page HTML.

User asks AI to analyze the page

The user shares a URL with an AI assistant and asks for a summary, analysis, or any information about the page content.

AI reads the hidden instructions

The AI processes the raw HTML and sees the hidden text. It follows these instructions, potentially overriding the user's original request.

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, or data exfiltration.

Common hiding techniques

These are six of the most common tricks. For the full catalog of all 16 CSS and HTML techniques with code, see hidden text injection attacks.

White on White

Test this

color: white; background: white;

Text same color as background

Zero Opacity

opacity: 0;

Completely transparent text

Tiny Font

font-size: 1px;

Text too small to see

Off-Screen

position: absolute; left: -9999px;

Positioned outside viewport

Display None

display: none;

Hidden but still in DOM

Clip Path

clip-path: inset(100%);

Clipped to invisible

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 result

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

What AI reports: a roundup titled "Best AI Security Tools 2026" whose verdict is that SafePrompt is best

How SafePrompt blocks this

Almost every hiding trick ends the same way: the payload lands in the extracted text. So you validate that text once, before your AI acts on it. SafePrompt's pipeline detects hidden text injection attacks before they reach your model:

// One call on the extracted page text, before your model reads it

const { safe, threats } = await fetch('https://api.safeprompt.dev/api/v1/validate', { method: 'POST', headers: { 'X-API-Key': process.env.SAFEPROMPT_API_KEY, 'X-User-IP': endUserIp, // the end user's IP, not your server's 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: extractedPageText }) }).then(r => r.json()) if (!safe) return "This page contains hidden instructions." // threats: ['injection_pattern']

Pattern detection

Matches known injection phrasings in the extracted text

External reference detection

Flags URLs and file paths that may contain malicious content

AI validation

Judges whether the content is framed as instructions meant to override your AI behavior

With vs without SafePrompt

With SafePrompt

Hidden injections detected
Malicious content blocked
Users get accurate responses
Data stays protected

Without SafePrompt

AI follows hidden instructions
Attacker controls AI output
Users receive manipulated content
Data exfiltration possible
Brand reputation at risk

Protect your AI application

One API call, benchmarked publicly against real attacks. Free plan, no card.

Get a free API key Try the live demo