textcontent 比 innerhtml 安全，因为它将内容视为纯文本，不解析任何 html 标签或脚本；即使输入恶意代码如 alert(1)，也仅显示为字符串而不执行。
textContent 为什么比 innerHTML 安全
因为 textContent 把所有内容当纯文本处理，浏览器不会解析其中的任何标签或脚本。哪怕用户输入的是 <script>alert(1)</script>，页面只会显示这串字符本身，绝不会执行。
常见错误是用 innerHTML 渲染昵称、评论、搜索关键词等——只要输入里带 <img src="x" onerror="fetch('/api/token')"> 这类字符串，就可能静默泄露凭证。
实操建议：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 所有仅需展示文字的场景（如用户昵称、表单提示、API 返回的
data.title），一律用textContent - 避免混用：
innerText不推荐，它受 CSS 样式影响（比如display: none的内容不计入），且在旧版 IE 和现代浏览器中行为不一致 - 框架里也要注意：React 的
dangerouslySetInnerHTML、Vue 的v-html都绕过了默认防护，用之前必须确认内容已由服务端净化或前端 DOMPurify 处理过
必须用 innerHTML 时怎么安全地 sanitize
富文本编辑器输出、Markdown 渲染结果、服务端已清洗过的 HTML 片段——这些场景确实需要保留格式，textContent 会破坏结构，但直接赋值给 innerHTML 就等于开门揖盗。
关键不是“过滤 script 标签”，而是白名单式净化：只允许明确列出的标签和属性，其余一概剔除。
实操建议：
- 前端用
DOMPurify.sanitize(dirtyHTML)，不要手写正则或字符串替换。例如：DOMPurify.sanitize(dirty, {ALLOWED_TAGS: ['p', 'br', 'strong', 'a'], ALLOWED_ATTR: ['href']}) - 对
a[href]这类 URL 属性，额外校验协议：只允许https://、http://或/开头，拒绝javascript:、data:、vbscript: - 禁止启用
FORBID_TAGS: ['script']这类黑名单模式——DOMPurify 默认禁用高危标签，重点是显式声明ALLOWED_TAGS，而不是靠“堵漏”思维 - 净化后的结果，不能再塞进
eval、setTimeout、location.href等执行上下文，否则等于前功尽弃
服务端转义和前端转义不是二选一
服务端转义（如 PHP 的 htmlspecialchars、Python 的 html.escape）防的是模板直出时的注入；前端转义（如 textContent 或 DOMPurify）防的是 JS 动态渲染环节的注入。两者职责不同，缺一不可。
典型误区是：“后端已经转义了，前端随便拼接都行”。错——JSON 数据本身安全，但一旦 JSON.parse() 后直接塞进 innerHTML，就脱离了安全上下文。
实操建议：
- 服务端模板（Jinja2、Django、EJS）务必启用默认转义：用
{{ user_input }}，而非{{ user_input | safe }}或 - Node.js 前端若用
he.escape()，注意它只处理 5 个基础字符（、<code>>、&、"、'），不覆盖 Unicode 编码变体或注释内藏标签等边界情况 - 轻量级前端转义推荐 DOM 构造法：
function htmlEscape(str) { const el = document.createElement('div'); el.textContent = str; return el.innerHTML; }——兼容性好、无依赖、天然抗各种编码绕过
CSP 是兜底，不是主力防护
Content-Security-Policy 响应头能限制脚本加载来源、禁止内联执行、拦截危险协议，但它不修复漏洞本身。攻击者仍可通过 fetch 泄露数据、触发 CSRF、或用 img 打点收集行为。
常见配置陷阱是开了 'unsafe-inline' 或 'unsafe-eval'，或者把 script-src 设成 *，等于形同虚设。
实操建议：
- 最小权限原则：
default-src 'self'+ 显式放行必要 CDN，例如script-src 'self' https://cdn.example.com - 彻底移除
'unsafe-inline'：事件处理器（onclick）、style标签、javascript:协议全部禁用 - 富文本需执行脚本时，用
nonce而非'unsafe-inline'：Content-Security-Policy: script-src 'nonce-<font color="green">随机生成的一次性值</font>'，并在对应<script nonce="..."></script>中匹配 - CSP 配合
report-uri或report-to收集违规行为，但别指望它替代编码层防护
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
