在Vue3中實(shí)現(xiàn)一個(gè)自定義的v-html組件方式

更新時(shí)間：2025年11月03日 09:36:22 作者：斯~內(nèi)克

文章介紹了Vue.js中的v-html指令及其潛在的安全風(fēng)險(xiǎn),然后通過DOMParser實(shí)現(xiàn)了一個(gè)自定義的v-html組件,以提高安全性并避免XSS攻擊

引言

在 Vue.js 中，v-html 是一個(gè)非常有用的指令，用于將 HTML 字符串渲染到元素中。然而，由于它直接插入 HTML 內(nèi)容，存在潛在的安全風(fēng)險(xiǎn)（如 XSS 攻擊）。

因此，了解其工作原理并實(shí)現(xiàn)一個(gè)安全的替代方案是非常重要的。

v-html原理

v-html 的主要功能包括：

將字符串內(nèi)容作為 HTML 插入到指定的 DOM 元素中。
不會進(jìn)行任何的 HTML 轉(zhuǎn)義，因此可以插入完整的 HTML 結(jié)構(gòu)。
由于其直接插入 HTML 的特性，使用時(shí)需要非常小心，以防止 XSS 攻擊。

實(shí)現(xiàn)一個(gè)自定義的v-html組件

為了實(shí)現(xiàn)一個(gè)安全的 HTML 渲染組件，我們可以使用 DOMParser 來解析和處理 HTML 內(nèi)容。

以下是一個(gè)詳細(xì)的實(shí)現(xiàn)步驟。

步驟

定義一個(gè) prop 來接收 HTML 字符串。
使用 DOMParser 解析 HTML 字符串。
將解析后的 DOM 內(nèi)容插入到組件的模板中。
監(jiān)聽 prop 的變化，以便在內(nèi)容變化時(shí)重新渲染。

實(shí)現(xiàn)代碼

假設(shè)我們有一個(gè) YHtml.vue 組件，我們將在這個(gè)組件中實(shí)現(xiàn)自定義的 v-html 功能。

<template>
  <div ref="htmlContainer"></div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'

// 定義一個(gè) prop 來接收 HTML 字符串
const props = defineProps<{
  htmlContent: string
}>()

// 獲取對 DOM 元素的引用
const htmlContainer = ref<HTMLElement | null>(null)

// 使用 DOMParser 解析 HTML 字符串并插入到容器中
const renderHtml = () => {
  if (htmlContainer.value) {
    const parser = new DOMParser()
    const doc = parser.parseFromString(props.htmlContent, 'text/html')
    const body = doc.body

    // 清空容器
    htmlContainer.value.innerHTML = ''

    // 將解析后的 HTML 內(nèi)容插入到容器中
    Array.from(body.childNodes).forEach(node => {
      htmlContainer.value?.appendChild(node)
    })
  }
}

// 在組件掛載時(shí)渲染 HTML
onMounted(() => {
  renderHtml()
})

// 監(jiān)聽 htmlContent 的變化，重新渲染 HTML
watch(() => props.htmlContent, renderHtml)
</script>

<style scoped>
/* 添加樣式 */
</style>

使用示例

假設(shè)你在父組件中使用 YHtml 組件，可以這樣寫：

<template>
  <div>
    <YHtml :htmlContent="htmlString" />
  </div>
</template>

<script setup lang="ts">
import YHtml from './components/YHtml.vue'
import { ref } from 'vue'

const htmlString = ref('<p>這是一個(gè) <strong>安全</strong> 的 HTML 內(nèi)容。</p>')
</script>

注意事項(xiàng)

安全性：雖然我們使用了 DOMParser 來解析 HTML，但在實(shí)際應(yīng)用中，還需要對輸入的 HTML 進(jìn)行嚴(yán)格的過濾和驗(yàn)證，以防止 XSS 攻擊。
性能：頻繁地操作 DOM 可能會影響性能，特別是在處理大量或復(fù)雜的 HTML 內(nèi)容時(shí)。