可以在 VueJS 中不使用 v-html 解析来自 html 编辑器的文本吗？

Question

我的项目有管理面板和主页。在管理面板上，我可以使用 HTML 编辑器（本例中为 VueEditor）创建帖子，在数据库中的帖子如下所示：

<p>Here is some test text from VueEditor</p>

然后，我想解析它一个主页，但是，当然，没有<p>标签，所以我用这个：

<p v-html='item.plot'></p>

这是一个问题，IDE 告诉我们：

ESLint: 'v-html' directive can lead to XSS attack.(vue/no-v-html)

真的有那么危险吗？我应该以其他方式解析它吗？

Answer 1

是的，真的那么危险。

考虑一下我创建帖子时会发生什么。

Hi I'm Dave this is my <script>alert('pwned,' + document.cookie)</script> post!

我现在可以在您的网站上运行任意 JS 代码，并窃取您提供此代码的每个用户的登录信息。

我对 vue 不是特别熟悉，但大多数框架都有一种简单的方法来输出经过处理的 html。我认为这是 vue 中的{{ itme.plot }}。这不会呈现实际（或任何其他标记），而是呈现转义版本 <script>，浏览器不会将其解释为实际代码。

如果你让我在你的网站中注入我自己的 HTML，那么还有一百万种其他方法可以实现 XSS。