V-html 只用于文本，安全吗? [英] V-html only use for text, is it safe?
问题描述
我现在处于 Vue Documenteation about Raw HTML 状态我们可以使用 v-html 来渲染一些内部的 html.我承认这是合法且最简单的技巧，但由于我非常担心，我无法停止思考是否可以在网络项目中安全地使用它.假设我使用这个 v-html 仅用于渲染一些 html 标签，例如 br、span 等.
但在文档中他们清楚地说明如下:
<块引用>在您的网站上动态呈现任意 HTML 可能非常危险，因为它很容易导致XSS 漏洞.只使用可信内容上的 HTML 插值，而不是用户提供的内容内容.
如果我使用 v-html 仅用于 vue 组件中的文本渲染，例如此代码并且没有 input 标记，那么 XSS 漏洞是否安全code> 攻击或 Cross-site Scripting:
<div><h2 v-html="header"/><h2 class="bold" v-html="bHeader"/><h2 class="italic" v-html="iHeader"/><h2 class="text-muted" v-html="mHeader"/>有人可以帮我吗?我对此很困惑，实际上我只将这个 v-html 用于文本标签，例如 h1, h2, >h3 等
我认为您需要问自己的第一个问题是，您首先为什么要像这样绑定 HTML.请记住，Vue 中模板的全部目的是状态的反应式绑定.与使用 vanilla Javascript 或 Jquery 不同，您不想主动更改 DOM - Vue 会在您的属性更新时为您处理所有这些.
如果您绝对需要主动绑定 HTML(例如，因为无论出于何种原因您从服务器收到整个 HTML 字符串)，您可以使用该指令.正如其他用户在评论中指出的那样 - 好好想想谁正在创建您盲目绑定为 HTML 的内容.您在此字符串中使用恶意代码的风险与有权修改此内容的人一样低/高.
在我们的生产应用程序中，我们尽量避免它，即使我们非常确定内容可能是安全的(例如，只有管理员或员工可以访问它).在我们绝对需要它的少数情况下，我们仍然尽力在前端和后端安全地解析字符串和转义字符，例如通过诸如 https://www.npmjs.com/package/vue-sanitize 或 https://www.npmjs.com/package/sanitize-html
I now that in the Vue Documenteation about Raw HTML state that we can use v-html to render some inner html. I admit that this is the legal and most simple trick to do but since I'm quite the worrywart I can't stop thinking if I can use it safely in web project. let say I use this v-html only for render some html tag such as br, span, etc.
but in the documentation they state clearly like this:
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.
if I use v-html only for text rendering in vue component such as this code and without input tag, is it safe for XSS Vulnerabilities attack or 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>
Can someone help me ? I'm quite confused about this, in fact I only use this v-html only for text tag such as h1, h2, h3, etc.
I think the first question you need to ask yourself is why you want to bind HTML like this in the first place. Remember that the whole purpose of your template in Vue is a reactive binding of your state. Unlike working with vanilla Javascript or Jquery, you do not want to actively change the DOM - Vue handles all of that for you as your properties update.
If you absolutely need to actively bind HTML (for example, because you receive an entire HTML string from your server for whatever reason) you can use that directive. As other users have pointed out in the comments - have a good think who is creating the content that you're blindly binding as HTML. Your risk for malicious code in this string is as low / high as the people who have access to modify this content.
In our production applications we try to avoid it whenever possible, even when we are quite sure that the content is likely to be safe (e.g. only administrators or staff have access to it). In the few instances where we absolutely needed it, we still try our best to safely parse the string and escape characters both on the frontend and backend e.g. through libraries such as https://www.npmjs.com/package/vue-sanitize or https://www.npmjs.com/package/sanitize-html
这篇关于V-html 只用于文本，安全吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
