防止 React 应用程序被抓取的最佳方法是什么？答案

【问题标题】：What's the best way to prevent React app being scraped?防止 React 应用程序被抓取的最佳方法是什么？
【发布时间】：2018-08-16 06:33:55
【问题描述】：

我对 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 不应该这样设计，因此我只是问错了问题？

【问题讨论】：

标签： reactjs api

【解决方案1】：

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

这是一个常见问题。您需要使用属于 GUID 而不是顺序生成的整数的 id 来解决它。
限制同源是行不通的，因为有人可以通过 Postman 或 Insomnia 或 Curl 提出请求。
你也可以引入限速
此外，您可以在一定数量的请求后使您的令牌失效或要求每 10 次请求后更新令牌

【讨论】：

【解决方案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

干杯！

【讨论】：