Hardi

Posted on Oct 28

HTML Encoder/Decoder: Prevent XSS and Display User Content Safely

#webdev #programming #javascript #productivity

HTML encoding (entity encoding) is your first line of defense against XSS attacks and essential for displaying user-generated content safely. From preventing script injection to showing code examples, understanding HTML encoding is critical for secure web development. Let's master HTML entity encoding and build bulletproof applications.

Why HTML Encoding Matters

The XSS Problem

// The most dangerous security vulnerability in web development
const xssVulnerability = {
  scenario: 'Displaying user input without encoding',
  userInput: '<script>alert("XSS")</script>',

  vulnerable: {
    code: `<div>${userInput}</div>`,
    result: '<div><script>alert("XSS")</script></div>',
    outcome: 'Script executes! User account compromised!',
    severity: 'CRITICAL - Can steal cookies, sessions, data',
    impact: 'Account takeover, data theft, malware distribution'
  },

  secure: {
    code: `<div>${encodeHTML(userInput)}</div>`,
    result: '<div>&lt;script&gt;alert("XSS")&lt;/script&gt;</div>',
    outcome: 'Script displayed as text - safe!',
    severity: 'None - Attack neutralized'
  }
};

// Real-world XSS attacks prevented by HTML encoding:
const realAttacks = {
  storedXSS: {
    attack: 'User posts: <img src=x onerror="steal_cookies()">',
    without: 'Every page view executes attack',
    with: 'Displayed as harmless text'
  },

  reflectedXSS: {
    attack: 'URL: /search?q=<script>steal_data()</script>',
    without: 'Immediate script execution',
    with: 'Search term displayed safely'
  },

  domXSS: {
    attack: 'innerHTML = userInput with <script>',
    without: 'Script runs in user browser',
    with: 'Text only, no execution'
  }
};

console.log('HTML encoding: The XSS killswitch');

Real-World Impact

// 2024 XSS Statistics
const xssImpact = {
  ranking: '#2 on OWASP Top 10 vulnerabilities',
  prevalence: '~40% of web applications affected',

  realIncidents: [
    {
      company: 'Major social network',
      year: 2023,
      attack: 'Stored XSS in user profiles',
      impact: '50,000 accounts compromised',
      cost: '$2.5M in damages + reputation'
    },
    {
      company: 'E-commerce platform',
      year: 2023,
      attack: 'Reflected XSS in search',
      impact: 'Customer credit cards stolen',
      cost: '$5M+ in fraud losses'
    },
    {
      company: 'SaaS provider',
      year: 2024,
      attack: 'DOM XSS in dashboard',
      impact: 'Admin sessions hijacked',
      cost: 'Data breach, regulatory fines'
    }
  ],

  prevention: 'HTML encoding user input = Attack prevented',
  cost: '2 minutes to implement vs millions in damages'
};

// Before HTML encoding: Vulnerable blog
const vulnerableBlog = {
  code: `
    app.get('/post/:id', async (req, res) => {
      const post = await db.getPost(req.params.id);
      res.send(\`
        <h1>\${post.title}</h1>
        <p>\${post.content}</p>
        <p>By: \${post.author}</p>
      \`);
    });
  `,
  problem: 'Any <script> in title/content/author executes',
  risk: 'User accounts stolen, malware distributed',
  incidents: 'Happens daily on unprotected sites'
};

// With HTML encoding: Secure blog
const secureBlog = {
  code: `
    app.get('/post/:id', async (req, res) => {
      const post = await db.getPost(req.params.id);
      res.send(\`
        <h1>\${escapeHTML(post.title)}</h1>
        <p>\${escapeHTML(post.content)}</p>
        <p>By: \${escapeHTML(post.author)}</p>
      \`);
    });
  `,
  protection: 'All <script> tags become &lt;script&gt; (text)',
  risk: 'Zero - attacks display as harmless text',
  result: 'Safe, secure, XSS-proof'
};

console.log('HTML encoding: $0 cost, $millions saved');

HTML Entities Explained

Common HTML Entities

// HTML special characters and their entities
const htmlEntities = {
  dangerous: {
    '<': '&lt;',      // Less than - starts tags
    '>': '&gt;',      // Greater than - ends tags
    '&': '&amp;',     // Ampersand - starts entities
    '"': '&quot;',    // Quote - breaks attributes
    "'": '&#39;',     // Apostrophe - breaks attributes

    why: 'These 5 characters can execute code if not encoded'
  },

  common: {
    ' ': '&nbsp;',    // Non-breaking space
    '©': '&copy;',    // Copyright symbol
    '®': '&reg;',     // Registered trademark
    '™': '&trade;',   // Trademark
    '€': '&euro;',    // Euro sign
    '£': '&pound;',   // Pound sign
    '¥': '&yen;',     // Yen sign
    '¢': '&cent;',    // Cent sign
    '°': '&deg;',     // Degree sign
    '±': '&plusmn;',  // Plus-minus sign
    '×': '&times;',   // Multiplication
    '÷': '&divide;',  // Division
    '½': '&frac12;',  // One half
    '¼': '&frac14;',  // One quarter
    '¾': '&frac34;'   // Three quarters
  },

  mathematical: {
    '∞': '&infin;',   // Infinity
    '≈': '&asymp;',   // Approximately equal
    '≠': '&ne;',      // Not equal
    '≤': '&le;',      // Less than or equal
    '≥': '&ge;',      // Greater than or equal
    '∑': '&sum;',     // Sum
    '∏': '&prod;',    // Product
    '√': '&radic;',   // Square root
    '∫': '&int;'      // Integral
  },

  greek: {
    'α': '&alpha;',   // Alpha
    'β': '&beta;',    // Beta
    'γ': '&gamma;',   // Gamma
    'δ': '&delta;',   // Delta
    'π': '&pi;',      // Pi
    'Σ': '&Sigma;',   // Sigma
    'Ω': '&Omega;'    // Omega
  },

  arrows: {
    '←': '&larr;',    // Left arrow
    '→': '&rarr;',    // Right arrow
    '↑': '&uarr;',    // Up arrow
    '↓': '&darr;',    // Down arrow
    '↔': '&harr;',    // Left-right arrow
    '⇐': '&lArr;',    // Left double arrow
    '⇒': '&rArr;',    // Right double arrow
    '⇔': '&hArr;'     // Left-right double arrow
  },

  numeric: {
    format: '&#decimal; or &#xhex;',
    examples: {
      'A': '&#65; or &#x41;',
      '你': '&#20320; or &#x4F60;',
      '😀': '&#128512; or &#x1F600;'
    }
  }
};

// Display entity examples
function showEntities() {
  console.log('\n=== HTML Entity Examples ===\n');
  console.log('Dangerous characters (MUST encode):');
  Object.entries(htmlEntities.dangerous).forEach(([char, entity]) => {
    if (char !== 'why') {
      console.log(`  ${char.padEnd(3)} → ${entity.padEnd(10)} (prevents XSS)`);
    }
  });
}

showEntities();

Encoding Rules

// When to encode what
const encodingRules = {
  alwaysEncode: {
    characters: ['<', '>', '&', '"', "'"],
    reason: 'Can break HTML structure or execute code',
    severity: 'CRITICAL',

    examples: {
      '<script>': 'Becomes &lt;script&gt; (safe text)',
      '<img src=x onerror=alert(1)>': 'Becomes encoded text',
      'onclick="alert(1)"': 'Attribute value made safe'
    }
  },

  contextDependent: {
    insideText: {
      encode: ['<', '>', '&'],
      optional: ['"', "'"],
      example: '<p>User said: Hello & goodbye</p>'
    },

    insideAttribute: {
      encode: ['<', '>', '&', '"', "'"],
      critical: 'Must encode quotes to prevent attribute breaking',
      example: '<div title="User\'s comment">',
      bad: '<div title="' + userInput + '">',  // Vulnerable!
      good: '<div title="' + escapeHTML(userInput) + '">'  // Safe!
    },

    insideScript: {
      encode: 'JSON.stringify + escape for JS context',
      example: '<script>const data = ' + JSON.stringify(data) + ';</script>',
      warning: 'HTML encoding not sufficient in <script> tags!'
    },

    insideURL: {
      encode: 'Use URL encoding (encodeURIComponent), not HTML',
      example: '<a href="/search?q=' + encodeURIComponent(query) + '">',
      wrong: '<a href="/search?q=' + escapeHTML(query) + '">',
      reason: 'Different encoding scheme needed'
    }
  },

  neverEncode: {
    trustedHTML: {
      source: 'Admin-created content, hardcoded HTML',
      example: 'CMS content from trusted editors',
      warning: 'Still validate source is truly trusted!'
    },

    alreadyEncoded: {
      check: 'Test if already encoded to avoid double encoding',
      problem: '&amp; → &amp;amp; (broken)',
      solution: 'Track encoding state or decode first'
    }
  }
};

console.log('⚠️  CRITICAL: Always encode user input in HTML context');
console.log('✓ Encode < > & " \' in user-generated content');
console.log('✗ Never trust user input, even if "validated"');

Implementation Methods

1. JavaScript HTML Encoder/Decoder

// Production-ready HTML encoder
class HTMLEncoder {
  // Essential entity map
  static entities = {
    '&': '&amp;',   // MUST be first!
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;'
  };

  static reverseEntities = {
    '&amp;': '&',
    '&lt;': '<',
    '&gt;': '>',
    '&quot;': '"',
    '&#39;': "'",
    '&#x27;': "'",
    '&apos;': "'"
  };

  // Encode HTML (escape)
  static encode(text) {
    if (!text) return '';

    return String(text).replace(/[&<>"']/g, char => this.entities[char]);
  }

  // Decode HTML (unescape)
  static decode(html) {
    if (!html) return '';

    return String(html)
      .replace(/&amp;|&lt;|&gt;|&quot;|&#39;|&#x27;|&apos;/g, 
        entity => this.reverseEntities[entity] || entity)
      .replace(/&#(\d+);/g, (match, dec) => String.fromCharCode(dec))
      .replace(/&#x([0-9a-f]+);/gi, (match, hex) => 
        String.fromCharCode(parseInt(hex, 16))
      );
  }

  // Encode for attribute context
  static encodeAttribute(text) {
    if (!text) return '';

    // More aggressive encoding for attributes
    return String(text).replace(/[&<>"'`=]/g, char => {
      const code = char.charCodeAt(0);
      return `&#${code};`;
    });
  }

  // Encode only dangerous characters
  static encodeMinimal(text) {
    if (!text) return '';

    return String(text).replace(/[<>&]/g, char => this.entities[char]);
  }

  // Check if text contains unencoded HTML
  static hasUnencoded(text) {
    return /<[^>]+>/.test(text) || /&(?!amp;|lt;|gt;|quot;|#39;|#\d+;|#x[0-9a-f]+;)/i.test(text);
  }

  // Strip all HTML tags
  static stripTags(html) {
    return html.replace(/<[^>]*>/g, '');
  }

  // Sanitize HTML (allow safe tags)
  static sanitize(html, allowedTags = ['b', 'i', 'u', 'a', 'p', 'br']) {
    // Remove dangerous tags
    let sanitized = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
    sanitized = sanitized.replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, '');
    sanitized = sanitized.replace(/on\w+\s*=/gi, '');  // Remove event handlers

    // Remove non-allowed tags
    const allowedPattern = allowedTags.join('|');
    const tagRegex = new RegExp(`<(?!\/?(?:${allowedPattern})\\b)[^>]+>`, 'gi');
    sanitized = sanitized.replace(tagRegex, '');

    return sanitized;
  }

  // Display code safely
  static displayCode(code) {
    return `<pre><code>${this.encode(code)}</code></pre>`;
  }
}

// Usage examples
const userInput = '<script>alert("XSS")</script>';
console.log('Original:', userInput);
console.log('Encoded:', HTMLEncoder.encode(userInput));
// &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;

const encoded = '&lt;div&gt;Hello &amp; goodbye&lt;/div&gt;';
console.log('Decoded:', HTMLEncoder.decode(encoded));
// <div>Hello & goodbye</div>

// For attributes
const attrValue = 'My "special" value';
console.log('Attribute safe:', HTMLEncoder.encodeAttribute(attrValue));
// My &#34;special&#34; value

// Strip tags
const htmlContent = '<p>Hello <script>bad()</script> world</p>';
console.log('Text only:', HTMLEncoder.stripTags(htmlContent));
// Hello  world

// Sanitize
const userHTML = '<p>Hello</p><script>bad()</script><b>world</b>';
console.log('Sanitized:', HTMLEncoder.sanitize(userHTML));
// <p>Hello</p><b>world</b>

2. Express Middleware for XSS Protection

const express = require('express');
const app = express();

// XSS protection middleware
function xssProtection(options = {}) {
  const {
    encodeOutput = true,
    sanitizeInput = true,
    logAttempts = true
  } = options;

  return (req, res, next) => {
    // Sanitize input
    if (sanitizeInput) {
      ['body', 'query', 'params'].forEach(source => {
        if (req[source]) {
          req[source] = sanitizeObject(req[source]);
        }
      });
    }

    // Wrap res.send to encode output
    if (encodeOutput) {
      const originalSend = res.send;
      res.send = function(data) {
        if (typeof data === 'string' && !res.get('Content-Type')?.includes('json')) {
          // Check for potential XSS
          if (/<script|onerror|onclick/i.test(data)) {
            if (logAttempts) {
              console.warn('⚠️  Potential XSS in response:', req.path);
            }
          }
        }
        return originalSend.call(this, data);
      };
    }

    next();
  };
}

function sanitizeObject(obj) {
  if (typeof obj === 'string') {
    return HTMLEncoder.encode(obj);
  }

  if (Array.isArray(obj)) {
    return obj.map(item => sanitizeObject(item));
  }

  if (obj && typeof obj === 'object') {
    const sanitized = {};
    for (const [key, value] of Object.entries(obj)) {
      sanitized[key] = sanitizeObject(value);
    }
    return sanitized;
  }

  return obj;
}

// Use middleware
app.use(xssProtection({ logAttempts: true }));

// Safe endpoint (encoded automatically)
app.post('/api/comment', (req, res) => {
  const { comment } = req.body;  // Already sanitized by middleware

  // Save to database
  db.saveComment({
    text: comment,
    user: req.user.id,
    created: new Date()
  });

  res.json({ success: true });
});

// Display comments safely
app.get('/comments', async (req, res) => {
  const comments = await db.getComments();

  const html = `
    <html>
    <body>
      <h1>Comments</h1>
      ${comments.map(c => `
        <div class="comment">
          <p>${HTMLEncoder.encode(c.text)}</p>
          <small>By: ${HTMLEncoder.encode(c.username)}</small>
        </div>
      `).join('')}
    </body>
    </html>
  `;

  res.send(html);
});

// Content Security Policy headers
app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy', 
    "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
  );
  res.setHeader('X-Content-Type-Options', 'nosniff');
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('X-XSS-Protection', '1; mode=block');
  next();
});

3. React Safe Rendering

// React automatically escapes text content
function SafeComponent({ userInput }) {
  // ✓ Safe - React escapes by default
  return (
    <div>
      <h1>{userInput}</h1>
      <p>User said: {userInput}</p>
    </div>
  );
}

// ✗ Dangerous - dangerouslySetInnerHTML bypasses protection
function UnsafeComponent({ userHTML }) {
  return (
    <div dangerouslySetInnerHTML={{ __html: userHTML }} />
  );
}

// ✓ Safe HTML rendering with sanitization
import DOMPurify from 'dompurify';

function SafeHTMLComponent({ userHTML }) {
  const sanitized = DOMPurify.sanitize(userHTML, {
    ALLOWED_TAGS: ['b', 'i', 'u', 'a', 'p', 'br'],
    ALLOWED_ATTR: ['href']
  });

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

// Display code safely
function CodeDisplay({ code }) {
  return (
    <pre>
      <code>{code}</code>
    </pre>
  );
  // React encodes automatically, <script> becomes text
}

4. Template Engine Safety

// EJS - Auto-escaping
app.set('view engine', 'ejs');

// ✓ Safe - <%= escapes by default
// <%= userInput %>

// ✗ Dangerous - <%- does NOT escape
// <%- userInput %>

// Handlebars - Auto-escaping
const Handlebars = require('handlebars');

// ✓ Safe - {{ }} escapes by default
// {{ userInput }}

// ✗ Dangerous - {{{ }}} does NOT escape
// {{{ userInput }}}

// Pug - Auto-escaping
// ✓ Safe - default interpolation escapes
// p= userInput
// p #{userInput}

// ✗ Dangerous - ! does NOT escape
// p!= userInput
// p !{userInput}

console.log('⚠️  Template engines: Use escaping by default!');
console.log('✓ EJS: <%= %>');
console.log('✓ Handlebars: {{ }}');
console.log('✓ Pug: = or #{}');
console.log('✗ Never use unescaped output with user data!');

5. Python Implementation

import html
import re

class HTMLEncoder:
    @staticmethod
    def encode(text):
        """Encode HTML entities"""
        return html.escape(str(text), quote=True)

    @staticmethod
    def decode(html_text):
        """Decode HTML entities"""
        return html.unescape(str(html_text))

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

    @staticmethod
    def sanitize(html_text, allowed_tags=None):
        """Basic HTML sanitization"""
        if allowed_tags is None:
            allowed_tags = ['b', 'i', 'u', 'p', 'br']

        # Remove script tags
        sanitized = re.sub(r'<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>', 
                          '', html_text, flags=re.IGNORECASE)

        # Remove event handlers
        sanitized = re.sub(r'\son\w+\s*=', '', sanitized, flags=re.IGNORECASE)

        return sanitized

# Usage
user_input = '<script>alert("XSS")</script>'
encoded = HTMLEncoder.encode(user_input)
print(f"Encoded: {encoded}")
# &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;

decoded = HTMLEncoder.decode(encoded)
print(f"Decoded: {decoded}")
# <script>alert("XSS")</script>

# Strip tags
html_content = '<p>Hello <b>world</b></p>'
text = HTMLEncoder.strip_tags(html_content)
print(f"Text only: {text}")
# Hello world

6. Quick Online Encoding/Decoding

For rapid testing, debugging XSS issues, or learning entity encoding, using an HTML encoder/decoder can quickly encode/decode without writing code. This is particularly useful when:

Security testing: Test if inputs are properly encoded
Debugging: Find unencoded characters causing issues
Learning: See encoding patterns visually
Code examples: Encode code snippets for display

For production applications, always use proper encoding functions in your codebase and never trust client-side encoding alone.

Real-World Security Patterns

1. Comment System (Stored XSS Prevention)

// Secure comment posting
app.post('/api/comment', async (req, res) => {
  const { postId, comment } = req.body;

  // Validate
  if (!comment || comment.length > 1000) {
    return res.status(400).json({ error: 'Invalid comment' });
  }

  // Store encoded (defense in depth)
  await db.insertComment({
    postId,
    comment: HTMLEncoder.encode(comment),
    userId: req.user.id,
    createdAt: new Date()
  });

  res.json({ success: true });
});

// Display comments (already encoded in DB)
app.get('/api/comments/:postId', async (req, res) => {
  const comments = await db.getComments(req.params.postId);

  // Comments already encoded, safe to send
  res.json({ comments });
});

2. Search Results (Reflected XSS Prevention)

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

  // Encode search term for display
  const safeQuery = HTMLEncoder.encode(q);

  // Perform search (use parameterized queries!)
  const results = db.search(q);

  const html = `
    <html>
    <body>
      <h1>Search Results for: ${safeQuery}</h1>
      <ul>
        ${results.map(r => `
          <li>
            <a href="/post/${r.id}">${HTMLEncoder.encode(r.title)}</a>
            <p>${HTMLEncoder.encode(r.excerpt)}</p>
          </li>
        `).join('')}
      </ul>
    </body>
    </html>
  `;

  res.send(html);
});

3. Rich Text Editor (Controlled HTML)

// Allow limited HTML in posts
const DOMPurify = require('isomorphic-dompurify');

app.post('/api/post', async (req, res) => {
  const { title, content } = req.body;

  // Encode title (plain text only)
  const safeTitle = HTMLEncoder.encode(title);

  // Sanitize content (allow formatting)
  const safeContent = DOMPurify.sanitize(content, {
    ALLOWED_TAGS: [
      'p', 'br', 'strong', 'em', 'u', 'h1', 'h2', 'h3',
      'ul', 'ol', 'li', 'a', 'blockquote', 'code', 'pre'
    ],
    ALLOWED_ATTR: ['href', 'title'],
    ALLOW_DATA_ATTR: false
  });

  await db.insertPost({
    title: safeTitle,
    content: safeContent,
    userId: req.user.id
  });

  res.json({ success: true });
});

4. User Profile Display

// Display user profile safely
app.get('/user/:username', async (req, res) => {
  const user = await db.getUserByUsername(req.params.username);

  if (!user) {
    return res.status(404).send('User not found');
  }

  const html = `
    <html>
    <head>
      <title>${HTMLEncoder.encode(user.username)} - Profile</title>
    </head>
    <body>
      <h1>${HTMLEncoder.encode(user.displayName)}</h1>
      <p>Bio: ${HTMLEncoder.encode(user.bio)}</p>
      <p>Location: ${HTMLEncoder.encode(user.location)}</p>
      <p>Website: <a href="${HTMLEncoder.encodeAttribute(user.website)}">${HTMLEncoder.encode(user.website)}</a></p>
      <img src="${HTMLEncoder.encodeAttribute(user.avatar)}" alt="Avatar">
    </body>
    </html>
  `;

  res.send(html);
});

Testing HTML Encoding

// Jest security tests
describe('HTML Encoding Security', () => {
  test('prevents script injection', () => {
    const attack = '<script>alert("XSS")</script>';
    const safe = HTMLEncoder.encode(attack);

    expect(safe).not.toContain('<script>');
    expect(safe).toContain('&lt;script&gt;');
  });

  test('prevents event handler injection', () => {
    const attack = '<img src=x onerror="alert(1)">';
    const safe = HTMLEncoder.encode(attack);

    expect(safe).not.toContain('onerror=');
    expect(safe).toContain('&lt;img');
  });

  test('handles all dangerous characters', () => {
    const input = '< > & " \'';
    const encoded = HTMLEncoder.encode(input);

    expect(encoded).toBe('&lt; &gt; &amp; &quot; &#39;');
  });

  test('decodes correctly', () => {
    const encoded = '&lt;div&gt;Hello &amp; goodbye&lt;/div&gt;';
    const decoded = HTMLEncoder.decode(encoded);

    expect(decoded).toBe('<div>Hello & goodbye</div>');
  });

  test('prevents double encoding', () => {
    const text = 'Hello & goodbye';
    const once = HTMLEncoder.encode(text);
    const twice = HTMLEncoder.encode(once);

    expect(twice).toContain('&amp;amp;');  // Shows double encoding
  });
});

Conclusion: HTML Encoding Saves Your Application

HTML encoding is not optional—it's the fundamental defense against XSS attacks. Every piece of user-generated content must be encoded before display. One forgotten encoding point can compromise your entire application and all user accounts.

✅ Prevents XSS attacks (account takeover, data theft)

✅ Security best practice (OWASP Top 10)

✅ Simple to implement (one function call)

✅ Universal protection (works everywhere)

✅ Low performance cost (microseconds)

✅ Display any content (code, text, symbols)

✅ No false positives (legitimate < > displayed correctly)

✅ Regulatory compliance (GDPR, PCI-DSS require it)

Critical Security Rules:

✓ ALWAYS encode user input before displaying in HTML
✓ Encode on output, not input (preserve original data)
✓ Use < > & " ' encoding minimum
✓ Different contexts need different encoding (HTML vs URL vs JS)
✓ Never trust "validated" input - still encode
✓ Test with <script>alert(1)</script>
✗ Never use innerHTML with user data
✗ Never trust client-side encoding
✗ Never skip encoding "because we validate"

The Bottom Line:
XSS is the #2 web vulnerability (OWASP). It's trivial to exploit and catastrophic when successful. HTML encoding is your first, easiest, and most effective defense. It takes 2 seconds to add HTMLEncoder.encode(). It takes months to recover from a security breach. Every. Single. User. Input. Must. Be. Encoded.

Have you prevented XSS with encoding? Share your security wins (or war stories) in the comments!

webdev #security #xss #html #encoding

DEV Community