在Vue3中安全地顯示Markdown為HTML

Question

所以我有一組字串，其中有一些我創建的「自訂降價」。我的目的是在前端將這些字串呈現為 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 瀏覽器也無法執行惡意程式碼，對嗎？

Answer 1

我的問題是，在某些時候我希望使用者能夠自己輸入這些字串

那麼，我們是否有一個表單輸入供用戶輸入您在帖子中提到的字串？如果是，我的建議是您可以在傳遞到後端之前先清理使用者輸入。因此後端本身不應儲存惡意程式碼。

因此，透過使用 string.replace() 方法。您可以先替換 ex 的惡意標籤。從輸入字串中提取 、 等，然後將其儲存在資料庫中。

您可以遵循的步驟：

• 建立一個 blacklist 變量，其中包含不允許的字元/字串的正規表示式。
• 透過使用 string.replace()，根據黑名單正規表示式將字串中出現的所有可用字元替換為空字串。
• 將清理後的字串儲存在資料庫中。

這樣，您就不必擔心來自後端的字串，並且可以透過 v-html 綁定該字串，而不會造成任何損害。