Bereinigen von HTML-Direktiven gegen XSS mittels DOMPurify

import { type Directive } from 'vue';
import DOMPurify from 'dompurify';
 
export const vSafeHtml: Directive<HTMLElement, string | null> = {
  mounted(el, binding) {
    const rawInput = binding.value;
    if (typeof rawInput !== 'string' || !rawInput.trim()) {
      el.textContent = '';
      return;
    }
    const sanitized = DOMPurify.sanitize(rawInput, {
      ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'code'],
      ALLOWED_ATTR: ['href', 'target', 'rel']
    });
    el.innerHTML = sanitized;
  },
  updated(el, binding) {
    if (binding.value !== binding.oldValue) {
      vSafeHtml.mounted?.(el, binding, null as any, null as any);
    }
  }
};