HTML Entity Encoding

Implementation Patterns / Reference Guide

Pattern 1: Python html.escape() — Comprehensive HTML Entity Encoding with Named Entities

Python's stdlib html.escape() provides built-in HTML entity encoding for the five most common special characters. This is the foundation of all HTML output safety in Python-based web applications, including Flask, Django (without template autoescape), and custom WSGI/ASGI servers.

"""Comprehensive HTML entity encoding using Python's stdlib html.escape().

Covers the three structural characters (< > &), two quote characters (" '),
and demonstrates why manual character replacement is fundamentally unreliable
compared to using a battle-tested library function that handles edge cases
like nested entities, partial entities, and mixed encodings.
"""

from html import escape as html_escape


# ❌ BAD — manual character replacement chain is vulnerable and unmaintainable
def bad_html_escape(value: str) -> str:
    """Naive HTML escaping using sequential string replacements.
    
    This approach has multiple failure modes that bypass XSS prevention:
    
    1. Ampersand order matters: &amp; must be encoded BEFORE any other character,
       because replacing < with &lt; first would turn a legitimate & into &amp;amp;.
       Manual chains rarely get the order right.
    
    2. Partial entity bypass: A payload like &lt;script&gt; is already a valid
       HTML entity sequence that renders as <script>. This manual encoder does
       not decode existing entities before re-encoding, so double-encoded content
       passes through unmodified.
    
    3. Quote characters are often missed: Without quote=True, single and double
       quotes remain unencoded, allowing attribute context breakout attacks like:
       "><svg/onload=alert(1)>.
    
    Args:
        value: Raw string from user input or database to be rendered in HTML.
        
    Returns:
        Partially escaped string that is still vulnerable to multiple XSS vectors.
    """
    # Order matters here, but this is wrong — & must be first!
    # And quotes are not escaped at all (the most common XSS vector)
    value = value.replace("<", "&lt;")
    value = value.replace(">", "&gt;")
    # Missing: & → &amp;  (order violation above)
    # Missing: " → &quot; or &#34;
    # Missing: ' → &#x27; or &#39;
    return value


# ✅ GOOD — stdlib html.escape() with quote=True covers all five critical characters
def escape_html_text(value: str) -> str:
    """Encode a string for safe rendering in HTML body text content.
    
    Uses Python's html.escape() which correctly handles the ordering of entity
    replacement internally (ampersands first, then other characters). The quote=True
    parameter extends encoding to cover " and ' — critical for preventing attribute
    context breakout when values may appear inside quoted attributes.
    
    Characters encoded by html.escape(value, quote=True):
    - <  → &lt;      prevents tag injection (structural)
    - >  → &gt;      completes lt; pair (structural)
    - &  → &amp;     prevents entity injection (structural)
    - "  → &quot;    prevents double-quote attribute breakout
    - '  → &#39;     prevents single-quote attribute breakout
    
    Args:
        value: Raw string from user input, database, or third-party API.
            This is data that originated outside your application's control.
            Must be a string — integers, None, and other types must be
            converted before passing to this function.
            
    Returns:
        HTML-escaped string where all five critical characters are replaced
        with their entity equivalents. The browser renders these as the
        literal characters, not as structural markup.
        
    Raises:
        TypeError: If value is not a string type.
    """
    if not isinstance(value, str):
        raise TypeError(
            f"Expected str for HTML escaping, got {type(value).__name__}. "
            f"All data must be converted to string before rendering."
        )
    
    # quote=True adds " and ' encoding — essential for attribute safety
    return html_escape(value, quote=True)


# ✅ GOOD — attribute-specific encoding with additional context characters
def escape_html_attribute(value: str) -> str:
    """Encode a string for safe use inside HTML attribute values.
    
    Attribute contexts require stricter encoding than body text because
    unescaped quotes can break the attribute open and inject new attributes,
    manipulate element structure, or execute event handlers on existing elements.
    
    This function extends body-text escaping with single-quote and forward-slash
    encoding to prevent </script> bypass attacks in some browser implementations.
    
    Args:
        value: String that will appear as an attribute value, e.g.,
            <div data-value="..."> where ... is the escaped result.
            
    Returns:
        Escaped string safe for double-quoted and single-quoted HTML attributes.
        
    Raises:
        TypeError: If value is not a string type.
    """
    if not isinstance(value, str):
        raise TypeError(
            f"Expected str for HTML attribute escaping, got {type(value).__name__}"
        )
    
    # Start with body-text encoding (handles < > & " ')
    escaped = html_escape(value, quote=True)
    
    # Additional: escape forward slash to prevent </script> bypass in legacy browsers
    # This is a defense-in-depth measure; modern browsers do not require it.
    escaped = escaped.replace("/", "&#x2F;")
    
    return escaped


# Comprehensive named entity reference table for HTML5
NAMED_ENTITIES: dict[str, str] = {
    "&": "&amp;",     # ampersand — MUST be encoded first in any manual implementation
    "<": "&lt;",      # less-than sign — prevents tag injection
    ">": "&gt;",      # greater-than sign — complements lt; to prevent partial tags
    '"': "&quot;",    # double quote — prevents attribute context breakout
    "'": "&#39;",     # single quote / apostrophe — prevents single-quote attribute breakout
    # Additional common HTML5 named entities (for reference, not typically needed
    # with standard html.escape() which covers the five critical characters above)
    "\u00a0": "&nbsp;",   # non-breaking space
    "\u00a9": "&copy;",   # copyright symbol
    "\u00ae": "&reg;",    # registered trademark
    "\u2122": "&trade;",  # trademark symbol
    "\u2018": "&lsquo;",  # left single quotation mark
    "\u2019": "&rsquo;",  # right single quotation mark
    "\u201c": "&ldquo;",  # left double quotation mark
    "\u201d": "&rdquo;",  # right double quotation mark
    "\u2014": "&mdash;",  # em dash
    "\u2013": "&ndash;",  # en dash
    "\u00d7": "&times;",  # multiplication sign
    "\u00f7": "&divide;", # division sign
    "\u00a2": "&cent;",   # cent sign
    "\u00a3": "&pound;",  # pound sterling sign
}


# Test suite demonstrating BAD vs GOOD escaping behavior
if __name__ == "__main__":
    test_payloads = [
        ("<script>alert('XSS')</script>", "Basic script tag injection"),
        ('"><img src=x "Attribute break + event handler XSS"),
        ("O'Brien & Sons", "Legitimate ampersand and apostrophe in a business name"),
        ('<a href="javascript:alert(1)">Click me</a>', "JavaScript protocol URI injection"),
        ("&lt;script&gt;", "Pre-existing entity — should not double-encode with proper library"),
        ('value="test" "Event handler in attribute context"),
        ("<div title='It's & great'>", "Mixed quotes, ampersand, and backslash"),
    ]

    print("=" * 70)
    print("HTML Entity Encoding: BAD vs GOOD Comparison")
    print("=" * 70)

    for payload, description in test_payloads:
        bad_result = bad_html_escape(payload)
        good_body = escape_html_text(payload)
        good_attr = escape_html_attribute(payload)

        print(f"\n{description}")
        print(f"  Input:        {payload!r}")
        print(f"  BAD escape:   {bad_result!r}")
        print(f"  GOOD (body):  {good_body!r}")
        print(f"  GOOD (attr):  {good_attr!r}")

        # Highlight differences
        if bad_result != good_body:
            print("  ⚠ BAD output differs from GOOD — vulnerability detected")

Security properties:

• html.escape() handles the internal ordering of character replacement correctly (ampersands are replaced first, preventing double-encoding issues) — manual chains rarely get this right.
• The quote=True parameter is critical: without it, quotes remain unencoded and attackers can break out of attribute values with payloads like "><script>.
• Named entities (&, <, >, ") are more readable in source code and universally supported by all HTML5-compliant browsers. Use numeric character references (&, &) only when encoding characters beyond the standard set or for maximum compatibility with non-HTML consumers like email clients and XML processors.

Pattern 2: JavaScript DOM Text Content vs innerHTML — Safe Text Insertion

JavaScript provides multiple APIs for inserting content into the DOM, but they have fundamentally different security properties. textContent and createTextNode() treat content as pure text (safe), while innerHTML interprets content as HTML markup (unsafe with untrusted data).

/**
 * JavaScript DOM text insertion — safe vs unsafe patterns.
 *
 * This module demonstrates why innerHTML must never receive untrusted user data,
 * and provides a reference encoder for situations where entity encoding at the
 * string level is required (e.g., before passing strings to a legacy API or
 * embedding in non-DOM contexts like JSON responses).
 */

// ❌ BAD — innerHTML with user data is an XSS vector
function badRenderUserProfile(username, bio) {
    // User-supplied values injected as HTML — browser parses < and > as markup
    document.getElementById("username").innerHTML = username;
    document.getElementById("bio").innerHTML = bio;

    // An attacker who supplies: "><img src=x
    // breaks out of the previous element and injects an executable image tag.
    // This is one of the most common XSS patterns documented by OWASP.
}

// ✅ GOOD — textContent treats all content as inert text data
function safeRenderUserProfile(username, bio) {
    // textContent never interprets the string as markup — < and > are rendered
    // literally as the characters < and >, not as structural elements.
    document.getElementById("username").textContent = username;
    document.getElementById("bio").textContent = bio;

    // Even if user supplies: <script>alert('XSS')</script>
    // The browser displays the literal string text — no script execution occurs.
}

// ✅ GOOD — createTextNode() is the lowest-level safe insertion method
function safeCreateTextNode(parent, content) {
    const node = document.createTextNode(content);
    parent.appendChild(node);
    return node;
}

// Reference encoder: Convert individual characters to HTML entity references
// Useful for situations where you cannot use textContent (e.g., string manipulation
// before DOM insertion, or encoding strings for JSON API responses).
function encodeToHTMLentities(value) {
    /**
     * Encode special characters to HTML entity references.
     * This is a reference implementation — in production, prefer using
     * your framework's built-in encoder or textContent for DOM operations.
     *
     * @param {string} value - The string to encode.
     * @returns {string} String with & < > " ' replaced by entity references.
     */
    if (typeof value !== "string") {
        throw new TypeError(
            `Expected string for HTML encoding, got ${typeof value}`
        );
    }

    return value
        .replace(/&/g, "&amp;")      // Must be FIRST — order matters!
        .replace(/</g, "&lt;")       // Prevents tag injection
        .replace(/>/g, "&gt;")       // Completes the lt;/gt; pair
        .replace(/"/g, "&quot;")     // Prevents double-quote attribute breakout
        .replace(/'/g, "&#39;");     // Prevents single-quote attribute breakout
}

// Demonstrate the difference between textContent and innerHTML
function demonstrateDOMSafety() {
    const container = document.getElementById("demo-container");
    if (!container) return;

    // Clear any existing content
    container.innerHTML = "";

    const maliciousInput = '<img src="x"

    // SAFE: textContent renders the string as literal text
    const safeDiv = document.createElement("div");
    safeDiv.textContent = `textContent output: ${maliciousInput}`;
    container.appendChild(safeDiv);

    // UNSAFE: innerHTML would attempt to parse the string as HTML,
    // executing the onerror handler. Never do this with user data.
    const unsafeDiv = document.createElement("div");
    // Do NOT run: unsafeDiv.innerHTML = `innerHTML output: ${maliciousInput}`;
    // Uncommenting the line above would execute alert(1).

    const warning = document.createElement("div");
    warning.style.color = "red";
    warning.textContent =
        '⚠ innerHTML with user data is disabled for demonstration purposes.';
    container.appendChild(warning);

    console.log("Safe output (textContent):", safeDiv.textContent);
    // Output: textContent output: <img src="x"
    // The browser shows the literal characters, no image tag rendered.
}

// Export for module usage
if (typeof module !== "undefined" && module.exports) {
    module.exports = { safeRenderUserProfile, safeCreateTextNode, encodeToHTMLentities };
}

Key security properties:

• textContent and createTextNode() are always safe because they treat the entire string as inert character data. The browser never attempts to parse any part of the value as markup or script.
• innerHTML parses its content as HTML, which means any <, >, &, ", ' in the input is interpreted according to HTML parsing rules. Untrusted input can inject tags, attributes, and event handlers.
• The encodeToHTMLentities() reference function demonstrates correct ordering: & must be replaced FIRST before any other character, because replacing < with < first would turn a subsequent & into &, breaking the encoding. This ordering bug is extremely common in manual implementations.
• For React applications using JSX, text interpolation {userInput} automatically escapes content (equivalent to textContent). Only dangerouslySetInnerHTML bypasses this safety net and requires explicit sanitization with DOMPurify or similar.

Pattern 3: React dangerouslySetInnerHTML — Entity Encoding Before Dangerous JSX Usage

React's JSX engine provides automatic XSS protection for all text content through implicit HTML escaping. However, the dangeredlySetInnerHTML prop exists as an escape hatch for rendering pre-sanitized HTML fragments. This pattern shows how to safely bridge untrusted HTML content and React's rendering model.

/**
 * React dangerouslySetInnerHTML — safe patterns with DOMPurify integration.
 *
 * Demonstrates why JSX auto-escaping is insufficient for raw HTML content,
 * when dangerouslySetInnerHTML is appropriate, and how DOMPurify sanitizes
 * untrusted HTML before it reaches the React DOM renderer.
 */

import DOMPurify from "dompurify";

// ❌ BAD — rendering untrusted HTML with dangerouslySetInnerHTML
function BadUserComment({ commentBody }) {
    // This passes raw user input directly into the DOM as HTML.
    // An attacker who submits: <img src=x
    // will have that script execute in every user's browser session.
    return (
        <div className="comment-body" dangerouslySetInnerHTML={{ __html: commentBody }} />
    );
}

// ❌ BAD — attempting manual sanitization before dangerouslySetInnerHTML
function BadManualSanitize({ commentBody }) {
    // This regex-based approach is intentionally incomplete and demonstrates
    // why manual HTML sanitization should never be used in production.
    const sanitized = commentBody
        .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")  // Misses <SCR I PT>
        .replace(/on\w+="[^"]*"/gi, "");  // Misses (single quotes)

    return (
        <div dangerouslySetInnerHTML={{ __html: sanitized }} />
    );
}

// ✅ GOOD — DOMPurify sanitization before dangerouslySetInnerHTML
function SafeUserComment({ commentBody, allowedTags = ["b", "i", "em", "strong", "a"] }) {
    /**
     * Sanitize user-supplied HTML using DOMPurify and render safely in React.
     *
     * DOMPurify removes all dangerous tags (script, object, embed, iframe),
     * event handler attributes (onclick, onload, onerror), javascript: URIs,
     * and data: URI schemes while preserving a configurable set of safe tags.
     *
     * @param {string} commentBody - Raw HTML from user input or database.
     * @param {string[]} allowedTags - Tags permitted in the output (default: inline formatting + links).
     * @returns {{ __html: string }} Object compatible with dangerouslySetInnerHTML.
     */
    const cleanHTML = DOMPurify.sanitize(commentBody, {
        ALLOWED_TAGS: allowedTags,
        ALLOWED_ATTR: ["href", "target", "rel"],  // Only allow safe link attributes
        RETURN_DOM: false,                         // Return sanitized string
        ADD_ATTR: [],                              // Do not add any extra attributes
    });

    return (
        <div className="comment-body" dangerouslySetInnerHTML={{ __html: cleanHTML }} />
    );
}

// ✅ GOOD — component with full sanitization pipeline and fallback
function SafeRichTextContent({ htmlFragment, onSanitizationError }) {
    const [renderableHTML, setRenderableHTML] = useState(null);
    const [sanitizationFailed, setSanitizationFailed] = useState(false);

    useEffect(() => {
        try {
            if (!htmlFragment || typeof htmlFragment !== "string") {
                setRenderableHTML("");
                return;
            }

            // Sanitize with strict configuration for rich text content
            const sanitized = DOMPurify.sanitize(htmlFragment, {
                ALLOWED_TAGS: [
                    "p", "br", "h1", "h2", "h3", "h4", "h5", "h6",
                    "ul", "ol", "li", "blockquote",
                    "a", "img",
                    "strong", "em", "u", "s", "mark",
                ],
                ALLOWED_ATTR: ["href", "src", "alt", "title", "target", "rel"],
                ALLOW_DATA_ATTR: false,       // Do not allow data-* attributes
                ALLOW_UNKNOWN_PROTOCOLS: false, // Block javascript:, data:, vbscript: URIs
            });

            if (sanitized.length === 0 && htmlFragment.trim().length > 0) {
                setSanitizationFailed(true);
                setRenderableHTML("<em>Content was removed for security reasons.</em>");
            } else {
                setRenderableHTML(sanitized);
            }
        } catch (error) {
            console.error("DOMPurify sanitization failed:", error);
            setSanitizationFailed(true);
            setRenderableHTML(
                '<p class="error">Unable to display content. Please contact support.</p>'
            );
            if (typeof "function") {
                onSanitizationError(error, htmlFragment.length);
            }
        }
    }, [htmlFragment, onSanitizationError]);

    return (
        <div className="rich-text-content">
            {sanitizationFailed && (
                <div className="sanitization-warning" role="alert">
                    Some content was removed for security reasons.
                </div>
            )}
            {renderableHTML !== null && (
                <div dangerouslySetInnerHTML={{ __html: renderableHTML }} />
            )}
        </div>
    );
}

// Usage examples with adversarial input tests
function DemoComponent() {
    const testInputs = [
        '<p>Hello <b>world</b></p>',  // Safe — should pass through intact
        '<script>alert("XSS")</script>', // Dangerous — script tag stripped by DOMPurify
        '<a href="javascript:alert(1)">Click</a>', // Dangerous — javascript: URI removed
        '<img src=x   // Dangerous — event handler removed
        '<div style="background:url(javascript:alert(1))">', // Dangerous — CSS injection blocked
    ];

    return (
        <div className="demo">
            <h2>Safe User Content Rendering</h2>
            {testInputs.map((input, index) => (
                <div key={index} style={{ border: "1px solid #ccc", padding: "8px", margin: "8px 0" }}>
                    <strong>Input:</strong> {input}
                    <hr />
                    <SafeUserComment commentBody={input} />
                    <hr />
                </div>
            ))}
        </div>
    );
}

export { SafeUserComment, SafeRichTextContent };

Key security properties:

• DOMPurify is the industry-standard HTML sanitizer for JavaScript applications. It removes dangerous elements (<script>, <iframe>, <object>), event handler attributes (onclick, onerror), and unsafe URI schemes (javascript:, data:, vbscript:) while preserving a configurable set of safe tags.
• React's JSX auto-escaping ({userInput}) is sufficient for text content but does not apply when rendering raw HTML fragments via dangerouslySetInnerHTML. Always pair this prop with DOMPurify sanitization.
• Never attempt manual HTML sanitization with regex patterns. Regex-based approaches are bypassable through encoding tricks, whitespace manipulation, and case variation (e.g., <ScRiPt>, < script >). Only use well-tested, audited sanitizer libraries.

Pattern 4: Template Engine Escaping Gotchas (Jinja2, Django, Vue, Handlebars)

Template engines provide automatic HTML escaping for interpolated values, but this protection has specific boundaries. Understanding when autoescaping applies and when it is explicitly disabled prevents accidental XSS in template-rendered applications.

"""Template engine escaping behavior across Python and JavaScript ecosystems.

Demonstrates the differences between automatic escaping, explicit encoding
filters, and context-aware output handling in popular template engines.
Each engine has different defaults, filter names, and escaping boundaries.
"""

# =============================================================================
# Pattern 4a: Jinja2 (Python) — Explicit Encoding Filters
# =============================================================================

from jinja2 import Environment, FileSystemLoader, select_autoescape

def setup_jinja_environment():
    """Configure Jinja2 with autoescape enabled for HTML templates."""
    env = Environment(
        loader=FileSystemLoader("templates"),
        autoescape=select_autoescape(["html", "htm", "xml"]),  # Auto-escape HTML files
    )
    return env


def jinja2_autoescaped_template(env):
    """Jinja2 with autoescape=True handles escaping automatically for {{ }} interpolations.
    
    The template author does NOT need to call any escape function on {{ variable }} —
    Jinja2 applies html.escape() internally before rendering the value into HTML output.
    
    However, if you need to DISABLE autoescaping (e.g., rendering pre-sanitized HTML),
    use the |safe filter explicitly:
        {{ sanitized_html_content | safe }}
    
    WARNING: Using |safe with user-supplied content is an XSS vulnerability. Only
    pass pre-sanitized content to |safe, and document which values have been sanitized.
    """
    template_str = """\
<!DOCTYPE html>
<html>
<body>
    <!-- Auto-escaped: < > & " ' are all converted to entities -->
    <p>Hello, {{ username }}!</p>
    
    <!-- Also auto-escaped (same behavior as above) -->
    <div class="bio">{{ bio_text }}</div>
    
    <!-- NOT auto-escaped: this renders raw HTML. Use ONLY with pre-sanitized content. -->
    <div class="rich-content">{{ rich_content | safe }}</div>
</body>
</html>"""
    template = env.from_string(template_str)
    return template.render(
        username="<script>alert('XSS')</script>",  # Rendered safely: &lt;script&gt;...
        bio_text="O'Brien & Associates",            # Rendered safely: O&apos;Brien &amp; Associates
        rich_content='<em>Sanitized HTML content</em>',  # Rendered as-is — author responsibility!
    )


def jinja2_explicit_encoding_filter(env):
    """Use |e filter for explicit encoding when autoescape is disabled.
    
    The |e (escape) filter applies html.escape() explicitly, regardless of the
    template's autoescape setting. Use this when working with templates where
    autoescape has been intentionally disabled for performance or compatibility.
    """
    # Template with autoescape disabled — MUST use |e on all user-supplied values
    no_autoescape_env = Environment(
        loader=FileSystemLoader("templates"),
        autoescape=False,  # Autoescaping disabled!
    )
    
    template_str = """\
<!-- Without |e filter: < > & " ' are rendered as literal characters (XSS!) -->
<p>Hello, {{ username }}</p>

<!-- With |e filter: all special characters encoded to entities (safe) -->
<p>Hello, {{ username | e }}!</p>

<!-- For attributes specifically: use |attr or manually construct with quotes -->
<a href="/profile/{{ user_id | e }}" class="link">Profile</a>"""
    
    template = no_autoescape_env.from_string(template_str)
    return template.render(
        username="<img src=x  # With |e: safe (encoded to entities)
        user_id='"               # With |e: safe in href attribute
    )


# =============================================================================
# Pattern 4b: Django Templates — Built-in Autoescaping with |safe Override
# =============================================================================

"""Django template autoescaping behavior (Python).
    
Django templates enable HTML autoescaping by default since version 1.2. All
{{ variable }} interpolations in .html files are automatically escaped using
django.utils.html.escape(). The escaping applies to the five critical characters
(< > & " ') identically to Python's html.escape(value, quote=True).
    
The |safe filter (alias: |mark_safe) disables autoescaping for a specific value.
Use with extreme caution — only apply to content that has been pre-sanitized by
DOMPurify (for HTML), urlquote (for URLs), or an equivalent sanitizer.
"""

def django_autoescaped_example():
    """Django template rendering with automatic escaping."""
    from django.template import Template, Context
    
    # Django's built-in Template class applies autoescape to .html files by default
    template_str = """\
<!DOCTYPE html>
<html>
<body>
    <h1>{{ title }}</h1>          <!-- Auto-escaped: < > & " ' encoded -->
    <p>{{ description }}</p>      <!-- Auto-escaped -->
    
    <!-- |safe disables escaping — render ONLY pre-sanitized HTML -->
    {% if user_rich_content %}
        {{ user_rich_content|safe }}  <!-- ⚠ UNSAFE if content comes from users -->
    {% endif %}
    
    <!-- Django's autoescape block can control escaping scope -->
    {% autoescape off %}
        {{ raw_html }}  <!-- Escaping disabled within this block -->
    {% endautoescape %}
</body>
</html>"""
    
    template = Template(template_str)
    context = Context({
        "title": "<script>alert('XSS')</script>",   # Auto-escaped by Django
        "description": "O'Brien & Sons",            # Auto-escaped by Django
        "user_rich_content": "<b>Bold</b> text",     # Escaping disabled by |safe — trust required!
        "raw_html": "<p>This is raw HTML</p>",       # Escaping disabled by autoescape off block
    })
    return template.render(context)


# =============================================================================
# Pattern 4c: Vue.js Templates — Interpolation vs v-html
# =============================================================================

"""Vue.js escaping behavior (JavaScript/TypeScript).
    
Vue.js provides two distinct mechanisms for rendering dynamic content:
1. {{ expression }} or :prop="expression" — auto-escaped (safe by default)
2. v-html directive — renders raw HTML (unsafe without pre-sanitization)
    
This pattern demonstrates the critical difference between these two approaches.
"""

def vue_template_examples():
    """Vue.js template patterns showing safe vs unsafe content rendering."""
    return """\
<!-- SAFE: Mustache interpolation auto-escapes all special characters -->
<div id="app">
    <h1>{{ username }}</h1>              <!-- &lt;script&gt; rendered as literal text -->
    <p class="bio">{{ userBio }}</p>     <!-- All HTML entities encoded automatically -->
    <span :title="'Username: ' + username"></span>  <!-- Attribute binding — also auto-escaped -->
    
    <!-- UNSAFE: v-html renders raw HTML without any escaping -->
    <!-- Only use with pre-sanitized content (DOMPurify or equivalent) -->
    <div v-html="userSubmittedHtml" class="rich-content"></div>
    
    <!-- SAFE ALTERNATIVE to v-html when you need plain text rendering: -->
    <div :textContent="rawUserText"></div>  <!-- Vue 3.2+: native textContent binding -->
</div>

<!-- Example component demonstrating safe content handling -->
<template>
  <article class="comment">
    <!-- Auto-escaped: XSS payload renders as inert text -->
    <p class="author">{{ comment.author }}</p>
    
    <!-- v-html requires pre-sanitization — demonstrate with mock sanitization -->
    <div
      v-if="isSanitized"
      v-html="sanitizedContent"
      class="comment-body"
    ></div>
    
    <!-- Fallback: when content is not yet sanitized, show plain text -->
    <pre v-else class="comment-body">{{ comment.body }}</pre>
  </article>
</template>

<script setup>
import DOMPurify from 'dompurify';
import { computed } from 'vue';

const props = defineProps({
  comment: { type: Object, required: true },
});

// Sanitize user HTML content before rendering with v-html
const sanitizedContent = computed(() => {
  if (!props.comment.body) return '';
  return DOMPurify.sanitize(props.comment.body, {
    ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'a'],
    ALLOWED_ATTR: ['href', 'target'],
  });
});

// Flag to indicate sanitization status for UI feedback
const isSanitized = computed(() => props.comment.body.length > 0);
</script>"""


# =============================================================================
# Pattern 4d: Handlebars (JavaScript) — Triple Braces Disable Escaping
# =============================================================================

"""Handlebars template escaping behavior (JavaScript/Node.js).
    
Handlebars auto-escapes content in {{ expression }} by default (equivalent to
html.escape()). To render raw HTML, use triple braces {{{ expression }}} which
disable all escaping. This is a common XSS source when developers use triple
braces for convenience without sanitizing the input first.
"""

def handlebars_examples():
    """Handlebars template examples showing double vs triple brace behavior."""
    return """\
<!-- SAFE: Double braces auto-escape -->
<h1>{{ title }}</h1>
<p>{{ description }}</p>

<!-- UNSAFE: Triple braces disable all escaping -->
<!-- Only use with pre-sanitized HTML content -->
<div class="content">{{{ richHtmlContent }}}</div>

<!-- Handlebars partials also auto-escape their interpolations -->
{{> user-profile user}}

<!-- Helper function to sanitize before triple-brace rendering -->
<script>
// Register a helper that sanitizes HTML before rendering
Handlebars.registerHelper('safeHTML', function(htmlString) {
    if (typeof htmlString !== 'string') return '';
    // In browser: use DOMPurify
    if (typeof DOMPurify !== 'undefined') {
        return new Handlebars.SafeString(DOMPurify.sanitize(htmlString));
    }
    // In Node.js: use a server-side sanitizer like sanitize-html
    if (typeof sanitizeHtml === 'function') {
        return new Handlebars.SafeString(sanitizeHtml(htmlString, {
            allowedTags: ['p', 'br', 'strong', 'em', 'a', 'ul', 'ol', 'li'],
            allowedAttributes: { 'a': ['href', 'target'] },
        }));
    }
    // Fallback: double-encode (converts & to &amp; so entities don't render)
    return htmlString
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
});

// Usage: {{{ safeHTML userContent }}} — always safe with this helper
</script>"""


# =============================================================================
# Cross-Engine Comparison Summa

…(truncated)