v-sanitize

清理 HTML 内容以防止 XSS 攻击。

起始版本： 1.1.0

用法

基本

<template>
  <div v-sanitize v-html="userContent"></div>
</template>

指定允许的标签

<template>
  <div v-sanitize="{ allowedTags: ['b', 'i', 'p'] }" v-html="userContent"></div>
</template>

API

选项	类型	默认值	描述
allowedTags	string[]	安全子集	允许的 HTML 标签
allowedAttributes	string[]	安全子集	允许的 HTML 属性
allowDataUrls	boolean	false	允许 data: URL
allowStyles	boolean	false	允许 style 属性
allowClass	boolean	false	允许 class 属性
handler	Function	-	自定义清理函数

Composable 用法

你也可以使用 useSanitize composable 来实现相同功能：

<script setup>
import { ref } from 'vue'
import { useSanitize } from 'directix'

const userInput = ref('<script>alert("xss")</script><p>Safe content</p>')

const { sanitize } = useSanitize({
  allowedTags: ['b', 'i', 'p'],
  allowedAttributes: []
})

const safeHtml = sanitize(userInput.value)
// safeHtml = '<p>Safe content</p>'
</script>

<template>
  <div v-html="safeHtml"></div>
</template>

API

interface UseSanitizeOptions {
  /** 允许的标签（白名单） @default ['b', 'i', 'u', 'strong', 'em', 'br', 'p', 'span', 'div'] */
  allowedTags?: string[]
  /** 允许的属性（白名单） @default ['title', 'alt', 'href', 'src'] */
  allowedAttributes?: string[]
  /** 是否允许 data URL @default false */
  allowDataUrls?: boolean
  /** 是否允许内联样式 @default false */
  allowStyles?: boolean
  /** 是否允许 class 属性 @default false */
  allowClass?: boolean
  /** 是否允许 id 属性 @default false */
  allowId?: boolean
  /** 自定义清理函数 */
  handler?: (html: string) => string
}

interface UseSanitizeReturn {
  /** 清理 HTML 字符串 */
  sanitize: (html: string) => string
  /** 清理并设置到元素 */
  bind: (element: HTMLElement) => () => void
}