Question

我对React还是很陌生，所以如果问题太幼稚，请原谅我。据我了解，React通常需要一个API来执行XHR请求。因此，具有非常基础技术背景的人可以通过在Web浏览器的调试控制台中查看“网络”标签来轻松确定api的外观。

例如，人们可能会找到一个调用api https://www.example.com/product/1的页面，然后他们就可以对产品ID 1-10000进行暴力破解，以获取所有产品的数据。

https://www.example.com/api/v1/product/1
https://www.example.com/api/v1/product/2
https://www.example.com/api/v1/product/3
https://www.example.com/api/v1/product/4
https://www.example.com/api/v1/product/5
https://www.example.com/api/v1/product/6
...

即使具有用户身份验证，也可以在他们登录进行通话并获取数据时使用相同的cookie或令牌。

那么防止在React应用上抓取的最佳方法是什么？还是不应该将api设计成这样，因此我只是在问一个错误的问题？

Answer 1

以下是一些解决您所面临问题的建议：

这是一个常见问题。您需要通过使用ID来解决它，该ID是GUID的，而不是顺序生成的整数。
限制为同一来源将不起作用，因为有人可以通过Postman或Insomnia或Curl发出请求。
您还可以引入速率限制
此外，您可以在一定数量的请求后使令牌失效，或者要求每10个请求后更新令牌

Answer 2

我认为，无论您对JavaScript代码执行什么操作，一旦从浏览器中调用API端点，这都是世界上最简单的事情（Wireshark是一个简单，糟糕的示例）。话虽这么说，但希望它是公开的，保护它比您预期的要容易。

Access-Control-Allow-Origin 是您的朋友

仅允许请求来自给定的URL。这可能会或可能不允许GET请求，但始终会允许直接访问GET路由。请记住这一点。

PHP示例

$origin = $_SERVER['HTTP_ORIGIN'];
$allowed_domains = [
    'http://mysite1.com',
    'https://www.mysite2.com',
    'http://www.mysite2.com',
];

if (in_array($origin, $allowed_domains)) {
    header('Access-Control-Allow-Origin: ' . $origin);
}

使用可以验证的某种形式的令牌

这是另一种常规方法，您可以在此处找到更多相关信息：https://www.owasp.org/index.php/REST_Security_Cheat_Sheet

干杯！

防止React应用被抓取的最好方法是什么？

2 个答案: