在 React 应用中使用 API 键
Using API keys in a react app
我有一个使用两个第三方服务的 React 应用程序。该应用程序是使用 react-create-app.
启动的
这两项服务都需要 API 密钥。
一个密钥是通过脚本标签提供的，如下所示：
<script type="text/javascript" src="https://myapi?key=MY_KEY">
</script>
请求中使用了另一个 API 键。我将实际密钥存储在常量中并使用它来形成请求。像这样：
const MY_OTHER_KEY = 'MY_OTHER_KEY'
let url = `http://myotherapi?key=${MY_OTHER_KEY}&q=${query}`
Google 的 best practice tips 关于处理 API 键说：
Do not embed API keys directly in code
这引出了我的第一个问题：
1.如何在index.html?
中使用变量
在我的 index.html 文件中，我有两个如下所示的标签：
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
显然，%PUBLIC_URL%是一个变量。如何添加变量 %MY_KEY% 以避免直接在我的代码中嵌入 API 键？
要得到这样的东西：
<script type="text/javascript" src="https://myapi?key=%MY_KEY%">
</script>
关于这个问题，将 API 密钥存储在常量中是否安全，就像我对 MY_OTHER_KEY 所做的那样？
Google 还说：
Do not store API keys in files inside your application's source tree
这引出了我的第二个问题：
2。 API 密钥是否仍然在捆绑包中？
说我照 Google 说的做，我
... store them in environment variables or in files outside of your
application's source tree
假设我将密钥存储在外部文件中。我假设该文件将在某个时候被读取，并且它的内容要么被复制到包中，要么以其他方式被引用。最后，除了可能更难找到外，密钥是否仍会在捆绑包中可见？这到底有什么帮助？
3。在 React 应用程序中是否有使用 API 键的规范方式？还是由个人开发者决定？
不言自明，我正在寻找解决这个问题的反应方式，如果有的话。
感谢您的帮助！
1.如何在index.html?
中使用变量
回答 1：请仔细阅读 Adding Custom Environment Variables 以了解如何添加您作为示例显示的类型的环境变量。
2。 API 密钥是否仍然在捆绑包中？
答案 2 : 即使您将密钥 (MY_KEY) 作为脚本标记中的环境变量，它也会呈现在页面上并将可见的。通常，这些是浏览器密钥，旨在用于客户端。这些可以通过在您的请求中提供 Http Referer header 来限制。更多关于保护这些密钥的功效 here。但是 API 键（如 MY_OTHER_KEY）不应在客户端使用，不应在脚本标记中呈现或存储在客户端 JS 中。
3。在 React 应用程序中是否有使用 API 键的规范方式？还是取决于个人开发者？
答案 3： 使用第三方 API 密钥的规范方式是让您的客户端应用程序向您的后端发送请求 API .您的后端 API 然后根据 third-party API 格式化请求，添加密钥并调用 third-party API。收到响应后，它可以将其解压缩并将其转换为您的 front-end 应用可以理解的域 objects，或者将原始响应发送回 front-end 应用。这样，API 键就留在了后端，永远不会发送到 client-side.
我有一个使用两个第三方服务的 React 应用程序。该应用程序是使用 react-create-app.
这两项服务都需要 API 密钥。
一个密钥是通过脚本标签提供的，如下所示：
<script type="text/javascript" src="https://myapi?key=MY_KEY">
</script>
请求中使用了另一个 API 键。我将实际密钥存储在常量中并使用它来形成请求。像这样：
const MY_OTHER_KEY = 'MY_OTHER_KEY'
let url = `http://myotherapi?key=${MY_OTHER_KEY}&q=${query}`
Google 的 best practice tips 关于处理 API 键说：
Do not embed API keys directly in code
这引出了我的第一个问题：
1.如何在index.html?
在我的 index.html 文件中，我有两个如下所示的标签：
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
显然，%PUBLIC_URL%是一个变量。如何添加变量 %MY_KEY% 以避免直接在我的代码中嵌入 API 键？
要得到这样的东西：
<script type="text/javascript" src="https://myapi?key=%MY_KEY%">
</script>
关于这个问题，将 API 密钥存储在常量中是否安全，就像我对 MY_OTHER_KEY 所做的那样？
Google 还说：
Do not store API keys in files inside your application's source tree
这引出了我的第二个问题：
2。 API 密钥是否仍然在捆绑包中？
说我照 Google 说的做，我
... store them in environment variables or in files outside of your application's source tree
假设我将密钥存储在外部文件中。我假设该文件将在某个时候被读取，并且它的内容要么被复制到包中，要么以其他方式被引用。最后，除了可能更难找到外，密钥是否仍会在捆绑包中可见？这到底有什么帮助？
3。在 React 应用程序中是否有使用 API 键的规范方式？还是由个人开发者决定？
不言自明，我正在寻找解决这个问题的反应方式，如果有的话。
感谢您的帮助！
1.如何在index.html?
中使用变量回答 1：请仔细阅读 Adding Custom Environment Variables 以了解如何添加您作为示例显示的类型的环境变量。
2。 API 密钥是否仍然在捆绑包中？
答案 2 : 即使您将密钥 (MY_KEY) 作为脚本标记中的环境变量，它也会呈现在页面上并将可见的。通常，这些是浏览器密钥，旨在用于客户端。这些可以通过在您的请求中提供 Http Referer header 来限制。更多关于保护这些密钥的功效 here。但是 API 键（如 MY_OTHER_KEY）不应在客户端使用，不应在脚本标记中呈现或存储在客户端 JS 中。
3。在 React 应用程序中是否有使用 API 键的规范方式？还是取决于个人开发者？
答案 3： 使用第三方 API 密钥的规范方式是让您的客户端应用程序向您的后端发送请求 API .您的后端 API 然后根据 third-party API 格式化请求，添加密钥并调用 third-party API。收到响应后，它可以将其解压缩并将其转换为您的 front-end 应用可以理解的域 objects，或者将原始响应发送回 front-end 应用。这样，API 键就留在了后端，永远不会发送到 client-side.