vue-i18n中HTML标签渲染失效怎么办？

Question

在使用 vue-i18n 进行国际化时，若翻译文本中包含 HTML 标签（如 `
`、`` 等），默认情况下这些标签会被当作纯文本渲染，导致标签无法解析为实际的 HTML 元素，造成样式或结构失效。例如，配置了 `message: '欢迎
登录'`，页面会直接显示 `
` 字符而非换行。该问题源于 vue-i18n 为防止 XSS 攻击，默认对内容进行 HTML 转义。如何安全地渲染内嵌 HTML 标签成为常见痛点。

Answer 1

一、问题背景与核心痛点

在现代前端开发中，国际化（i18n）已成为多语言应用的标配。Vue 生态中的 vue-i18n 是最广泛使用的国际化插件之一。然而，当翻译文本中包含 HTML 标签（如 <br>、<strong>、<a> 等）时，默认行为会将这些标签转义为纯文本输出，导致无法实现预期的结构或样式。

例如，在配置如下翻译消息时：

{
  "welcome": "欢迎
登录系统"
}

若在模板中使用 {{ $t('welcome') }}，页面将显示为“欢迎<br>登录系统”，而非换行效果。这一行为源于 vue-i18n 的安全机制——默认对所有插值内容进行 HTML 转义，以防止跨站脚本攻击（XSS）。

二、从浅入深：理解渲染机制的演进

1. 第一阶段：直接插值（v-text / {{ }}） —— 所有内容被自动转义，HTML 标签失效。
2. 第二阶段：使用 v-html —— 可解析 HTML，但存在 XSS 风险，需谨慎处理来源。
3. 第三阶段：vue-i18n 的 rich formatting 功能 —— 提供安全的占位符插值机制，支持组件嵌入。
4. 第四阶段：自定义渲染器 + 白名单过滤 —— 在保留灵活性的同时增强安全性。

三、常见解决方案对比分析

方案	实现方式	安全性	灵活性	维护成本
使用 v-html	v-html="$t('message')"	低（易受 XSS 攻击）	高	低
rich formatting（命名插槽）	<i18n-t keypath="welcome"><template #action><strong>登录</strong></template></i18n-t>	高	中	中
自定义组件 + 插槽	封装可复用的 i18n-html 组件	可控（依赖实现）	高	高
正则替换 + 安全 sanitizer	预处理文本并过滤危险标签	中（取决于 sanitizer）	中	中

四、推荐实践：基于 vue-i18n 9+ 的 rich formatting 方案

从 vue-i18n v9 开始，官方引入了 <i18n-t> 组件，支持通过具名插槽注入 Vue 组件，从而安全地嵌入 HTML 结构。

示例配置：

{
  "welcome_with_link": "点击 {action} 进入系统"
}

模板中使用：

<i18n-t keypath="welcome_with_link" tag="div">
  <template #action>
    <a href="/login">这里</a>
  </template>
</i18n-t>

此方式避免了直接操作 innerHTML，且所有动态内容均由开发者显式控制，极大提升了安全性。

五、高级场景：动态富文本渲染流程图

对于需要动态插入复杂 HTML 的场景，建议采用以下处理流程：

graph TD
    A[获取翻译文本] --> B{是否包含HTML标签?}
    B -- 否 --> C[直接渲染]
    B -- 是 --> D[判断来源是否可信]
    D -- 不可信 --> E[使用DOMPurify等库清洗]
    D -- 可信 --> F[使用或v-html]
    F --> G[渲染到页面]
    E --> G
    G --> H[监控异常行为]
    

六、安全加固策略

• 禁止用户输入直接作为翻译源内容。
• 使用 DOMPurify 对需渲染的 HTML 进行净化处理。
• 在 CI/CD 流程中加入 i18n 文件的静态扫描，检测潜在的恶意标签。
• 对使用 v-html 的组件添加注释和审查标记。
• 建立团队内部的 i18n 安全编码规范。
• 优先使用组件化插值而非字符串拼接。
• 避免在翻译文件中硬编码 URL 或敏感信息。
• 启用 Content Security Policy (CSP) 减少执行风险。

七、性能与可维护性考量

虽然 <i18n-t> 提供了安全的渲染能力，但在大规模应用中可能带来模板冗余。建议：

• 抽象通用模式为高阶组件（如 I18nBold、I18nLink）。
• 使用 Composition API 封装复用逻辑。
• 对频繁使用的富文本片段进行缓存处理。
• 结合 TypeScript 定义严格的 keypath 类型，提升类型安全。