Sanitize a document or element using a whitelisted selectors and whitelisted attributes

sanitizeDOM.js

// sanitize an element using a whitelisted selector string
function sanitizeDOM(ELEMENT, WHITELISTED_SELECTORS, WHITELISTED_ATTRIBUTES) {
  // get all elements within an ELEMENT
  Array.prototype.forEach.call(ELEMENT.querySelectorAll('*'), node => {
    // if the element does not match a WHITELIST_SELECTOR_STRING
    if (!node.matches(WHITELISTED_SELECTORS)) {
      // create a new document fragment
      const fragment = document.createDocumentFragment();

      // append all the children of the invalid node into the new fragment 
      Array.prototype.forEach.call(node.childNodes, childNode => {
        fragment.appendChild(childNode);
      });

      // sanitize the fragment
      sanitizeDOM(fragment, WHITELISTED_SELECTORS)

      // replace the invalid node with the sanitized fragment
      node.parentNode.replaceChild(fragment, node);
    } else if (node.attributes) {
      // otherwise, get all the attributes on the node
      Array.prototype.forEach.call(node.attributes, attribute => {
        // if the attribute is not whitelisted
        if (!WHITELISTED_ATTRIBUTES.includes(attribute.name)) {
          // remove the attribute from the node
          node.removeAttributeNode(attribute);
        }
      })
    }
  })
}

// const ELEMENT = document;
// const WHITELISTED_SELECTORS = 'h1, h2, h3, p, p strong, p em';
// const WHITELISTED_ATTRIBUTES = ['class', 'style']