摘要

v-html 指令用於將資料作為原始 HTML 進行渲染，而不是純文字。但它伴隨著嚴重的安全風險，必須謹慎使用。

定義與說明

與會將 HTML 標籤逸出為純文字的相反，v-html 會將字串內容直接解析為 HTML。

⚠️ 安全性警告

在網站上動態渲染任意 HTML 極易導致 XSS 攻擊。絕對不要將使用者提供的內容用 v-html 渲染。

實作範例

Vue SFC

<script setup>
import { ref } from 'vue';
const rawHtml = ref('<span style="color:red">紅色文字</span>');
</script>
<template>
  <!-- v-html 會將字串解析為 HTML 元素 -->
  <div v-html="rawHtml"></div>
</template>

結論

v-html 是渲染動態 HTML 的專用工具。使用它之前，必須 100% 確保內容來源是安全可信的，否則將對您的應用程式構成威脅。

v-html HTML 渲染安全性