> 技术文档 > web前端安全开发规范:全方位防护指南_前端安全规范

web前端安全开发规范:全方位防护指南_前端安全规范


一、安全原则说明

原则 补充说明 ‌最小暴露原则‌ 静态资源按需加载(代码分割),API接口按角色授权最小数据集,禁用无关调试接口 ‌零信任设计‌ 后端对所有客户端传入数据(包括Header/URL参数)进行完整性校验(如签名机制)及业务逻辑合法性验证 ‌数据最小化‌ ‌敏感数据(如token)内存存储代替localStorage,生物特征信息禁止前端存储‌ ‌防御为先‌ 输入过滤需覆盖所有入口:URL参数、Headers、Cookie、Post Body、WebSocket消息

二、安全规范细化

2.1 登录态存储优化
场景 关键补充 ‌Web‌ Cookie有效期设置Session级别,__Host-前缀防子域篡改,‌Token自动续期需重新签名防窃取‌ ‌小程序‌ ‌加密存储需使用系统级加密API(如微信小程序wx.setStorageSync的加密模式)‌,内存Token定时刷新 ‌APP‌ Keychain访问需绑定生物认证,‌每次使用Token前验证设备指纹‌防越权
2.2 核心攻击面防护强化
  • XSS深度防御
    • 动态内容渲染强制使用安全API:Vue用{{ }}插值,React避免dangerouslySetInnerHTML
    • 富文本清洗采用DOM解析器(如DOMPurify)并配置严格白名单(禁用on*事件/javascript:协议)
  • CSRF双重防护
    • 敏感操作(如支付)需同时启用:CSRF Token + SameSite=Strict Cookie + 关键参数签名
  • URL重定向
    • 跳转目标域名强制白名单验证,拒绝非业务域名(如redirect?url=https://trust.com需校验trust.com
2.3 其他建议落地措施
  • CSP策略‌:配置default-src \'none\'; script-src \'self\' https://trust.cdn.com; 禁止内联脚本
  • SRI校验‌: 确保第三方资源未被篡改
  • 日志管理‌:生产环境自动移除console.*调用(通过Webpack插件/Terser配置)
2.4 Native App补充关键点
  • SSL Pinning‌:证书锁定防中间人攻击,需预置公钥指纹到客户端
  • 二次验证‌:生物识别(指纹/面部)替代短信验证码,防止SIM劫持风险

三、数据与接口安全增强

规范条目 实施细节 ‌接口脱敏‌ 前端展示层脱敏(如手机号138‌****1234),‌后端日志需额外脱敏防数据泄露 ‌防参数构造‌ 交易类参数(金额/账号)由后端生成或签名,前端仅传递事务ID ‌接口鉴权‌ ‌每个API请求验证会话有效性+操作权限(RBAC模型)‌,网关层统一拦截非法调用 ‌参数签名防篡改‌ 签名算法包含时间戳+Nonce防重放,服务端校验签名时效性(如±5分钟)

四、风险响应机制升级

措施 执行标准 ‌异常监控‌ 风控系统实时分析:同IP高频失败登录(>5次/分钟)、异常地理位置请求触发自动锁定 ‌Token主动失效‌ 后端提供管理接口,支持按用户/设备/全局批量吊销Token,‌变更密码后立即刷新所有会话‌ ‌账号封锁策略‌ 失败次数阈值动态调整(如IP信誉库+行为分析),‌冻结后需人工审核解封‌ ‌会话保护‌ 检测到并发登录(同一账号多设备)时,可选强制下线旧会话或触发二次认证