CODEWITHSUNDEEP
javascripthtmlvue.jsxss
Rakish Frisky
Rakish Frisky

Reputation: 675

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

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.

Upvotes: 3

Views: 12955

Answers (1)

Tobias G.
Tobias G.

Reputation: 341

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

Upvotes: 2

Related Questions