谷歌地图反应前端API密钥存储

Question

我正在构建一个全栈 MERN（MongoDB Express React Nodejs）应用程序。我正在使用 NPM 包 Google Maps React 在我的网站上显示谷歌地图。我很难想出一个策略来保护我的前端 google maps API 密钥。

为了完全理解我的问题，查看下面的 Google Maps React 组件代码可能会有所帮助

import {Map, GoogleApiWrapper} from 'google-maps-react';
 
export class MapContainer extends Component {
  render() {
    return (
      <Map google={this.props.google} >
 
      </Map>
    );
  }
}
 
export default GoogleApiWrapper({
  apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE)
})(MapContainer)

可能的解决方案

解决方案 A

1. 将密钥存储在我的 Mongo 数据库中
2. 向数据库发出 GET 请求以获取 google Maps API 密钥
3. 将 API 密钥数据字符串放入谷歌地图组件中

解决方案 B

• 注意：我对 Google Maps React Node 模块文件进行了深入挖掘。我在谷歌地图反应节点模块文件中找到了 .env 和 .env.example 文件。 .env.example 文件显示GAPI_KEY=FILL_IN_YOUR_KEY_HERE

1. 在谷歌地图反应节点模块文件中存储 api 密钥

对解决方案 A 的担忧

• 可能的解决方案不安全
• 用户可以访问API密钥数据

对解决方案 B 的担忧

• 节点模块是我的.gitignore 文件的一部分，因此在部署应用程序时 google maps API 密钥将不可用

感谢您的想法和时间。

PS 我使用了 create-react-app

Answer 1

您有多种选择来安全地存储 api 密钥。如果您使用 CircleCi 进行连续构建，您可以创建一个 environment key。检查你的构建解决方案是否有类似的东西。

还有其他加密文件的方法，例如git-secret。这样你就可以使用环境配置文件了。

除非您将密钥加密，否则不要将密钥存储在代码或配置文件中。