Escaping HTML strings with jQuery

HTML escaping: the Long and Short of it

In the world of web content that could dangerously be interpreted as HTML or JavaScript code, you need to veil it by transforming it to plain text. This act of incognito is known as escaping. By making use of jQuery's .text() method, you are no longer just manipulating strings but also reinforcing an unbreakable shield against XSS attacks.

Custom escape function: the DIY kit

For times when .text() isn't sufficient, like when you have to store escaped strings or handle them beyond the scope of jQuery, having a custom escape function is handy. Here, maintain an array or a lookup table of find-replace pairs:

const escapeChars = {'<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;', "'": '&#39;'};
function escapeHtml(str) { 
  return String(str).replace(/[<>&"']/g, function (s) {
    // Why should HTML have all the fun? Be an escape artist!
    return escapeChars[s];
  });
}


Powerpack libraries for supreme security

Sometimes, home appliances are not enough; you need industrial-grade machinery. In the sphere of web security, these come in the form of libraries like mustache.js or lodash's _.escape():

var safeStr = _.escape(userInput); // Stay safe, stay escaped!


Sticking to these libraries ensures your security measures are in line with community-approved standards.

Regular expressions: 'Security guard' on steroids!

For the guardians of web security, regular expressions are blessings in disguise. When performance is critical and specificity is paramount, regular expressions hit the bull's eye:

function escapeHtml(str) {
  // Be explicit about safety; leave nothing to chance!
  return str.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
     return '&#'+i.charCodeAt(0)+';';
  });
}


This security guard converts chars to a string combining numeric entities, adding a robust layer of security.

Extending jQuery's vocabulary with Custom Escaping

Sometimes, to better understand a complex vocabulary, we invent our own language. Extend jQuery's prototype to include escaping functionality directly into its chain of methods:

$.fn.extend({
  escape() {
    return this.each(function() {
      $(this).text($(this).text());
    });
  }
});

$("#unsafe").escape(); // Call 911! Untrusted content escaped successfully. Phew!


Now you have a custom .escape() that leverages .text() internally to sanitize untrusted content, all with ease of use and intuitiveness.

Advanced Safekeeping manoeuvres

AVOID to ESCAPE

Steer clear of encodeURIComponent() for HTML escaping. It's good for URI components, not for HTML. It has a different map and doesn't escape characters that a HTML escape function would.

Sanitization: The hand sanitizer of Security

When you have user input, remember to clean the dirty hands. Escaping, white-listing safe values, and purging dangerous content form the hygiene protocol.

Test, Repeat: The developer's Bible

After implementing your escaping mechanism, verify it using jQuery’s .html(). It's like checking your work post-exam. Implement unit tests to ensure the output meets the expectations. Test, test, test!