javascript - 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 verydangerous because it can easily lead to XSS vulnerabilities. Only useHTML interpolation on trusted content and never on user-providedcontent.

如果我使用 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

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

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

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