Vue安全神器！vue-dompurify-html让你的应用告别XSS攻击，一行代码解决HTML注入问题

最新推荐文章于 2025-10-31 11:23:50 发布

原创

最新推荐文章于 2025-10-31 11:23:50 发布 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #安全 #html #DOMPurify #dompurify-html #Web安全 #v-html替代方案

在 Vue 开发中，我们经常需要动态渲染 HTML 内容，但使用v-html指令时存在 XSS 攻击风险。vue-dompurify-html 为我们提供了一个安全、优雅的解决方案。

什么是 vue-dompurify-html？

vue-dompurify-html 是一个基于 DOMPurify 的 Vue 插件，它为 Vue 应用提供了v-html指令的安全替代方案。通过 DOMPurify 的强大净化功能，它能在渲染 HTML 之前自动过滤掉恶意代码，确保应用安全。

核心特性

安全可靠：基于 DOMPurify，业界认可的 HTML 净化库
简单易用：零配置即可使用，API 友好
️高度可配置：支持自定义净化规则
保持样式：智能保留安全的 CSS 样式
轻量级：只是 DOMPurify 的简单包装器

安装配置

1. 安装依赖

# 使用npm
npm install vue-dompurify-html

# 使用yarn
yarn add vue-dompurify-html

# 使用pnpm
pnpm install vue-dompurify-html

2. 全局注册

在你的main.js或main.ts中：

import { createApp } from "vue";
import App from "./App.vue";
import VueDOMPurifyHTML from "vue-dompurify-html";

const app = createApp(App);
app.use(VueDOMPurifyHTML);
app.mount("#app");

基础使用

简单使用

替换原来的v-html指令：

<template>
  <div>
    <!-- ❌ 不安全的方式 -->
    <div v-html="dangerousHtml"></div>

    <!-- ✅ 安全的方式 -->
    <div v-dompurify-html="safeHtml"></div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const safeHtml = ref(`
    <h2 style="color: #4CAF50;">欢迎使用vue-dompurify-html</h2>
    <p>这段HTML已经被<strong>安全净化</strong>过了！</p>
    <${"script"}>alert('这段脚本会被自动移除')</${"script"}>`);
</script>