Vue3 中 v-html 的使用

一、基礎用法

v-html 指令可以直接將字符串渲染為 HTML 內容，其用法可以十分簡單：

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

<script>
export default {
  data() {
    return {
      htmlContent: "<p>獻給所有為了夢想狂奔的人</p>"
    }
  }
}
</script>

上面的例子中，我們將 data 中的 htmlContent 賦值為一個包含 p 標籤的字符串，使用 v-html 渲染到頁面中。

二、安全考慮

然而直接使用 v-html 渲染 HTML 字符串有可能會造成安全問題。如果字符串中包含有惡意的代碼，那麼很有可能會導致 XSS（跨站腳本攻擊）風險。因此在 v-html 使用過程中，需要注意一些安全問題。

Vue 3 中提供了一個新的 API：createVNode，可以用於創建虛擬節點，它可以幫助我們更好地渲染動態內容。下面舉一個例子，介紹如何在使用 v-html 的同時保證安全性：

<template>
  <div :innerHTML="rawHtml"></div>
</template>

<script>
import { createVNode } from 'vue';

export default {
  data() {
    return {
      htmlContent: "alert('malicious code')"
    }
  },

  computed: {
    rawHtml() {
      const tmp = document.createElement('div');
      tmp.innerHTML = this.htmlContent;

      const childNodes = Array.from(tmp.childNodes).map(node => {
        return node.nodeType === 3 // text node
          ? createVNode('template', null, { default: () => node.textContent })
          : createVNode(node.tagName, null, null, null, Array.from(node.attributes), null, Array.from(node.childNodes).map(n => this.rawHtml(n)));
      });

      return createVNode('div', null, childNodes);
    }
  }
}
</script>

通過上面的代碼，我們可以將字符串通過 createVNode 來創建虛擬節點，從而避免了直接將字符串渲染到 DOM 中的安全問題。

三、結語

通過本文的講解，我們可以發現 v-html 指令在 Vue 開發中可以起到十分便捷的作用。但是在使用時需要注意一些安全問題。通過結合 createVNode API 的使用，我們可以更好地渲染動態 HTML 內容，使代碼更加健壯、安全。