无需使用 v-html 即可显示降价

Question

我有一个“博客”类网站，用户可以在其中 post 使用所见即所得的新博客，然后将它们显示在网站上。

问题是我希望它是 XSS 安全的，我根本不想使用 v-html 或 .innerHTML - 这可能吗？

最明显的方法是在 post 写博客时完全不使用 HTML - 我正在考虑改用 markdown。但是解析和显示 markdown 意味着无论如何都必须使用 .innerHTML:

<script>
    document.getElementById('content').innerHTML =
      marked('# Marked in the browser\n\nRendered by **marked**.');
  </script>

有没有办法在没有 v-html 的情况下完全做到这一点？

Answer 1

您希望在浏览器中显示一些用户内容，这仅适用于 HTML（还有图像等，但这对博客文章不是很有用）。这意味着 v-html 是您唯一的选择...

v-html不是邪恶的，问题是你放的是什么东西。 Markdown 不会在这里保存你，因为它 allows inline HTML

所以唯一的办法就是sanitize user content。

由于内容创建一次，显示多次，因此在用户保存新文章时只进行一次 MD -> HTML 转换 + 清理是有意义的，将结果保存在某处，稍后使用作为 v-html

的内容

Display markdown without having to use v-html