Javascript - 保护 API 密钥答案

【问题标题】：Javascript - protect API keyJavascript - 保护 API 密钥
【发布时间】：2018-07-17 00:31:42
【问题描述】：

我知道这是一个非常常见的问题，并且已经写了很多关于它的文章。尽管在网上阅读了很多，但我找不到合适的解决方案。

我有一个完全公开的网站 - 没有登录/安全区域。整个网站由对各种第 3 方网站的 API 调用提供支持。该站点在前端使用 React。 React 需要调用 API 来支持网站。

因此，问题在于保护 API 密钥。

简单的解决方案 1.

React 使 API 调用直接到第三方 API - 类似于 https://api.someservice.com/endpoint?key=API-KEY

显然这不好，因为它暴露了 API-KEY。

解决方案 2。

每个人都建议在自己的服务器上创建服务，并从那里向第三方进行 API 调用。这样您就不必公开 API-KEY。所以 React 会调用类似https://api.myserver.com/endpoint

然后，此服务将调用第三方服务，并返回结果。问题是，其他人可以调用托管在我服务器上的端点并使用它——有效地使用我的 API-KEY。

那么，问题是，我如何确保我（我的 React 应用程序）是唯一可以调用托管在我的服务器上的 API 服务的人？

----使用附加信息进行编辑。----

基本上，地图会显示叠加信息。当用户滚动地图时，API 调用是异步进行的，与显示位置相关的信息会叠加到地图上。没有输入表单，没有提交，只有当用户在地图上导航时持续不断的异步 API 调用流。

我需要保护这些 API 调用。没有表单提交或任何形式的登录/身份验证。本网站对所有人开放。

【问题讨论】：

我建议研究 CSRF（跨站点请求伪造）预防，我认为这将有助于解决您的一些问题。
这可能对你有帮助stackoverflow.com/questions/2392100/…
注意：身份验证和授权的全部目的是确保只有某些人可以访问事物..
好吧，如果你把它放在后端，你可以确保调用来自你的域。但它不会阻止某人打开控制台并针对它运行脚本。
这就是为什么你要考虑通过 ip 限制请求和所有那些美妙的垃圾......

标签： javascript reactjs api csrf

【解决方案1】：

我遇到了和你一样的问题，我打算做的是使用 dotnet core 与 SPA 和服务器端渲染。就我而言，我使用的是 Angular，但他们确实已经准备好使用模板进行 react 和 react + redux。

通过这种组合，您的 React 应用程序将在您的 MVC 应用程序中运行。这意味着您可以拥有一个仅接受来自 localhost 的请求的代理 API（请记住您有 SSR），并且您可以从该 API 控制器调用其他 API。您的密钥将是安全的，因为它们只会由您的 C# 控制器使用，即您的中间人。实际的信息交换将在服务器之间完成

(Source)

【讨论】：