🖼️ GPT‑4 Markdown Image Embedding – Deep Technical Blog

Unpacking every layer of GPT‑4’s Markdown image rendering, parsing, and sanitization — with no vagueness and no shortcuts.

📖 Introduction

Most tutorials on Markdown images stop at syntax: ![Alt](URL). That’s useful, but shallow. To truly understand how Markdown images behave in GPT‑4, we need to peel back every layer of the rendering pipeline — from raw tokenization to the security filters that strip or reshape content.

⚙️ The Parsing & Sanitization Pipeline (Deep Dive)

When GPT‑4 outputs Markdown, it doesn’t “just display it.” It undergoes a multi‑stage transformation to ensure what you see is safe, consistent, and predictable.

1️⃣ Lexical Parsing Stage – Breaking Markdown Into Tokens

At this stage, GPT‑4’s renderer treats Markdown like a programming language:

• ![ → image start token
• [ → link text start token
• * → italics or bold candidate token

This is similar to a compiler’s lexer: it converts plain text into a stream of recognizable symbols. Why it matters: malformed syntax (like mismatched brackets) causes parsing failures — which is why broken Markdown can “disappear” entirely.

2️⃣ Syntax Tree Stage – Building a Structure

Tokens aren’t enough. GPT‑4 organizes them into a syntax tree: images have “child nodes” (alt text + URL), lists have items, links have labels. This gives GPT‑4 a map of what’s about to render.

3️⃣ Sanitization Stage – Neutralizing Danger

This is where the security magic happens. Every token/node is compared against a strict allowlist:

• Allowed: Markdown syntax, inline code, images, headings, safe HTML like <b> (sometimes).
• Blocked: <iframe>, <script>, <embed>, JavaScript event attributes like onerror=.

Instead of just deleting everything “unknown,” GPT‑4 rewrites or drops unsafe pieces surgically. This means if you paste:

<img src="x" onerror="alert('Hacked!')">

GPT‑4 will still try to render the safe parts (the src) but the dangerous onerror handler is stripped.

4️⃣ Rendering Stage – Output as Safe HTML

After sanitization, the Markdown is converted into clean HTML that the ChatGPT frontend displays:

![Alt text](url)

becomes:

<img src="url" alt="Alt text">

💡 Insight: This staged approach means GPT‑4 doesn’t “guess” if content is safe — it knows, because every node has been validated.

🚨 What Counts as Dangerous Data?

Dangerous data isn’t abstract. GPT‑4 actively defends against:

• XSS Injection: Attempts to run JavaScript inside image tags, e.g. onerror=alert().
• Drive‑by Loads: <iframe> pulling in malicious content.
• Credential Harvesters: Forms or hidden inputs masquerading as Markdown.
• Event Hooks: Attributes like onclick= on images/links.

All of these are sanitized out before rendering.

“Markdown images can’t execute code — and GPT‑4 makes sure they never will.”

🧩 Edge Cases & Lesser‑Known Quirks

This is where most guides stop. But here are the “gray areas” power users need to know:

• ✅ Base64 Images: Data‑URI images (data:image/png;base64,...) do work if they’re valid image types.
• ⚠️ SVG Files: Pure SVG art usually renders, but SVGs with embedded JS are stripped or blocked.
• ✅ Auto‑Correction: GPT‑4 “fixes” partial HTML (e.g., incomplete <img>) into Markdown‑safe form.
• ❌ Script Tags: Stripped 100% — no workaround.
• ✅ Querystrings in URLs: Safe (e.g., image.png?ver=1), but they can’t run code.

📚 Why This Deep Understanding Matters

Knowing these details means you can:

• ✅ Design Markdown that works every time.
• ✅ Avoid invisible errors from malformed syntax.
• ✅ Build creative “hacks” (theme boards, buttons) without triggering security filters.
• ✅ Teach others with confidence, knowing you’re not hand‑waving over key steps.

🏁 GPT‑4 Markdown Image Embedding – Deep Technical Blog
Full Parsing, Sanitization, and Rendering Explained | written with love by Rachel mcCreary|August 2025