搜索

首页  >  问答  >  正文

在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粉616383625350 天前441

全部回复(1)我来回复

  • P粉323050780

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

    我的问题是，在某些时候我希望用户能够自己输入这些字符串

    那么，我们是否有一个表单输入供用户输入您在帖子中提到的字符串？如果是，我的建议是您可以在传递到后端之前首先清理用户输入。因此后端本身不应存储恶意代码。

    因此，通过使用 string.replace() 方法。您可以先替换 ex 的恶意标签。从输入字符串中提取