11-vue-dompurify-html的使用及使用过程中的问题解决

<template>
  <div>
    <h1>Markdown to HTML with DOMPurify</h1>
    <textarea v-model="input" placeholder="Enter markdown"></textarea>
    <div v-html="compiledMarkdown"></div>
    <p v-if="error">{{ error }}</p>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import DOMPurify from 'dompurify';
 
export default {
  setup() {
    const input = ref('');
    const error = ref('');
 
    const compiledMarkdown = ref('');
 
    const compile = () => {
      try {
        // 使用 marked 库将 markdown 转换为 HTML
        const rawHtml = marked(input.value, { sanitize: false });
        // 使用 DOMPurify 清理 rawHtml，避免 XSS 攻击
        compiledMarkdown.value = DOMPurify.sanitize(rawHtml);
        error.value = '';
      } catch (e) {
        error.value = 'Markdown rendering error: ' + e.message;
      }
    };
 
    return { input, compiledMarkdown, error, compile };
  }
};
</script>

这个代码实例展示了如何在Vue应用中使用DOMPurify来避免XSS攻击。marked库用于将Markdown转换为HTML，DOMPurify.sanitize用于清理HTML，防止不可信的输入导致的安全问题。这里的compile函数在每次input更新时被调用，并处理Markdown到HTML的转换和清理。如果转换过程中出现错误，会通过error状态显示错误信息。