我什么时候可以信任我在 Vue 中翻译的内容？

Question

我想验证我在使用 Vue I18n 时对 v-html 和 XSS 问题的理解。

我们有几类内容：

1. 用户提供 - 用户向输入添加文本，数据将按原样显示在页面上

2. 提供的翻译器 - 使用 CMS 的翻译器正在向翻译文件添加内容，然后我们会显示这些值

3. 工程师提供 - 工程师正在将 html 添加到翻译文件中

#1 完全不可信

#2 可能是值得信赖的，但需要审查（我们将生成翻译文件，这些文件将被添加到 PR 以进行正常的代码审查和 QA 流程）

#3 是否值得信赖？工程师在模板中添加 html 与翻译文件之间有区别吗？或者仅仅是 html 可能在翻译文件中的事实让我们容易受到某种利用？

Vue I18n documentation 上有一段说，

...如果您在语言环境消息中配置标签，则有一个 由于本地化而导致 XSS 漏洞的可能性 v-html="$t('term')".

在客户端翻译文件中使用“可信内容”时是否存在固有的 XSS 风险？

编辑：考虑到这一点之后，它变得非常冒险。如果我们允许 v-html 出现在翻译部分，因为我们知道说超链接是可以的，但我们也会显示像 company_name 这样的其他内容，其中可能存在错误内容。

我做了一些检查，看起来 Rails 处理这个问题的方式不同。即使翻译被标记为_html，提供的values仍然被转义，只是内容本身被允许有html。

示例： name = "<b>Name</b>"

导轨 -> foo_html: "hi {name} <u>underlined text</u>" 结果是带下划线的文本，但名称不是粗体，并且显示的内容周围仍然有<b>（它忽略了提供的参数中的html）

Vue I18n -> 带有 v-html -> foo: "hi {name} <u>underlined text</u>" 文字加下划线，名字加粗，不安全

Answer 1

你问了几个问题

只要对来自 #2 的内容进行了恶意内容审核，作为原始 html 使用是否安全？

是和不是。从理论上讲，如果您检查每条消息，并了解每条消息的上下文，并且永远不会有时间限制，因此人们在每次发布之前都会检查每条消息，那么您就可以了。在实践中，人们偷工减料，或者不知道特定消息将作为 html 插入，或者不了解某些字符串如何可能是格式错误的 html，但被浏览器转换为实际上是恶意的有效 html。有人可能会访问您的 CMS 并更改您没想到会更改的翻译字符串。如果配置不正确，有人可能会通过欺骗员工访问 url 在您的 cms 中伪造表单提交。

或者仅仅是 html 可能在翻译文件中的事实使我们容易受到某种利用？

v-html 就是这样。它将未经过滤的 html 放置在您的文档中。

这种可能性是什么，它是如何工作的？

v-html 带有翻译字符串会产生不必要的风险和额外开销，因为它需要具有广泛技术知识的撰稿人来检查每条翻译消息，而您可以让没有任何技术知识的撰稿人这样做。您唯一需要做的就是使用文档中概述的模式，它允许任何人更改可翻译位（将被转义），同时将 html 保留在源代码管理中。