Getting Vue to Render HTML Tags

In this super short and quick post, we are going to learn how to render HTML tags inside data function as working HTML.

As always, let’s jump right into the action.

For this example, we have a title parameter as a string that includes HTML tags.

 data() {
    return {
      dessert: {
        title: 'the <strong>mega super ultra stupendous</strong><br> <em>ice cream sundae</em>'
      }
    }
  }

Problem

If we render the title parameter using the “Mustache” syntax, HTML tags are going to show up as a string.

<p>{{dessert.title}}</p>

Solution

Vue has a v-html directive to overcome this problem. Which will directly update the element’s innerHTML.

<p v-html="dessert.title"></p>

Now, HTML tags are going to render as expected.

BUT BEWARE

This usage of directly injecting HTML to element can lead to XSS attacks and can be very dangerous, as mentioned in the docs.

What is that exactly mean? As stated from MDN , the browser cannot detect the malicious script, hence it gives access to cookies, session tokens, or other sensitive site-specific information, or lets the malicious script rewrite the HTML document.

For further information, you can check out the docs .

Additionally, you can watch this video from Web Dev Simplified to gain a little more knowledge about the topic.

Workaround

You can use vue-sanitize package to filter out unwanted HTML tags, this will allow you to only render HTML tags that you permit.

Conclusion

If you’re 100% sure that the provided HTML is safe, meaning that you’re working on a static website, or you are the one creating the content, then you can consider using v-html directive.

Otherwise, be very cautious if you’re working with sensitive data. ( username, password, credit card information, etc. )