前后端分离框架网站的安全防护核心要点

前后端分离架构把会话管理的主责从前端的Cookie转移到了后端的Token，最直接的致命风险就是Token的存储与传输。不要再把JWT直接塞进localStorage，那等于把家门钥匙放在门口的脚垫下。任何一行简单的XSS代码都能轻松读取localStorage中的Token并外传。正确的做法是后端设置HttpOnly、Secure、SameSite为Strict或Lax的Cookie来存储Refresh Token，而Access Token则只在内存中持有，页面刷新时用Refresh Token静默换取新的Access Token。对于必须使用前端存储的场景，利用Service Worker拦截请求并在其中处理Token，将Token隔离在Worker作用域内，不让主线程的JavaScript环境触碰。

很多开发者在前后端分离初期图省事，直接在跨域配置里写Access-Control-Allow-Origin: *，同时又把credentials设为true，这种组合一旦上线，等于主动卸下了同源策略这道关键防线。正确的配置必须是白名单机制，后端动态判断请求头中的Origin是否在允许列表中，匹配成功才原样返回该Origin。Access-Control-Allow-Methods要精确到业务实际需要的POST、GET、PUT等几个方法，而不是一揽子放开。Access-Control-Allow-Headers同样要严格限制，拒绝接收前端随意传过来的自定义头。更隐蔽的风险在于预检请求的缓存时间Access-Control-Max-Age，如果设置过长，在此期间后端哪怕修改了跨域策略，浏览器依然会沿用旧的缓存规则，所以这个值建议控制在600秒以内。

CSP头是防御XSS的最后一道铜墙铁壁，但很多团队只在后端网关层配置，忽略了前端构建阶段就能做的大量工作。现代前端工程化工具可以自动为每个脚本标签生成nonce值或者计算SRI哈希，并注入到HTML模板中。script-src必须严格设置为'self'加上具体的静态资源域名，坚决杜绝'unsafe-inline'和'unsafe-eval'。对于第三方SDK的加载，使用strict-dynamic配合正确的nonce值来级联信任。更进一步的策略是配置report-uri或者report-to指令，将违规尝试实时上报到后端监控接口，这样任何一次潜在的注入攻击都能第一时间被发现。样式资源style-src、字体资源font-src、图片资源img-src也要逐一明确来源，不要留下任何默认放开的缺口。

前后端分离后API完全暴露在公网，攻击者可以通过抓包工具反复重放某个请求，尤其是支付、下单、扣费等关键操作。单纯的HTTPS只能防中间人窃听，防不了合法用户的重放攻击。每个敏感请求都必须携带由后端生成的一次性nonce值和时间戳，时间戳与服务器时间的偏差超过60秒直接拒绝，nonce值后端用Redis存储并设置相同的过期时间。请求签名算法要把请求体、URL路径、时间戳、nonce、Token五者按固定顺序拼接后再用HMAC-SHA256计算签名，任何一个参数被篡改都会导致签名验证失败。对于并发场景下的重复提交，前端在按钮点击后立即置灰并生成客户端唯一请求ID，后端用这个ID做分布式锁，同一ID的请求只处理一次，后续相同ID直接返回已有结果。

前后端分离框架下前端资源独立部署，CDN节点被劫持或者NPM包被投毒都会直接导致用户浏览器执行恶意代码。所有从CDN加载的第三方库必须在script或link标签上添加integrity属性，浏览器会在执行前校验哈希值是否匹配。但SRI只能保护外链资源，对于打包进bundle的第三方依赖，需要从源头管控。每次npm install之前必须开启package-lock.json的完整性校验，利用工具扫描依赖树中是否存在已知漏洞，对于核心依赖直接锁定版本号不允许自动升级。私有NPM仓库中发布的内部公共组件同样要经过安全审计，禁止引入带有postinstall脚本的包，这类脚本在安装时自动执行，是供应链攻击的常见入口。前端构建流水线中增加依赖分析步骤，发现异常网络请求或敏感API调用的依赖立即阻断发布。

前后端分离架构中后端往往拆分成多个微服务，如果每个服务各自实现鉴权逻辑，不仅代码重复，更容易因为某个服务的鉴权疏漏导致整个系统出现短板。所有请求必须统一经过API网关进行Token校验和解析，网关将解析出的用户身份和角色信息通过请求头透传给下游服务，下游服务默认不信任任何未经网关签名的身份信息。权限模型至少要做到RBAC，敏感操作进一步细化到按钮级别的权限控制。后端每个API接口在Controller层必须声明所需的权限标识，利用AOP切面在方法执行前统一校验，而不是在每个方法内部写if-else判断。数据权限同样不能忽视，查询接口必须根据当前用户角色自动拼接数据过滤条件，防止用户通过修改请求参数越权访问他人数据。

文件上传是前后端分离系统中最容易被突破的攻击面之一。前端只能做文件扩展名和文件大小的初步校验，这些校验在攻击者面前形同虚设，直接通过Postman绕过即可。后端必须对上传文件的真实类型进行检测，不能依赖前端传来的Content-Type，也不能只检查文件扩展名，要读取文件头部魔数来判定真实格式。图片文件额外调用imagemagick或类似库进行二次渲染后保存，这个过程可以清除文件中可能嵌入的恶意脚本。文件存储必须与业务服务器分离，使用对象存储服务并配置仅允许经过签名的临时URL访问，禁止直接暴露文件真实路径。文件名用UUID重新生成，不要保留用户原始文件名，防止路径穿越攻击。如果业务允许，将上传文件统一转换为webp等安全格式，进一步降低风险。

前后端分离后API接口完全暴露，撞库攻击、短信轰炸、恶意爬虫等自动化攻击会直接冲击后端服务。限流策略要分层设计，网关层基于IP和用户ID两个维度同时做令牌桶限流，对于登录、注册、发送验证码等敏感接口，单个IP每分钟请求次数严格限制在个位数，单个用户ID同样做独立计数。当某个IP的请求失败率在短时间内飙升，自动将其加入黑名单并返回HTTP 429状态码，同时触发告警通知运维人员。业务层面需要建立用户行为基线，正常用户的页面访问顺序、接口调用间隔、操作频率都有规律可循，偏离基线的行为通过埋点数据实时分析后自动触发人机验证或者临时封禁。验证码不能只依赖简单的图形验证码，滑动验证和点选验证的破解成本远高于传统验证码。

手机号、身份证号、银行卡号等敏感信息即使在用户自己的设备上展示，也必须做脱敏处理，中间四位用星号替代。后端返回数据时直接返回脱敏后的内容，不要返回完整数据让前端去截取，因为浏览器的开发者工具能直接看到原始响应内容。对于确实需要在前端展示完整敏感数据的场景，采用字段级加密，后端用对称加密算法加密后返回密文，前端在展示时用密钥解密，密钥通过独立的加密通道获取且用完即销毁。所有API请求强制走HTTPS，同时在Nginx或网关层配置HSTS头，max-age设置至少半年以上，includeSubDomains和preload参数全部开启，强制浏览器在有效期内拒绝任何HTTP连接。

安全防护不能只靠事前防御，事后追溯和实时发现同样关键。后端所有API请求必须记录完整的审计日志，包括请求时间、来源IP、用户ID、请求URL、请求参数、响应状态码、处理耗时，日志中禁止记录Token、密码等敏感字段。日志统一采集到中央日志平台，利用规则引擎实时分析异常模式，如同一用户短时间内从不同城市登录、大量404状态码集中出现、SQL关键字出现在请求参数中等。前端也需要接入错误监控和性能监控，当检测到大量异常脚本错误或者突然出现的跨域请求时，很可能意味着页面被注入了恶意代码。建立安全事件响应流程，从发现告警到确认攻击、阻断攻击源、修复漏洞、恢复服务，每个环节都要有明确的责任人和操作手册。

如果前后端分离架构中引入了GraphQL，必须防范查询深度攻击和查询复杂度攻击。攻击者可以构造嵌套极深的查询一次性拖垮数据库，后端必须设置最大查询深度限制，同时根据字段的复杂度计算每个查询的预估成本，超过阈值的查询直接拒绝。内省功能在生产环境必须关闭，否则攻击者可以通过__schema接口完整遍历你的数据模型。对于WebSocket长连接，连接建立时的鉴权与HTTP请求一样严格，Token通过连接建立后的第一条消息传递，服务端验证通过后才维持连接，否则立即断开。每个WebSocket连接都要做心跳检测和空闲超时断开，防止攻击者建立大量空连接耗尽服务器连接数。

安全防护措施部署完成后，不能停留在理论层面自我安慰。每季度至少执行一次自动化安全扫描，将OWASP ZAP或同类工具集成到CI/CD流水线中，每次发布前自动扫描API接口的常见漏洞。每半年组织一次人工渗透测试，由专业安全团队从外部攻击者视角尝试突破防线。测试范围要覆盖API接口、前端页面、移动端接口、第三方集成接口等所有暴露面。发现漏洞后建立修复优先级矩阵，高危漏洞24小时内修复，中危漏洞一周内修复，低危漏洞纳入迭代计划。安全演练不能只走形式，模拟真实攻击场景下的应急响应能力，检验监控告警是否及时触发、值班人员是否清楚处理流程、备份恢复是否能在预定时间内完成。