JavaScript 的网络安全：如何防范常见的 XSS 与 CSRF 攻击？

防范 XSS 与 CSRF 攻击需结合输入处理、安全策略、前后端协同验证及现代框架特性，以下为具体措施：

一、XSS 攻击防范

XSS（跨站脚本）通过注入恶意脚本窃取用户数据或执行非法操作，分为存储型、反射型和 DOM 型。防御核心是阻止恶意脚本执行，具体措施如下：

输入转义与过滤
服务端或前端渲染前，将特殊字符（如 <、>、&）转为 HTML 实体（如 <、>），避免直接解析为脚本。
使用库如 DOMPurify 清理富文本内容，移除潜在恶意代码。
示例：用户输入 <script>alert(1)</script> 转义后显示为文本而非脚本。
设置 Content Security Policy (CSP)
通过 HTTP 头 Content-Security-Policy 限制资源加载来源，禁止内联脚本执行。
示例配置：Content-Security-Policy: default-src 'self'; script-src 'self'
https://trusted.cdn.com
仅允许同源脚本和可信 CDN 加载，阻断外部恶意脚本。
避免危险 API
禁用 innerHTML、document.write() 或 React 的 dangerouslySetInnerHTML，优先使用 textContent 或框架的安全渲染机制（如 React/Vue 的模板自动转义）。
示例：用 element.textContent = userInput 替代 element.innerHTML = userInput。
HttpOnly Cookie
对会话 Cookie 设置 HttpOnly 标志，禁止 JavaScript 读取，防止会话劫持。
示例：Set-Cookie: sessionId=abc123; HttpOnly; Secure。

二、CSRF 攻击防范

CSRF（跨站请求伪造）利用用户身份诱导发送非自愿请求，防御核心是验证请求来源合法性，具体措施如下：

Anti-CSRF Token
服务器生成随机 Token，嵌入表单或响应头（如 X-CSRF-Token），用户提交请求时需携带该 Token。
服务端验证 Token 匹配性，防止伪造请求。
示例：<form action="/transfer" method="POST"> <input type="hidden" name="csrfToken" value="abc123"> </form>
SameSite Cookie 属性
设置 Cookie 的 SameSite=Strict（完全禁止跨站携带）或 Lax（允许部分安全跨站，如导航跳转）。
示例：Set-Cookie: sessionId=abc123; SameSite=Lax; Secure。
验证 Origin/Referer 头
服务端检查请求头中的 Origin 或 Referer，确认请求来自合法域名。
局限性：用户可能禁用 Referer 或攻击者伪造头信息，需作为辅助手段。
敏感操作二次验证
对修改密码、转账等操作，增加验证码、短信确认或生物识别步骤，确保用户意图真实。

三、前后端协同防护

安全需贯穿开发全流程，前后端共同承担责任：

前端防护
限制输入格式（如正则校验邮箱、手机号），提前拦截异常数据。
使用现代框架的安全特性：
React/Vue 模板自动转义变量，避免 XSS。
Express 的 csurf 中间件或更新方案（如 csrf-csrf）生成 Token。
后端防护
所有输入重新验证：不信任前端过滤结果，服务端需二次校验数据格式、长度、类型。
API 默认启用 CSRF 保护：尤其对状态变更请求（POST/PUT/DELETE）强制验证 Token。
输出编码：根据上下文（HTML/JavaScript/URL）对输出数据进行适当编码，防止解析为恶意代码。
安全开发实践
定期更新依赖库，修复已知漏洞。
使用自动化工具扫描代码（如 ESLint 安全插件、OWASP ZAP）检测潜在风险。
设计阶段融入安全思维，避免引入高危模式（如动态拼接 SQL/脚本）。

四、总结

XSS 与 CSRF 防御需多层次协同：

安全非一次性配置，而是贯穿设计、编码、测试、部署的全生命周期过程。通过技术手段与安全意识结合，可显著降低攻击风险。

热门标签