Vue3使用DOMPurify防御XSS攻击

# 确认安装版本（含嵌套依赖）
npm install dompurify
# 或者
yarn add dompurify

import DOMPurify from 'dompurify';

import DOMPurify from 'dompurify';

// 示例：可能不安全的HTML输入
let rawHtml = '<p>Safe content</p><scr' + 'ipt>alert("XSS")</scr' + 'ipt>';
let sanitizedHtml = DOMPurify.sanitize(rawHtml);
console.log('DOMPurify过滤前：', rawHtml)
console.log('DOMPurify过滤后：', DOMPurify.sanitize(html))

const config = {
  // 只允许这些HTML标签
  ALLOWED_TAGS: ['p', 'a', 'b', 'i', 'em', 'strong'],
  // 只允许这些HTML属性
  ALLOWED_ATTR: ['href', 'title', 'target'],
  // 允许自定义URI的协议
  ALLOWED_URI_REGEXP: /^(https?|ftp):/i
  // 禁止的危险属性
  FORBID_ATTR: ['onclick', 'onload']
};

const dirtyHtml = '<p>Hello, <a href="https://example.com" rel="external nofollow"  target="_blank" οnclick="alert(1)">World</a>!</p>';
const cleanHtml = DOMPurify.sanitize(dirtyHtml, config);

DOMPurify.addHook('uponSanitizeAttribute', (node, data) => {
  if (data.attrName === 'src' && /javascript:/i.test(data.attrValue)) {
    data.keepAttr = false; // 阻止javascript:协议
  }
});

const dirtyInput = '<script>alert("XSS")</script><p>Safe content</p>';
const clean = DOMPurify.sanitize(dirtyInput);

// 查看被移除的节点
console.log(DOMPurify.removed);

<script setup>
import { ref, computed } from 'vue';
import DOMPurify from 'dompurify';

const userInput = ref('');
const sanitizedInput = computed(() => DOMPurify.sanitize(userInput.value));
</script>

<template>
  <textarea v-model="userInput" placeholder="输入内容"></textarea>
  <div v-html="sanitizedInput"></div>
</template>

// main.js 或类似文件
import { createApp } from 'vue';
import App from './App.vue';
import DOMPurify from 'dompurify';

const app = createApp(App);

app.directive('safe-html', (el, binding) => {
  el.innerHTML = DOMPurify.sanitize(binding.value);
});

app.mount('#app');

<template>
  <div v-safe-html="rawHtml"></div>
</template>