如何在JavaScript中正确转译HTML？

在Web开发中,HTML转译（HTML Escaping）是保障网站安全与功能完整性的重要步骤，尤其在用户输入内容动态渲染到页面时，未正确转译的HTML可能引发XSS（跨站脚本攻击）破绽，导致数据泄露或用户隐私风险，以下从技术原理、实践方法和行业规范角度展开说明。

什么是HTML转译？

HTML转译指将特殊字符转换为对应的HTML实体（HTML Entity），防止浏览器将其解析为代码。

• < 转译为 <
• > 转译为 >
• & 转译为 &
• 转译为 "
• 转译为 '

示例场景：
用户提交评论 <script>alert('hack')</script>，若未转译直接渲染，脚本会被执行；转译后显示为纯文本，避免攻击。

为何必须转译HTML？

1. 安全防御
   XSS攻击位列OWASP十大安全威胁，转译是阻断反面脚本的第一道防线，兼容性**
   用户输入若包含<div>等字符，可能破坏页面结构，转译确保内容按预期显示。
2. 符合标准规范
   W3C建议动态内容需转译，避免渲染歧义。

JavaScript中实现HTML转译的方法

手动替换（基础方案）

function escapeHTML(str) {
  return str.replace(/[&<>"']/g, (match) => ({
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;'
  }[match]));
}
console.log(escapeHTML('<div>Test&</div>')); 
// 输出 &lt;div&gt;Test&amp;&lt;/div&gt;

适用场景：简单文本处理，但无法覆盖所有边缘情况（如Unicode字符）。

使用DOM API

通过浏览器内置的textContent属性自动转译：

const element = document.createElement('div');
element.textContent = userInput;
const safeHTML = element.innerHTML;

优势：原生支持，无需维护正则表达式。

第三方工具库

• Lodash的_.escape()

  import _ from 'lodash';
  console.log(_.escape('Hello <world> & friends')); 
  // 输出 Hello &lt;world&gt; &amp; friends

• DOMPurify
  提供更严格的白名单过滤，适用于富文本场景：

  const cleanHTML = DOMPurify.sanitize(dirtyHTML);

模板引擎内置转义

现代框架（如React、Vue、Angular）默认转译动态内容：

// React示例
function Component({ text }) {
  return <div>{text}</div>; // 自动转译
}

行业最佳实践

1. 分层防御
   前端转译不能替代后端验证，需结合输入过滤与输出编码（如CSP策略）。
2. 避免过度转义
   重复转义会导致显示异常（如&）。
3. 测试覆盖
   使用单元测试验证转译逻辑，覆盖边界用例：

   test('escapeHTML converts < to &lt;', () => {
     expect(escapeHTML('<')).toBe('&lt;');
   });

4. 关注性能
   高频场景优先选择原生API或编译时转译（如静态站点生成）。

转译与编码的区别

可视化效果对比

用户输入：<img src="x" onerror="alert(1)">
渲染结果：![触发XSS弹窗](模拟弹窗示意图)

用户输入：<img src="x" onerror="alert(1)">
渲染结果：<img src="x" onerror="alert(1)">

参考文献

• OWASP XSS防护指南: 链接
• MDN Web文档-Escaping: 链接
• Lodash官方文档: 链接