如何在VueJS中清理从应用程序接口调用收到的超文本标记语言

<template>
  <div>
    <div v-html="cleanedHTML"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedHTML: '<p>Hello <span onclick="alert(\'XSS attack!\')">World</span></p>',
      cleanedHTML: ''
    };
  },
  created() {
    this.cleanHTML();
  },
  methods: {
    cleanHTML() {
      const parser = new DOMParser();
      const doc = parser.parseFromString(this.receivedHTML, 'text/html');
      const cleanedDoc = this.cleanNodes(doc);
      this.cleanedHTML = cleanedDoc.documentElement.innerHTML;
    },
    cleanNodes(node) {
      const clone = node.cloneNode(true);
      const unsafeTags = ['script', 'style', 'iframe'];
      const unsafeAttributes = ['onclick', 'onload', 'onerror'];

      const traverse = (element) => {
        if (element.nodeType === Node.ELEMENT_NODE) {
          if (unsafeTags.includes(element.tagName.toLowerCase())) {
            element.parentNode.removeChild(element);
          } else {
            unsafeAttributes.forEach((attr) => {
              element.removeAttribute(attr);
            });
            Array.from(element.childNodes).forEach((child) => {
              traverse(child);
            });
          }
        }
      };

      traverse(clone);
      return clone;
    }
  }
};
</script>