vue.js - Display markdown without having to use v-html

Question

I have a "blog" kind of website, where users can post new blogs with a WYSIWYG, and then have them displayed on the website.

The thing is I want it to be XSS safe and I don't want to use v-html or .innerHTML at all - is that possible?

The most obvious way is not to use HTML at all when posting a blog - I was thinking about using markdown instead. But parsing and displaying markdown means having to use .innerHTML anyway:

<script>
    document.getElementById('content').innerHTML =
      marked('# Marked in the browser

Rendered by **marked**.');
  </script>

Is there a way to do it completely without v-html?

question from:https://stackoverflow.com/questions/65900573/display-markdown-without-having-to-use-v-html

Answer 1

You want some user content displayed inside the browser, which works only with HTML (also images etc. but that's not very useful for blog articles). Which means v-html is your only choice...

v-html is not evil, problem is what you put inside. Markdown doesn't save you here as it allows inline HTML

So the only way is to sanitize user content.

As the content is created once and displayed multiple times, it makes sense to do this MD -> HTML transformation + sanitization only once when user is saving new article, save the result somewhere and later used it as a content for v-html