应优先用textContent处理纯文本，富文本必须经DOMPurify白名单净化；动态拼接需先HTML编码，事件绑定须用委托；配合CSP与Trusted Types构成纵深防御。
用 innerHTML 批量生成结构本身很高效，但直接拼接用户数据极易引发 DOM-based XSS。关键不是“能不能用”，而是“怎么安全地用”——纯文本走 textContent，富文本必须净化，动态列表要一次性赋值+事件委托。
批量生成结构：一次拼完，别循环累加
大量数据渲染时，innerHTML 比逐个 createElement 快，但必须避免在循环中反复赋值或用 += 累加字符串。每次修改都会触发重排重绘，性能差且易出错。
- 先用
Array.map()生成所有项的 HTML 字符串数组，再用.join('')合并成完整片段 - 最后只执行一次
element.innerHTML = htmlString - 示例：
const html = data.map(item => `<li>${escapeHtml(item.title)}<button data-id="${item.id}">删</button></li>`).join('');<br>listEl.innerHTML = html;
防范XSS：分场景选对方法，不靠侥幸
所有来自用户、URL、localStorage 或 API 的数据，都默认不可信。防御不能只靠“过滤 script 标签”，而要按上下文严格处理。
- 纯文本展示（如用户名、提示语、搜索词）→ 一律用
element.textContent = userInput，浏览器不解析任何标签 - 必须插入 HTML（如后台返回的富文本）→ 用
DOMPurify.sanitize(dirty, { ALLOWED_TAGS: ['p','b','i'], ALLOWED_ATTR: ['class'] })白名单净化，禁用on*和javascript: - 动态拼进 HTML 字符串里的变量 → 必须先做 HTML 实体编码，例如：
function escapeHtml(str) { return String(str).replace(/&/g, '&').replace(/, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, '''); }
动态元素事件绑定：用事件委托，别绑死节点
通过 innerHTML 插入的按钮、链接等，在插入前根本不存在，无法直接 addEventListener。硬遍历再绑定不仅冗余，还容易漏掉后续新增项。
立即学习“Java免费学习笔记（深入）”；
- 在父容器上监听事件，用
event.target.matches('button[data-id]')判断点击目标 - 避免写
onclick="del(${id})"这类内联脚本——结构和逻辑混杂，引号一多就崩，还可能执行任意代码 - 示例：
listEl.addEventListener('click', e => {<br> if (e.target.matches('button[data-id]')) {<br> const id = e.target.dataset.id;<br> deleteItem(id);<br> }<br>});
额外防线：CSP + Trusted Types（生产环境必加）
前端防护再严，也建议加上服务端下发的 Content-Security-Policy 响应头，比如：Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-eval';
- CSP 能阻断内联脚本、eval 和未授权外链资源，大幅降低 XSS 成功率
- 启用
Trusted Types可强制要求所有传给innerHTML的值必须是TrustedHTML类型，从 API 层杜绝非可信字符串流入 - 现代框架（Vue/React）的
v-html或dangerouslySetInnerHTML不是“免死金牌”，它们只是绕过默认转义的开关，传入内容仍需经 DOMPurify 处理
