搜尋

首頁  >  問答  >  主體

在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 瀏覽器也無法執行惡意程式碼，對嗎？

P粉616383625P粉616383625325 天前414

全部回覆(1)我來回復

  • P粉323050780

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

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

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

    因此，透過使用 string.replace() 方法。您可以先替換 ex 的惡意標籤。從輸入字串中提取