用代码守护网页安全：HTML 注入与 XSS 防护实操指南

在日常做前端或维护网站时，你经常会与用户输入打交道。当这些输入未经处理就被直接拼接到页面、脚本或属性中，就可能为 XSS（跨站脚本攻击）打开大门。XSS 不像 CSRF 那样总需要后端配合，它可以在浏览器里直接发生，悄无声息地窃取信息、发起重定向或破坏页面内容。

问题的由来：为什么输入会被滥用

想象你在评论区输入“”，这段代码被页面当作图片加载，一旦被直接渲染，就会在用户不知情时弹出警告框。这背后的关键，是开发者把用户输入当作“干净”的 HTML/JS 文本，直接拼接到页面上，缺少转义、过滤与同源策略配合。

核心防护：输出编码与上下文

选择合适的编码

根据输出位置决定编码方式。URL 与属性中要用 HTML 编码，防止字符被浏览器解析为标签或脚本；在页面内容区域，要使用 HTML 上下文的转义（如 <、>），确保用户输入只呈现为文本。使用 JS 上下文的编码（如 escape、encodeURIComponent）来处理脚本字符串，避免字符串被当作可执行代码。

渲染为文本

把用户输入当作文本渲染的场景，如评论展示、公告列表，要强制转义，使其只显示字符内容，不执行任何脚本。这能显著降低注入风险。

限制输入范围

不要指望转义能解决一切。对输入做范围限制，过滤掉不安全的字符与模式，只保留字母、数字、空格、基本符号，能有效减少攻击面。

机制加固：同源与内容安全

• 同源策略：严格限制从不同源加载的脚本与样式，尤其是内联脚本与事件处理。对关键资源启用 CSP（内容安全策略），明确允许的源与执行上下文，能拦截非法脚本的执行。
• 内联脚本限制：尽量减少内联