在Vue3中安全地顯示Markdown為HTML
所以我有一組字串，其中有一些我創建的「自訂降價」。我的目的是在前端將這些字串呈現為 HTML。假設我有這個字串：
This is a string <color>that I need</color> tonrender <caution>safely in the browser</caution>. This is some trailing text
我希望得到類似的東西：
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
我現在的做法是使用一些基本的正規表示式：
toHtml = text
.replace(/<color>(.*)</color>/gim, "<span class='primaryColor'></span>")
.replace(/\n/g, "<br>")
.replace(/<caution>(.*)</caution>/gims, "<div class='caution'></div>")
這工作正常並傳回正確的字串。然後進行列印，在模板中我只需：
<div id="container" v-html="result"></div>
我的問題是，在某些時候我希望使用者能夠自己輸入這些字串，而這也會顯示給其他使用者。所以可以肯定的是，我很容易受到 XSS 攻擊。
有什麼替代方法可以避免這種情況嗎？我一直在查看https://github.com/Vannsl/vue-3-sanitize，這看起來是允許我正在使用的div、span 和br 標籤的好方法，並設定所有標籤的屬性僅允許為class。這樣夠安全嗎？我還應該做些什麼嗎？
這樣的話，我相信也沒有必要在後端對其進行清理，對吧？也就是說，即使伺服器中的字串包含 ，Web 瀏覽器也無法執行惡意程式碼，對嗎？
