即使在客户端,是否有办法保护 React JS 中的 API 密钥?

joh*_*mon 0 javascript client-side api-key reactjs

在 React javascript 文件上使用 API 密钥时,是否有办法保护它的安全?例如;

emailjs.init("API_KEY");
Run Code Online (Sandbox Code Playgroud)

use*_*293 5

您可能想检查 Google Firebase 如何进行纯客户端身份验证:https://firebase.google.com/products/auth/

\n

编辑:\n使用 API 密钥、OAuth 等进行身份验证的一般介绍(来源:关于构建 Web 应用程序的 Codecademy 课程)可能有助于理解 API 密钥的用途以及为什么不需要保护它们。原因是还有其他方法可以处理秘密信息,如本文所述。

\n
\n

验证

\n

介绍

\n

身份验证是应用程序用来确定和确认用户身份的过程。它确保向用户显示正确的内容。更重要的是,它确保不正确的内容受到保护并且未经授权的用户无法访问。

\n

在本文中,我们\xe2\x80\x99 将讨论这些交互的一些常见设计模式。您\xe2\x80\x99需要对HTTP请求有一些基本的了解,因为这些方法都使用HTTP请求来交换信息。

\n

密码认证

\n

最常见的身份验证实现要求用户输入用户名或电子邮件和密码。然后,应用程序的服务器检查提供的凭据以确定用户是否存在以及提供的密码是否正确。如果凭据正确,则用户已登录并能够以用户身份使用该应用程序。

\n

通常,成功登录后,应用程序将使用身份验证令牌(或 auth 令牌)进行响应,供客户端用于其他 HTTP 请求。然后,该令牌将存储在用户的计算机上,从而防止用户持续登录。

\n

该令牌通常会在一段时间后过期,以确保正确的用户随着时间的推移也使用该应用程序。

\n

API密钥

\n

虽然通常将身份验证视为人类用户和应用程序之间的交互,但有时用户是另一个应用程序。

\n

许多应用程序以 API(应用程序接口)的形式公开其信息的接口。例如,Spotify API 为其几乎所有功能提供了端点。这允许应用程序从 Spotify 音乐目录获取数据并管理用户\xe2\x80\x99s 播放列表和保存的音乐。

\n

由于这些外部请求可能会淹没服务并访问用户信息,因此需要使用身份验证来保护它们。

\n

从其他应用程序访问 API 的最基本模式是使用 API 密钥。

\n

公共 API 通常提供开发人员门户,您可以在其中注册应用程序并生成相应的 API 密钥。该密钥对于您的应用程序来说是唯一的。当您的应用程序发出请求时,此密钥将随之发送。然后,API 可以验证您的应用程序是否被允许访问,并根据您的应用程序的权限级别提供正确的响应。

\n

API 可以跟踪每个应用程序发出的请求的类型和频率。该数据可用于将特定应用程序的请求限制为预定义的服务级别。这可以防止应用程序向端点发送垃圾邮件或滥用用户数据,因为 API 可以轻松阻止该应用程序的 API 密钥并防止该应用程序进一步恶意使用 API。

\n

开放认证

\n

对于许多应用程序来说,通用的开发人员级 API 密钥是不够的。如前所述,API 有时能够提供对用户级数据的访问。但是,大多数服务仅在用户启用时才提供此私有数据。

\n

例如,Facebook 不希望 Tinder 访问其所有用户的数据,而只希望访问选择允许共享数据以更好地帮助他们在其所在区域找到匹配对象的用户。

\n

解决此问题的基本方法可能是让用户向中间应用程序提供其登录凭据,但这不是很安全,并且当请求应用程序可能只需要一组非常有限的权限时,将提供对请求应用程序的完全访问权限发挥作用。

\n

开放认证定义了一种更优雅的方法来解决这个问题。它由 Twitter 首席开发人员 Blaine Cook 于 2006 年 11 月开发,1.0 版于 2010 年 4 月发布。

\n

OAuth 是一个开放标准,通常用于授予应用程序访问用户信息的权限,而无需强迫用户泄露密码。

\n

开放标准是对某些功能应如何工作的公开定义。然而,该标准实际上并未构建该功能。

\n

因此,每个 API 都需要实现自己的 OAuth 版本,因此实现或流程可能略有不同。然而,它们都基于相同的 OAuth 规范。

\n

这可能会让使用新的 OAuth API 变得更加令人沮丧。但是,随着时间的推移,您将开始注意到 API 身份验证流程之间的相似之处,并且能够越来越轻松地在应用程序中使用它们。以下是标准 OAuth 流程的摘要。

\n

通用 OAUTH 流程

\n

许多实现 OAuth 的应用程序将首先要求用户选择他们想要使用哪个服务作为凭据:

\n

使用 Google、Facebook 或 Twitter 登录

\n

选择服务后,用户将被重定向到该服务进行登录。此登录确认用户\xe2\x80\x99s 身份,并且通常向用户提供原始应用程序试图在用户\xe2\x80\x99s 帐户上获得的权限列表。

\n

如果用户确认他们想要允许此访问,他们将被重定向回原始站点以及访问令牌。然后,该访问令牌由原始应用程序保存。

\n

与开发人员 API 密钥一样,此访问令牌将包含在应用程序的请求中,以证明用户已授予访问权限并允许该用户访问适当的内容。当用户返回应用程序时,将检索令牌,并且他们不必重新进行身份验证。

\n

授权2

\n

由于 OAuth 是从 Twitter 发展而来的,因此有一些重要的用例最初并未被视为规范的一部分。最终,这导致了新版本规范的创建,称为 OAuth 2。

\n

除了其他改进之外,OAuth 2 还允许根据请求访问的特定应用程序和请求的访问级别来实现不同的身份验证流程。

\n

OAuth 2 仍然是一个开放标准,因此每个 API 将根据其特定实现拥有自己的流程。下面,我们\xe2\x80\x99 将讨论一些常见的 OAuth 2 流程及其使用方式。

\n

客户凭证授予

\n

有时,应用程序不需要访问用户信息,但可以实现 OAuth 2 规范的附加安全性和一致性。这种类型的授权用于访问应用程序级数据(类似于上面的开发人员 API 密钥),最终用户不参与此流程。

\n

不是使用 API 密钥,而是使用客户端 ID 和客户端密钥(当应用程序被授权使用 API 时提供给应用程序的字符串)来交换访问令牌(有时是刷新令牌)。稍后我们将更深入地讨论刷新令牌。

\n

此流程类似于我们的第一个示例,其中将电子邮件和密码交换为身份验证令牌。

\n

必须确保客户端机密不会像密码一样成为公共信息。因此,开发人员应小心,不要意外地将这些信息提交到公共 git 存储库。此外,为了确保密钥的完整性,它不应在客户端公开,并且包含它的所有请求都应发送到服务器端。

\n

与前面提到的密钥类似,返回的访问令牌包含在请求中,用于识别发出请求的客户端,并受到 API 限制。

\n

此访问令牌通常是短暂的,并且经常过期。过期后,可以通过重新发送客户端凭据或最好是刷新令牌来获取新的访问令牌。

\n

刷新令牌是 OAuth 2 更新的一个重要功能,鼓励访问令牌经常过期,并因此不断更改(在原始 OAuth 规范中,访问令牌可以持续数年的时间段)。当刷新令牌用于生成新的访问令牌时,它通常会使任何先前的访问令牌过期。

\n

授权代码授予

\n

此流程是 OAuth 最常见的实现之一,如果您曾经使用 Google 或 Facebook 登录过 Web 应用程序,那么您会觉得很熟悉。它类似于前面描述的 OAuth 流程,但添加了将请求应用程序链接到身份验证的步骤。

\n

用户被重定向到身份验证站点,验证请求访问和权限的应用程序,并使用授权代码重定向回引用站点。

\n

然后,发出请求的应用程序获取此代码并将其连同 application\xe2\x80\x99s 客户端 ID 和客户端密钥一起提交给身份验证 API,以接收访问令牌和刷新令牌。然后以与之前流程相同的方式使用该访问令牌和刷新令牌。

\n

为了避免暴露客户端 ID 和机密,该流程步骤应在请求应用程序的服务器端完成。

\n

由于令牌与用户和请求应用程序相关联,因此 API 对基于用户行为、应用程序行为或两者的访问限制具有很大的控制权。

\n

隐性授予

\n

前面两种方法都会导致客户端密钥暴露,因此需要在服务器端进行处理。某些应用程序可能需要访问 OAuth API,但不具备必要的服务器端功能来保证此信息的安全。

\n

隐式授予 OAuth 流程就是针对这个用例而设计的。此流程提示用户完成与授权代码流程类似的授权步骤,但不涉及客户端密钥的交换。

\n

此交互的结果是访问令牌,通常没有刷新令牌。然后,应用程序使用访问令牌向服务发出其他请求,但不会发送到请求应用程序的服务器端。

\n

此流程允许应用程序使用 OAuth API,而不必担心可能会暴露对用户或应用程序信息的长期访问权限。

\n

结论

\n

OAuth 提供对各种站点和信息的强大访问。通过正确使用它,您可以减少注册摩擦并丰富应用程序中的用户体验。

\n
\n