Securing User-Provided Markup via Custom Vue Directive Binding

import DOMPurify from 'dompurify';
 
export const vSafeHtml = {
  mounted(el, binding) {
    const cleanContent = DOMPurify.sanitize(binding.value || '', {
      ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],
      ALLOWED_ATTR: ['href', 'target']
    });
    el.innerHTML = cleanContent;
  },
  updated(el, binding) {
    if (binding.value !== binding.oldValue) {
      el.innerHTML = DOMPurify.sanitize(binding.value || '', {
        ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],
        ALLOWED_ATTR: ['href', 'target']
      });
    }
  }
};