vue3项目解决xss攻击

1、问题背景

Vue 内置的 v-html 指令可以渲染原始 HTML，但这会带来巨大的安全风险（XSS 攻击）。如果直接将用户输入或来自不可信来源的 HTML 字符串用 v-html 渲染，很容易导致跨站脚本攻击。

2、解决方案

vue-dompurify-html 是一个专为 Vue.js 项目设计的轻量级库，它提供了一个安全的指令，用于在 Vue 应用中渲染 HTML 内容。vue-dompurify-html 在内部集成了强大的 DOMPurify 库。DOMPurify 是一个经过充分测试且高效的 HTML 清理工具。在将 HTML 字符串插入 DOM 之前，这个库会使用 DOMPurify 对其进行“消毒”（Sanitizing），只保留安全的 HTML 标签和属性，从而有效防止 XSS 攻击。

3、使用方法

1. 安装

可以使用 npm 或 yarn 来安装它。

# 使用 npm
npm install vue-dompurify-html

# 使用 yarn
yarn add vue-dompurify-html

2. 在 Vue 项目中引入和配置
Vue 3 项目 (main.js)

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');

3. 在组件模板中使用

安装并注册后，您就可以在组件的模板中使用 v-dompurify-html 指令了。

它的用法和 v-html 完全一样，只是指令名不同。

<template>
  <div>
    <!-- 不安全：直接使用 v-html 渲染未经验证的 HTML -->
    <div v-html="rawHtml"></div>

    <!-- 安全：使用 v-dompurify-html 渲染经过消毒的 HTML -->
    <div v-dompurify-html="rawHtml"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: `<span style="color: red;">这是红色的文字！</span><script>alert('恶意代码')<\/script>`
    };
  }
};
</script>