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

问题描述

我正在构建一个全栈MERN（MongoDB Express React Nodejs）应用程序。我正在使用NPM软件包Google Maps React在我的网站上显示google地图。我很难提出一种策略来保护前端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密钥数据字符串放入Google Maps组件

解决方案B

• 注意：我对Google Maps React Node模块文件进行了深入研究。我在Google Maps中发现了带有.env和.env.example文件的react node模块文件。 .env.example文件显示GAPI_KEY=FILL_IN_YOUR_KEY_HERE

1. 将api密钥存储在Google Maps反应节点模块文件中

与解决方案A有关的问题

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

与解决方案B有关的问题

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

感谢您的想法和时间。

我使用了create-react-app的PS

解决方法

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

还有一些用于加密文件的替代方法，例如git-secret。这样，您可以使用环境配置文件。

除非加密，否则底线不会在代码或配置文件中存储密钥。