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 ponent 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 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 ponent 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.

• javascript
• html
• vue.js
• xss

• 4 It's really only risky if you are getting the html from the user. – Vince Commented Oct 3, 2019 at 3:21
• so as long as I only use it as a simple ponent for text it safe from XSS Vulnerabilities? from what you say then as long as I don't put it in input, `textarea, etc. it still safe to go on? is it like that? – Rakish Frisky Commented Oct 3, 2019 at 3:30
• 4 What I mean is, you can use v-html to render any html that es from you. If the html es from the user, don't use v-html. – Vince Commented Oct 3, 2019 at 3:33
• 1 @RakishFrisky Here's a good article explaining how it can hurt you. – Yom T. Commented Oct 3, 2019 at 3:54
• @Vince I see... so it means, I must try to avoid all input and richtext when using v-html – Rakish Frisky Commented Oct 3, 2019 at 7:15

1 Answer 1

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 ments - 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./package/vue-sanitize or https://www.npmjs./package/sanitize-html