VueDOMPurifyHTML?是一個 ??Vue.js 插件??，用于在?v-html?指令中安全地渲染 HTML 內容，防止 ??XSS（跨站腳本攻擊）?? 風險。

??作用??

• ??解決?v-html?的安全問題??
  Vue 的?v-html?會直接渲染原始 HTML，如果內容來自用戶輸入或外部 API，可能包含惡意腳本（如?<script>alert('XSS')</script>）。
  VueDOMPurifyHTML?使用 ??DOMPurify??（一個安全的 HTML 清理庫）對內容進行過濾，只保留安全的 HTML 標簽和屬性。

基本用法??

1.安裝

npm install vue-dompurify-html dompurify

2.??在 Vue 項目中注冊?

import Vue from 'vue'
import VueDOMPurifyHTML from 'vue-dompurify-html'

Vue.use(VueDOMPurifyHTML)

3.在模板中使用

<div v-dompurify-html="userProvidedHtml"></div>?

（替代原本不安全的?v-html）

示例?：

<template>
? <div v-dompurify-html="rawHtml"></div>
</template>

<script>
export default {
? data() {
? ? return {
? ? ? rawHtml: '<span style="color: red;">安全內容</span><script>alert("惡意代碼會被刪除")</script>'
? ? }
? }
}
</script>

?

輸出結果??：

• 渲染?<span style="color: red;">安全內容</span>
• 自動移除?<script>?標簽及其內容，避免 XSS 攻擊。

??適用場景??

• 渲染富文本內容（如 CMS 文章、評論等）
• 需要保留基本 HTML 樣式（如加粗、鏈接），但過濾危險代碼

對比原生?v-html??

方式	安全性	是否過濾惡意代碼
v-html	? 不安全	直接渲染原始 HTML
v-dompurify-html	? 安全	自動清理危險標簽

推薦在需要動態渲染 HTML 時優先使用此插件，而不是直接使用?v-html。