Snippet

Tagged Template Literals for Sanitization

Tagged templates allow you to parse template literals with a function. This is powerful for creating DSLs or, as shown here, automatically escaping user input to prevent XSS attacks.

snippet.js

javascript

function safeHTML(strings, ...values) {
  return strings.reduce((acc, str, i) => {
    const val = String(values[i] || '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return acc + str + val;
  }, '');
}
 
const userInput = '<img src=x onerror=alert(1)>';
const message = safeHTML`User said: ${userInput}`;
console.log(message); // User said: &lt;img src=x onerror=alert(1)&gt;

Breakdown

function safeHTML(strings, ...values) {

The function receives static strings as an array and dynamic values separately.

replace(/</g, '<')

Replaces dangerous HTML characters with safe entities.

strings.reduce(...)

Interleaves the static parts of the string with the processed dynamic values.

safeHTML`User said: ${userInput}`;

Invokes the 'tag' function without parentheses on the template string.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

Tagged Template Literals for Sanitization

Related