如何构建一个安全的JavaScript应用程序以防止常见攻击？

构建安全的 JavaScript 应用程序需从开发初期规划安全策略，结合技术防护与规范流程，重点防范 XSS（跨站脚本攻击）、CSRF（跨站请求伪造） 等常见攻击。以下是具体实践方案：

XSS 攻击通过注入恶意脚本窃取用户数据或操控会话，需从输入、输出、渲染三方面防护：

• 输入过滤与转义

  对所有用户输入（如表单、URL 参数）进行转义或过滤，使用 DOMPurify 等库清理富文本内容，避免直接执行未经验证的 HTML/JS。

  禁用 innerHTML、document.write() 等直接渲染 HTML 的方法，优先使用 textContent 或安全的 DOM 操作 API。

• 输出编码

  在模板引擎（如 Handlebars、React JSX）中启用自动转义功能，确保动态内容以文本形式输出而非可执行代码。

• 内容安全策略（CSP）

  通过 HTTP 头 Content-Security-Policy 限制脚本来源，例如：Content-Security-Policy: default-src 'self'; script-src 'self'

  https://trusted.cdn.com

  禁止内联脚本（'unsafe-inline'）和未授权的外部资源，减少攻击面。

CSRF 攻击利用用户已登录的会话执行非预期操作，需通过令牌验证和 Cookie 属性防护：

• CSRF Token 验证

  在敏感操作（如修改密码、转账）的表单中嵌入一次性令牌，服务端校验令牌有效性后再处理请求。

• SameSite Cookie 属性

  设置 Cookie 的 SameSite 属性为 Strict 或 Lax，防止浏览器在跨站请求中自动携带 Cookie：Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict

  结合 HttpOnly 和 Secure 属性，禁止 JavaScript 访问 Cookie 并确保仅通过 HTTPS 传输。

• 双重提交 Cookie 模式

  要求客户端在请求头（如 X-CSRF-Token）和 Cookie 中同时提交令牌，服务端验证两者一致性。

• 前后端双重验证

  前端通过正则表达式或表单校验库（如 Yup）进行初步验证，后端使用白名单机制限制字符、格式和长度，避免依赖前端验证作为唯一防线。

• 防止注入攻击

  避免拼接用户数据到 SQL 查询或命令行，使用参数化查询（如 PreparedStatement）或 ORM 框架（如 Sequelize、TypeORM）。

  对文件上传功能限制文件类型和大小，防止上传恶意脚本。

• 敏感逻辑后端化

  权限判断、业务规则验证等核心逻辑必须在服务端完成，前端仅用于展示和交互优化。例如，用户权限校验需通过 API 请求服务端接口，而非依赖前端状态。

• 全程 HTTPS 加密

  强制使用 HTTPS 协议，配置 HSTS（HTTP Strict Transport Security）头，防止中间人攻击或协议降级。

• 避免前端存储敏感数据

  短期 Token 存入 HttpOnly Cookie，长期凭证（如 API 密钥）仅保存在服务端。禁用 localStorage 或 sessionStorage 存储敏感信息。

• 依赖库更新与漏洞扫描

  定期更新前端框架（如 React、Vue）和第三方库，使用 npm audit 或工具（如 Snyk、Dependabot）扫描已知漏洞。

• 代码审计与渗透测试

  定期进行代码审查，检查安全编码规范（如输入验证、权限控制）的执行情况。

  通过渗透测试模拟攻击场景，验证防护措施的有效性。

• 关注安全指南

  参考 OWASP Top 10 了解最新威胁，结合 MDN Web Docs 或 Google Chrome DevTools 调试安全策略。

• 禁用调试信息

  生产环境移除 console.log()、错误堆栈等调试信息，防止泄露敏感数据或应用逻辑。

• 限制 API 访问频率

  对高频请求（如登录、短信验证）实施限流策略，防止暴力破解或 DDoS 攻击。

• 安全头配置

  补充其他安全头（如 X-Content-Type-Options: nosniff、X-Frame-Options: DENY）增强防护。

通过以上措施，可显著提升 JavaScript 应用程序的安全性。安全是一个持续过程，需结合技术防护、规范流程和定期评估，形成闭环管理。