如何用 innerHTML 渲染动态列表并防范 XSS 脚本攻击漏洞

有志者，事竟成！如果你在学习文章，那么本文《如何用 innerHTML 渲染动态列表并防范 XSS 脚本攻击漏洞》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

应优先使用 textContent 或 createElement + append 渲染用户输入，避免 innerHTML 引发 XSS；必须渲染 HTML 时须用 DOMPurify 等库净化；服务端需配合上下文编码与 CSP 头防护。

直接用 innerHTML 渲染用户输入的内容极易引发 XSS 攻击，必须先做内容净化或改用更安全的替代方案。

优先使用 textContent 或 createElement + append

如果只是展示纯文本内容（比如列表项的文字），完全避免 HTML 解析是最稳妥的做法：

• 用 textContent 设置文字内容，浏览器会自动转义所有 HTML 特殊字符（< → <）
• 需要结构化元素时，用 document.createElement 创建节点，再用 textContent 设置子文本，最后 append 到父容器
• 例如渲染用户昵称列表：
  
  
  

  const names = ['Alice', '', 'Bob'];
  const ul = document.getElementById('list');
  names.forEach(name => {
    const li = document.createElement('li');
    li.textContent = name; // 自动转义，脚本不会执行
    ul.append(li);
  });

若必须渲染可信 HTML，严格限制来源并手动过滤

仅当业务强依赖富文本（如后台管理员发布的公告），且内容来源绝对可控时，才考虑净化后使用 innerHTML。切勿对用户直填内容这么做：

• 禁用所有事件属性（onclick、onerror 等）、'; const clean = DOMPurify.sanitize(dirty); // → '
  Hello
  ' list.innerHTML = clean;

服务端配合：永远不要信任客户端过滤