VueSafeHTML.ts

import { VueConstructor } from 'vue'

// Vue plugin for v-html-safe directive (safe alternative to insecure v-html)
const VueSafeHTML = {
  install: function (vue: VueConstructor) {
    const doc = document.implementation.createHTMLDocument('')
    const div = doc.createElement('div')

    function sanitizeHTML(htmlString: string) {
      div.innerHTML = htmlString

      const elements = div.querySelectorAll('*')
      for (let i = elements.length - 1; i >= 0; i--) {
        const element = elements[i]
        // This is not needed because .innerHTML by default does not execute script tags
        if (element.localName == 'script' && element.parentNode) {
          element.parentNode.removeChild(element)
          continue
        }

        if (!element.hasAttributes()) continue

        const attributes = element.attributes
        for (let j = attributes.length - 1; j >= 0; j--) {
          const attribute = attributes[j]
          // Remove insecure attributes starting "on*"" (e.g.: onload, onerror, ...) and also values starting "javascript:*" (e.g. href="javascript:alert(1)")
          if (attribute.name.indexOf('on') == 0 || attribute.value.indexOf('javascript:') == 0)
            element.removeAttribute(attribute.localName)
        }
      }
      return div.innerHTML
    }

    vue.directive('html-safe', {
      inserted: function (el, binding) {
        el.innerHTML = sanitizeHTML(binding.value)
      },

      update: function (el, binding) {
        if (binding.value !== binding.oldValue) el.innerHTML = sanitizeHTML(binding.value)
      },
    })
  },
}

export default VueSafeHTML