So far we have seen how we can use string interpolation to output data. When doing so, Vue.js actually takes some security precautions on our behalf by escaping the data. Before talking about how Vue.js escapes data, let’s first talk a bit about why this is the case. Suppose that users on a website can type their name into a text field, and that this name is output on the front page of the website. If the user decided to enter HTML markup instead of his or her name, the user would be able to change the markup of the front page. This could be as harmless as entering an h1 tag, which would just affect the appearance of the page, or as harmful as embedding JavaScript code that redirects the user to a harmful site that could try to steal the user’s credentials. A lot of different attacks would be possible, and therefore the safety of all of the website’s users have potentially been compromised. This happens because any markup that the user enters as his or her name, is unknowingly rendered by the browser and displayed or executed as if it were an intended part of the page. Such an attack is called “cross-site scriping,” often referred to as XSS.

Such a security vulnerability can be resolved by escaping the data. This means that certain symbols are converted to so-called HTML entities such that they are not rendered as part of the page by the browser, but instead displayed. This is exactly what Vue.js does for us automatically, so let’s see that in action.

I have a data property which contains a string of HTML markup. Let’s see what happens if I try to output it with string interpolation.

{{ html }}

Perhaps the result is not what you would expect. We see the actual HTML markup on the page, and not the header that we might have expected. This is because Vue.js escapes any markup before it outputs data on the page. This is good default behavior, because one has to be verify careful about outputting unescaped data on a page, for the before mentioned reasons. If you really do need to output data without escaping it, you can use the v-html directive as follows.

<div v-html="html"></div>

By simply writing the name of our data property, we can output the HTML in such a way that the browser will render it as it normally would. Just a word of caution, though. You should only do this if you know for sure that the data that you are outputting is safe. As a rule of thumb, if the data is from a user, then you should not trust it, unless it has already been escaped. Don’t even trust data that you have added to your database, because if someone gains unauthorized access to your database and manipulates the data, then all of your users could potentially be hacked. So be very cautious about using the v-html directive and only use it if you absolutely need to and you know what you are doing. In case you have any questions about the best practices, then you are more than welcome to ask.