如何限制外部脚本调用React应用的公开REST API？

先给你准信：同行们几乎都遇到过类似问题，完全阻止确实做不到——毕竟你的API是给合法用户的浏览器用的，脚本只要能模拟浏览器的请求逻辑，理论上就能调用。但我们有一堆成熟的手段能大幅提升脚本调用的门槛，把绝大多数批量脚本挡在外边。

下面是实际项目里常用的方案，结合你的React+Cookie令牌场景：

一、请求来源与签名校验 #

• 校验Referer/Origin头：后端只允许来自你的前端域名（比如https://your-react-app.com）的请求通过。虽然脚本能伪造这些头，但能过滤掉一批连基本请求头都懒得加的入门级脚本。
• 前端动态签名：在React里写个工具函数，每次发请求时用「当前时间戳+前端混淆后的密钥+请求参数」生成一个哈希签名，把签名放在请求头里传给后端。后端拿到后用同样的逻辑校验签名是否有效。密钥要通过代码混淆（比如用Terser压缩、变量名混淆）藏起来，虽然防不住资深逆向工程师，但能让普通脚本开发者望而却步。

二、Cookie令牌的安全增强 #

• 设置SameSite属性：把存令牌的Cookie设为SameSite=Strict，这样跨站请求就没法携带这个Cookie，能直接挡住大部分跨站脚本调用。如果要兼容一些旧场景，用Lax也能覆盖大部分情况。
• 绑定动态页面因子：后端在返回React页面时，生成一个随机字符串（比如page_token），存在页面的隐藏DOM节点里（比如<meta name="page-token" content="xxx">），同时把这个字符串和用户的令牌绑定存到后端缓存里。前端每次发请求时，把这个page_token和Cookie令牌一起传给后端，后端校验两者是否匹配。脚本要拿到这个值，就得先完整渲染你的React页面，没法直接跳过页面发请求。

三、行为限制与异常检测 #

• 精细化速率限制：别只按IP限流，要结合用户身份：比如登录用户1分钟内最多调用核心接口15次，未登录用户限制到5次；同一个IP下多个异常账号的请求直接拦截。
• 异常行为识别：后端记录请求的时间间隔、操作顺序——正常用户的请求间隔是随机的，脚本的请求间隔往往很均匀；正常用户会先加载页面、做一些前置操作，脚本可能直接跳转到核心接口。对这类异常请求直接返回403，或者触发验证码。

四、人机交互与浏览器指纹 #

• 智能验证码：在登录、高频操作前加验证码，但别每次都加——后端检测到异常行为（比如短时间内多次登录、请求频率过高）时再触发，平衡体验和安全。滑动验证、点选验证码都能用，React生态里有现成的组件。
• 浏览器指纹校验：前端收集浏览器的User-Agent、屏幕分辨率、时区、插件列表等信息，生成一个指纹字符串，每次请求传给后端。后端把指纹和用户的登录状态绑定，后续请求如果指纹不匹配就拦截。脚本要模拟完全一致的指纹成本很高，尤其是当你结合多个特征的时候。

最后说一句：你的需求绝对不是不切实际，只是要认清“完全阻止”和“提升门槛”的区别。上面的方案组合起来，能挡住99%的批量脚本调用，剩下的极少数针对性攻击，靠日志监控和人工介入就能处理。

内容的提问来源于stack exchange，提问作者Human4794