reactjs - API key 是否通过get请求暴露？

Question

我正在构建一个 Node/React 应用程序，我将我的 API key 放在我的 .gitignore 中的 .env 文件中。前端使用 Axios 和 UseEffect Hook 通过 process.env 提供的 API key 向 API 端点发出获取请求。我理解为什么隐藏 API key 而不是将该信息提交给 git 是一种很好的做法，但是我的问题是是否仍然需要做(或可以做)关于通过检查 chrome 开发人员中的请求公开的 API key 工具？

//on component mount fetch the images
    useEffect(async ()=>{
        const results = await axios(
            `https://pixabay.com/api/?key=${process.env.PIXA_API_KEY}`
        );
    },[])

例如，如果用户在我的项目的浏览器中使用 chrome 工具，他们仍然可以在请求中看到我的 API key 。就我而言，这并不是什么大问题，因为这个特定的 API 是免费的，而且该项目仅供个人使用，但我想知道在可能使用付费 API 的商业项目中如何解决这个问题？是什么阻止我在其他人的应用程序上使用 chrome 开发工具并窃取他们的 API key 来发出我自己的请求？

Answer 1

这是一个很好的观察。事实上，您的客户端代码中不能有任何 secret 。任何模糊、混淆甚至加密都无法阻止攻击者窃取您的 secret 。任何人都可以阅读客户端代码，并且需要这样处理。

如果涉及带有您不想公开的 key 的私有(private) API，您需要从服务器调用它们。所以流程看起来像这样: