在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 绑定该字符串，而不会造成任何损害。