简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Q&A  >  body text

Safely display Markdown as HTML in Vue3

So I have a set of strings with some "custom markdown" that I created. My intention is to render these strings to HTML on the front end. Let's say I have this string: 

This is a string <color>that I need</color> tonrender <caution>safely in the browser</caution>. This is some trailing text

I was hoping for something like: 

This is a string <span class="primaryColor">that I need</span> to<br>render <div class="caution">safely in the browser</div>. This is some trailing text

What I do now is to use some basic regular expressions: 

toHtml = text
    .replace(/<color>(.*)</color>/gim, "<span class='primaryColor'></span>")
    .replace(/\n/g, "<br>")
    .replace(/<caution>(.*)</caution>/gims, "<div class='caution'></div>")

This works fine and returns the correct string. Then to print, in the template I just: 

<div id="container" v-html="result"></div>

My problem is that at some point I want the user to be able to enter these strings themselves and have this be displayed to other users as well. So for sure I'm vulnerable to XSS attacks.

Are there any alternatives to avoid this? I've been looking at https://github.com/Vannsl/vue-3-sanitize and this looks to be allowing the div, span and br# I'm using Good approach for ## tags and setting the properties of all tags to allow only class. Is this safe enough? Is there anything else I should do?

In this case, I believe there is no need to clean it up on the backend, right? That is, even if the string in the server contains

, the web browser cannot execute the malicious code, right?

P粉616383625P粉616383625283 days ago367

reply all(1)I'll reply

  • P粉323050780

    P粉3230507802024-01-11 11:39:21

    My problem is that at some point I want the user to be able to enter these strings themselves

    So, do we have a form input for the user to enter the string you mentioned in your post? If yes, my suggestion is that you can sanitize the user input first before passing it to the backend. Therefore the backend itself should not store malicious code.

    So, by using the string.replace() method. You can replace ex's malicious tag first. Extract