如何在 React 中隐藏 API 密钥？答案

【问题标题】：How to hide API keys in React?如何在 React 中隐藏 API 密钥？
【发布时间】：2021-01-27 08:59:12
【问题描述】：

将机密的 API 密钥保存在 .env 文件中并不会完全隐藏 React 中的密钥，因为您仍然可以在浏览器中看到此密钥吗？

那么在 React 中存储 API 密钥的正确方法是什么？我需要从服务器检索它们吗？

例如：

const [key, setKey] = useState('');

const getApiKey = async () => {
    await axios.get("https://example.com/getApiKey").then((res) => { setKey(res) });
}

useEffect(() => {
    getApiKey();
}, []);

我把它放在状态然后这样使用它吗？

<StaticGoogleMap
    className="google-map"
    size="300x300"
    apiKey={key}
/>

我认为这样 API 密钥仍然对浏览器中的用户可见。

如果有人能解释在前端安全存储 API 密钥的正确方法，我将不胜感激。谢谢！

【问题讨论】：

如果您真的想保密，请不要将其发送到浏览器 - 谷歌地图密钥不需要隐藏，因为您创建密钥以在特定域上工作，所以他们在该域之外无用 - 其他机密最好保存在服务器上 - 在验证请求来自允许的来源后，应使用您的服务器对第三方进行任何 API 调用
Tl;DR - 如果它在浏览器中，它不安全（或者 secret 是更好的词） - 所以，没有办法在前面存储密钥结束
我明白了，感谢您的澄清。我之前用过 Stripe，它也有两个 api 键。一个用于我可以存储在 .env 文件中的服务器，另一个用于客户端。所以我不需要太担心客户端密钥，因为它们无法隐藏？
@David 是的，所以“可发布”的 Stripe 密钥可以安全地在前端使用，不用担心。您只是不能在客户端使用“秘密”stripe.com/docs/keys
太棒了。所以我想这对于你必须使用两个 api 密钥的所有情况都是正确的。再次感谢！

标签： javascript html reactjs

【解决方案1】：

我使用的方法是将配置（即 config.js）文件放在“组件”目录之外，如下所示：

export default {
    api: {
        USERNAME: 'xxxxx',
        PASSWORD: 'xxxxx'
    }
};

然后在你的组件中：

import config from './path/to/config.js';

然后在您的组件中访问您的凭据：

var username = config.api.USERNAME;
var password = config.api.PASSWORD

【讨论】：

感谢您的意见。这种方法是否会对用户和浏览器隐藏 API 密钥？或者它仍然以某种方式可见？
html源或js应该只有配置键，例如：config.api.KEY。
这仍然会在发出请求时在网络选项卡中显示 api 密钥。