在 Vue-i18n 中向具名参数插入 HTML 的终极指南：防止 XSS 攻击

Vue-i18n 中具名参数的 HTML 插入：终极指南

前言

在国际化应用程序中，当我们希望向已本地化的消息注入 HTML 时，可能会遇到困难。Vue-i18n 提供了具名参数来动态插入文本内容，但当涉及到 HTML 时，事情就变得复杂了。

问题

假设我们有以下消息对象：

{ greetings: '{blah} is welcome'}

我们希望将 HTML 注入 {blah} 参数。以下代码段不起作用：

{{ $t('greetings', {blah: '<foo>' + some_string + '</foo>'}) }}

解决方案：原始函数

为了在具名参数中注入 HTML，我们需要使用原始函数 。原始函数将字符串原样呈现，而不进行任何转义或插值。

{{ $t('greetings', {blah: $options.filters.raw('<foo>' + some_string + '</foo>')}) }}

上面的代码段中，$options.filters.raw() 函数将 HTML 字符串标记为原始字符串，从而防止它被转义。

示例

const i18n = new VueI18n({
  locale: 'en',
  messages: {
    en: {
      greetings: '{blah} is welcome'
    }
  }
})

new Vue({
  i18n,
  data() {
    return {
      some_string: 'John Doe'
    }
  },
  template: `
    <p>{{ $t('greetings', {blah: $options.filters.raw(`<foo>John Doe</foo>`)}) }}</p>
  `
}).$mount('#app')

输出：

<p><foo>John Doe</foo> is welcome</p>

注意事项

使用原始函数时，需要注意以下事项：

• 安全问题： 仅将受信任的 HTML 字符串标记为原始字符串，以避免跨站脚本 (XSS) 攻击。
• 转义属性： 原始函数不会转义 HTML 属性。如果需要转义属性值，请使用 $attrs 对象。

结论

通过使用原始函数，我们可以在 Vue-i18n 中轻松地向具名参数注入 HTML。这使我们能够在本地化的消息中包含动态生成的或用户提供的 HTML 内容。

常见问题解答

1. 为什么使用原始函数而不是直接注入 HTML？
   原始函数可确保安全性，防止跨站脚本 (XSS) 攻击。
2. 我可以用原始函数注入任何 HTML 吗？
   是的，但仅限于受信任的来源。
3. 我可以使用原始函数转义 HTML 属性吗？
   不，使用 $attrs 对象转义属性值。
4. 原始函数是否会影响其他 Vue-i18n 功能？
   不会，它只影响原始字符串。
5. 如何测试原始函数？
   使用 Jest 等测试框架，断言输出的 HTML 与预期结果匹配。