JavaScript使用innerHTML与textContent的安全风险对比-js教程-PHP中文网

应优先使用 textContent 而非 innerHTML 插入用户输入，因 innerHTML 会解析执行 HTML/JS 导致 XSS，textContent 则自动转义、仅渲染纯文本；需富文本时须用 DOMPurify 等库白名单过滤。

javascript使用innerhtml与textcontent的安全风险对比

直接用 innerHTML 插入用户输入的内容，极大概率导致 XSS（跨站脚本）攻击；而 textContent 会自动转义所有 HTML 字符，天然免疫这类风险。

innerHTML 可能执行恶意脚本

innerHTML 把字符串当作 HTML 解析并渲染。一旦内容含未过滤的用户输入（比如表单提交、URL 参数、API 返回值），攻击者就能注入 <script></script>、onerror、javascript:... 等可执行代码。

例如：el.innerHTML = '' —— 页面加载时自动弹窗
即使看似“安全”的标签（如 ）嵌套事件属性或 SVG 标签，也可能触发执行
服务端做了转义？前端再用 innerHTML 拼接仍可能被绕过（如双重解码、标签闭合逃逸）


textContent 只渲染纯文本
textContent 忽略所有标签语法，把内容当普通字符串处理。尖括号、引号、等号全变成可见字符，不会被浏览器解析为 HTML 或 JS。

											
												
												
													javascript-pro
													专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发
												
												下载
												
											
										

例如：el.textContent = '<script>alert(1)</script>' → 页面显示的就是这串文字，不执行
  适合展示用户昵称、评论、日志、错误提示等无需格式的动态文本
  性能略优于 innerHTML（无 HTML 解析开销），且 DOM 更新更可预测

需要保留 HTML 格式时的安全替代方案
如果业务确实要渲染富文本（如编辑器输出、Markdown 转换结果），不能直接信 innerHTML，必须做严格过滤。

使用成熟库如 DOMPurify 对 HTML 字符串进行白名单净化（只保留 p、strong、a 等安全标签和属性）
  避免手动正则清洗 —— HTML 结构复杂，正则极易漏掉变种 XSS（如 、）
  服务端也应校验并净化，前后端双重防护不能省

其他易被忽略的危险操作
安全不只是 innerHTML 的事，以下写法同样高危：


el.setAttribute('onclick', userInput) —— 属性值可能被解释为 JS
  
location.href = userInput 或 window.open(userInput) —— 可跳转到 javascript:alert()

  
eval()、setTimeout(string, ...)、new Function(string) —— 直接执行字符串代码
  模板字符串拼接 HTML 后赋给 innerHTML（如 el.innerHTML = `${userInput}
`）—— 和直接赋值没区别