V-html 只用于文本，安全吗？

Question

我现在处于 Vue Documenteation about Raw HTML 状态，我们可以使用 v-html 渲染一些内部 html。我承认这是合法且最简单的技巧，但由于我非常担心，所以我无法停止思考我是否可以在 Web 项目中安全地使用它。假设我仅将此 v-html 用于渲染一些 html 标记，例如 br、span 等

但在文档中他们清楚地说明是这样的：

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.

如果我仅将 v-html 用于 vue 组件中的文本渲染（例如此代码）并且没有 input 标记，XSS Vulnerabilities 攻击或 Cross-site Scripting 是否安全：

<template>
 <div>
  <h2 v-html="header" />
  <h2 class="bold" v-html="bHeader" />
  <h2 class="italic" v-html="iHeader" />
  <h2 class="text-muted" v-html="mHeader" />
 </div>
</template>

有人可以帮助我吗？我对此很困惑，实际上我只将此 v-html 用于文本标记，例如 h1、h2、h3 等

Answer 1

我认为您需要问自己的第一个问题是为什么您首先要这样绑定 HTML。请记住，Vue 中模板的全部目的是对状态进行反应式绑定。与使用 vanilla Javascript 或 Jquery 不同，您不想主动更改 DOM - Vue 会在您的属性更新时为您处理所有这些。

如果您绝对需要主动绑定 HTML（例如，因为您出于某种原因从服务器接收到整个 HTML 字符串），您可以使用该指令。正如其他用户在评论中指出的那样 - 好好想想谁正在创建您盲目绑定为 HTML 的内容。您在该字符串中使用恶意代码的风险与有权修改该内容的人一样低/高。

在我们的生产应用程序中，我们会尽可能避免它，即使我们非常确定内容可能是安全的（例如，只有管理员或员工可以访问它）。在我们绝对需要它的少数情况下，我们仍然尽力在前端和后端安全地解析字符串和转义字符，例如通过 https://www.npmjs.com/package/vue-sanitize or https://www.npmjs.com/package/sanitize-html

等库

V-html 只用于文本，安全吗？

V-html only use for text, is it safe?

javascript

html

vue.js

xss