XSS-Minderung in benutzerdefinierten Vue-Direktiven durch Element-Bereinigung

import { Directive } from 'vue';
 
export const vSanitizeHtml: Directive<HTMLElement, string> = {
  mounted(el, binding) {
    try {
      const rawInput = binding.value;
      if (typeof rawInput !== 'string') {
        throw new TypeError('v-sanitize-html directive requires a string value.');
      }
      const parser = new DOMParser();
      const doc = parser.parseFromString(rawInput, 'text/html');
      const scripts = doc.querySelectorAll('script, iframe, object');
      scripts.forEach((node) => node.remove());
      el.innerHTML = doc.body.innerHTML;
    } catch (err) {
      console.error('Directives sanitization failure:', err);
      el.textContent = '';
    }
  }
};