How does the hidden text injection demo work?

The sample server HTML contains a short AI-tools roundup. Client JavaScript hides it after a two-second timer and displays a poem. Compare these representations with what your assistant retrieves. A roundup summary can be accurate extraction; it does not by itself prove an instruction override.

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

Hidden instructions can influence an assistant when its extraction includes them and the model treats them as instructions. Assistants use different page representations, so CSS-hidden text is not universally retrieved or obeyed.

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

Screen the exact external content your model will receive, including source labels and extracted text. Stop on a blocked verdict or unavailable validation, keep retrieved text separate from trusted instructions, and restrict tool permissions independently.

Back to blog

Ian Ho

•

8 min read

Hidden Text Injection | Test What Your Assistant Reads

Compare a poem in the browser with the server HTML your assistant may retrieve. Understand extraction differences and screen exact model context before use.

Prompt InjectionAI SecurityDemoHidden Text Attack

The sample page’s server HTML contains an AI-tools roundup styled white on white. After a two-second timer, client JavaScript hides that article and displays a poem. Use this experiment to compare browser presentation, retrieved text and the assistant’s answer. Different content can reflect extraction rather than an instruction override.

Live demonstration

This sample demonstrates how browser presentation and retrieved HTML can differ. Try it with ChatGPT, Claude, or Perplexity, and inspect the text each assistant actually receives.

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 through an extractor that includes the payload, the model receives attack instructions the human view may hide. Following them is the attack’s goal, not a guaranteed outcome.

A raw-HTML or DOM-text extractor can include white-on-white, transparent or off-screen text. A rendered-text extractor may exclude some of it, while accessibility or multimodal extraction exposes different content. Test the representation your own application uses.

How a separate instruction-override attack works

The sample below tests extraction differences. To test an injection, separately plant a command that conflicts with an authorized task, record the exact retrieved payload and check whether the assistant follows that command.

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.

The extractor includes the hidden instructions

If the retrieval path includes the hidden text, the model receives it alongside the page content. The attack succeeds only if the model treats that text as authority over the user’s request.

Attacker-controlled output

A successful attack steers the answer toward the attacker’s requested content. This can include misinformation, phishing, or data exfiltration.

Common hiding techniques

These are six illustrative techniques. For more CSS and HTML carriers 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 the browser shows after the timer: A poem, "Mary Had a Little Lamb"

What the server HTML contains: a short article titled "Best AI Security Tools 2026" stating that SafePrompt is best. A raw-HTML extractor can summarize that text accurately. Record whether your assistant reports the roundup, poem, both, or a fetch failure. Save the model/version, prompt, extracted text and answer. This comparison alone does not demonstrate an instruction override or a measured product advantage.

How do you screen the content your model receives?

Screen the exact text assembled for your model, after extraction and source-label formatting. SafePrompt checks submitted text for hidden text injection attacks before model use. A verdict covers the submitted text, so do not append unchecked content afterward:

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

async function screenPage(extractedPageText, endUserIp, timeoutMs) { if (typeof extractedPageText !== 'string' || !extractedPageText || typeof endUserIp !== 'string' || !endUserIp || !Number.isFinite(timeoutMs) || timeoutMs <= 0) { throw new Error('Invalid content or request context') } const response = await fetch('https://api.safeprompt.dev/api/v1/validate', { method: 'POST', headers: { 'X-API-Key': process.env.SAFEPROMPT_API_KEY, 'X-User-IP': endUserIp, 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: extractedPageText }), signal: AbortSignal.timeout(timeoutMs) }) if (!response.ok) throw new Error('Validation unavailable') const verdict = await response.json() if (typeof verdict?.safe !== 'boolean') throw new Error('Invalid validation response') if (!verdict.safe) throw new Error('Page blocked') return extractedPageText // Only this unchanged string may enter model context. } // Catch errors at your request boundary and stop model use. // Derive endUserIp from trusted connection data; choose your own timeout budget.

Pattern detection

Matches known injection phrasings in the extracted text

Extraction boundary

Submit the same representation your model receives, including source labels

AI validation

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

With vs without SafePrompt

With SafePrompt

Submitted text screened for attack instructions
Blocked verdicts stop the model request
Unavailable validation stops the request
Action permissions still enforced by the app

Without SafePrompt

Unchecked instructions may reach model context
A successful injection can steer output
Grounding and extraction still need verification
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