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

作者：袖梨 2026-08-07

处理如何用 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', '<script>alert(1)</script>', 'Bob'];const ul = document.getElementById('list');names.forEach(name => {  const li = document.createElement('li');  li.textContent = name; // 自动转义，脚本不会执行  ul.append(li);});

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

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

禁用所有事件属性（onclick、onerror 等）、<script>、<iframe>、javascript: 协议等危险标签和行为
推荐使用成熟库如 DOMPurify，它专为浏览器端 HTML 净化设计，轻量且更新及时

简单示例（需引入 DOMPurify）：

const dirty = '<div onclick="alert(1)">Hello</div><script>fetch("/xss")</script>';const clean = DOMPurify.sanitize(dirty); // → '<div>Hello</div>'list.innerHTML = clean;

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

前端净化只是最后一道防线。XSS 防御必须前后端协同：

后端返回给前端的数据，应默认做上下文相关的编码（如 JSON 字符串中对 <、>、& 转义）
若接口返回的是预渲染 HTML，后端必须使用服务端净化库（如 Python 的 bleach、Node.js 的 sanitize-html）处理后再下发
设置响应头 Content-Security-Policy: default-src 'self' 可大幅降低 XSS 成功概率，尤其阻止内联脚本和未授权外链