11/12/2017 - 9:31 PM

ES6 - Sanitize with tagged template string

A way to sanitize html with DOMPurify and tagged template strings. Remember not to rely on just client-side scripting to do things like this. From

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>Tagged Templates</title>

    abbr {
      border-bottom:1px dotted grey;

  <div class="bio">


<script src=""></script>
  function sanitize(strings, ...values) {
    const dirty = strings.reduce((prev, next, i) => `${prev}${next}${values[i] || ''}`, '');
    return DOMPurify.sanitize(dirty);

  const first = 'Wes';
  const aboutMe = `I love to do evil <img src="" onload="alert('you got hacked');" />`;

  const html = sanitize`

  const bio = document.querySelector('.bio');
  bio.innerHTML = html;