Explain Codes LogoExplain Codes Logo

Escape text for HTML

javascript
html-escaping
xss-prevention
html-entities
Nikita BarsukovbyNikita Barsukov·Nov 25, 2024
TLDR

To create HTML-safe text, you need to encode special characters. Turn < into &lt;, > into &gt;, & into &amp;, " into &quot;, and ' into &#39;. Here's a handy JavaScript snippet:

function escapeHTML(text) { return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;') .replace(/"/g, '&quot;').replace(/'/g, '&#39;'); } const safeText = escapeHTML('Special chars: <, >, &, \", \''); // Mission accomplished! No character left behind.

To foster text that's safe from HTML interpretation, simply invoke escapeHTML().

Escaping HTML in C# : Choose your weapon

In the C# world, multiple options are available for escaping HTML text. Here are some of the most powerful ones:

The trusty old System.Web.HttpUtility.HtmlEncode

The HttpUtility.HtmlEncode method comes to your rescue even outside an ASP.NET environment:

using System.Web; string encodedHtml = HttpUtility.HtmlEncode("Special chars: <, >, &"); // This line of code is like Mjolnir: small, but mighty.

This utility ensures that Hulk doesn't smash your HTML tags, keeping them safe as plain text.

The versatile WebUtility.HtmlEncode

For .NET 4+ applications, WebUtility.HtmlEncode steps in, proving that not all heroes wear a System.Web cape:

using System.Net; string encodedHtml = WebUtility.HtmlEncode("Special chars: <, >, &"); // Who you gonna call? WebUtility!

The Guardian: AntiXssEncoder.HtmlEncode

If you smell XSS in the air, AntiXssEncoder.HtmlEncode springs into action like a cybersecurity'ninja:

using System.Web.Security.AntiXss; string encodedHtml = AntiXssEncoder.HtmlEncode("Special chars: <, >, &", useNamedEntities: true); // Now you see me, XSS you don't.

Choosing your escaping method

Contemplating the right method? Think about:

  • Your security needs: Are you a marked man?
  • The version of .NET: Are you a time traveler?
  • Your ties with System.Web: Friends or not-so-much?

Strolling down the encoding path, watch your step for:

  • Ampersands (&), they're like chameleons in the wild.
  • Mixing encoded and unencoded content: basically mixing oil and water.
  • Contextual encoding: one size doesn't fit all.

Visualization

Study this transformation from normal ink to special ink:

Before: "Hello & Goodbye <script>" // The special ink: [&, <, >] After: "Hello &amp; Goodbye &lt;script&gt;" // Magic happened here

This manipulation turns special characters into non-threatening HTML entities i.e., &amp;, &lt;.

Escaping scenarios

User-generated content

Escaping HTML is pivotal when users start wearing the content-creator hat. It's your safeguard against XSS bandits and your bug repellent.

Dynamic HTML

Are you a maestro of dynamic HTML strings? Time to protect that user input and external data with some HTML escaping.

Code in HTML

Displaying code snippets in HTML? Don't let your <div> tags dive into the HTML pool. Put them in a safety bubble with HTML escaping.