Erstellen einer benutzerdefinierten Bereinigungsdirektive mit DOMPurify zur XSS-Prävention

import DOMPurify from 'dompurify';
 
const SANITIZE_CONFIG = {
  ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'ul', 'li'],
  ALLOWED_ATTR: ['href', 'target', 'rel']
};
 
export const vSanitizeHtml = {
  mounted(el, binding) {
    const clean = DOMPurify.sanitize(binding.value ?? '', SANITIZE_CONFIG);
    el.innerHTML = clean;
  },
  updated(el, binding) {
    if (binding.value !== binding.oldValue) {
      const clean = DOMPurify.sanitize(binding.value ?? '', SANITIZE_CONFIG);
      el.innerHTML = clean;
    }
  }
};