如何防御 XSS（跨站脚本攻击）：前端开发者必须掌握的安全实践

在 Web 开发中，XSS（Cross-Site Scripting，跨站脚本攻击） 是最常见、危害也非常大的安全漏洞之一。
一旦网站存在 XSS 漏洞，攻击者就可能在用户浏览器中执行恶意脚本，进而窃取 Cookie、劫持会话、篡改页面内容，甚至控制用户账号。

本文将从 原理 + 实战防御手段 的角度，系统讲解前端和全栈开发中 如何有效防御 XSS 攻击

一、什么是 XSS 攻击？

XSS 的本质是：

攻击者将恶意 JavaScript 注入到网页中，并在其他用户的浏览器里执行。

常见的 XSS 攻击类型包括：

反射型 XSS：恶意脚本来自 URL 参数
存储型 XSS：恶意脚本被存储在数据库中
DOM 型 XSS：前端 JS 逻辑直接操作不可信数据

不论是哪种形式，核心问题都在于：
👉 用户输入被当作代码执行了

二、输入验证和过滤（最基础也是最重要）

永远不要相信用户输入。

1. 前端层面的基本校验

在前端可以做一些基础校验，例如：

限制输入长度
限制输入格式（如邮箱、手机号）
过滤明显的危险字符

示例（仅用于基础校验）：

1
2
3

function sanitizeInput(input) {
  return input.replace(/[<>]/g, '');
}

⚠️ 注意：
前端校验只能作为用户体验优化，不能作为最终安全防线。

2. 后端必须做严格校验（关键）

真正有效的输入验证 必须在后端完成：

校验数据类型
校验长度
拒绝不符合业务规则的输入
对 HTML 内容进行转义或白名单过滤

推荐策略：

默认拒绝
白名单优先

三、对输出进行编码（比过滤更重要）

很多 XSS 漏洞并不是“输入有问题”，而是输出方式不安全。

1. HTML 转义输出

在将用户输入输出到页面时，应进行 HTML 编码：

原字符	转义后
`<`	`<`
`>`	`>`
`"`	`"`
`'`	`'`

很多模板引擎（如 Vue、React、Handlebars）默认会做转义，不要轻易关闭。

2. 避免危险 API

尽量避免以下写法：

1	element.innerHTML = userInput;

推荐安全方式：

1	element.textContent = userInput;

或者：

1
2
3

const el = document.createElement('div');
el.textContent = userInput;
container.appendChild(el);

四、使用安全的 API 和框架机制

现代前端框架本身已经内置了大量 XSS 防护机制。

1. React / Vue 的默认保护

JSX / 模板语法默认转义
明确标注危险行为（如 v-html、dangerouslySetInnerHTML）

⚠️ 一旦使用这些 API，就必须 100% 确保内容可信

2. 避免在前端拼接 HTML 字符串

错误示例：

1	container.innerHTML = `<div>${userInput}</div>`;

正确做法：

1
2
3

const div = document.createElement('div');
div.textContent = userInput;
container.appendChild(div);

五、使用内容安全策略（CSP）

CSP（Content Security Policy） 是防御 XSS 的“终极武器”之一。

1. CSP 能做什么？

禁止内联脚本执行
限制脚本来源
阻止恶意第三方资源加载

示例 HTTP 头：

Content-Security-Policy:
  default-src 'self';
  script-src 'self';
  object-src 'none';

即使攻击者成功注入脚本，只要 CSP 生效，浏览器也会拒绝执行。

2. 为什么 CSP 非常重要？

因为它属于：

浏览器层面的安全防护
就算代码有疏漏，也能兜底

1. HttpOnly 的作用

设置 Cookie 时加上 HttpOnly：

1	Set-Cookie: sessionId=xxx; HttpOnly;

这样可以：

防止 JavaScript 读取 Cookie
即使发生 XSS，也能降低会话被盗风险

2. 配合 Secure 和 SameSite

推荐同时使用：

Secure
SameSite=Strict 或 Lax

提升整体安全等级。

七、定期更新第三方库和依赖

现实中的 XSS 漏洞，大量来自第三方依赖：

旧版本 UI 组件
不再维护的插件
存在漏洞的 npm 包

建议：

定期更新依赖
使用 npm audit
关注安全公告

八、良好的安全编程习惯

最后，防御 XSS 不是“某一个技巧”，而是一整套习惯：

不信任任何外部输入
不随意使用 innerHTML
不忽略安全警告
安全优先于“图方便”

九、总结

XSS 是最常见、也是最危险的 Web 安全问题之一
真正有效的防御需要 前端 + 后端 + 浏览器策略 三层配合
输入校验只是开始，安全输出和 CSP 才是关键
养成良好的安全编程习惯，比任何补丁都重要

对于前端开发者来说，
懂得如何防御 XSS，是走向专业的重要一步。