I need help, they say v-html is not safe, but how would I render posts from database?

[JenuelDev]

So we have a table called posts that has a column of content, that has a format of something like this:

<h1>Here it is</h2>
<p>Some contents here.</p>

If v-html is not safe, is any alternative then? because if I just use {{ post. content }} it will treat it as a text.

[liulinboyi]

Don't trust user input and filtering special characters can reduce most XSS.
I recommend these library to filter special characters js-xss ,htmlspecialchars, html-entities.

[JenuelDev]

Thanks, mate for the suggestion... I totally agree.

[leopiccionia]

v-html is as safe as the HTML that you consume. Ideally, you should sanitize the HTML in you back-end, before saving the content in the database.

If you (or your team) don't control the the database, you should sanitize the content on the front-end. Apart from the great suggestions by @liulinboyi, I've created a Vue wrapper to the great sanitize-html library:
https://github.com/leopiccionia/vue-sanitize-directive

[JenuelDev]

thanks, mate for sharing, I think I will give the package a go.

[maximilliangeorge]

What bugs me about v-html is that it cannot be used on components, which makes it a poor way to render text containing HTML entities. For example, it works unreliably in nuxt static mode. Seems avoidable if using a span inside the component, but that feels unnecessary. Apparently this is due to a will-not-fix in Vue core. The best would be if v-text had a modifier of some sort to preserve or escape HTML entities.

#6553 (comment)