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

Question

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

为了充分理解我的问题，查看下面的谷歌地图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模块文件进行了一些深入挖掘。我在谷歌地图react节点模块文件中找到了.env和.env.example文件。.env.example文件显示GAPI_KEY=FILL_IN_YOUR_KEY_HERE

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

解决方案A 的问题

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

解决方案B 的问题

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

感谢您的想法和时间。

PS我用创建反应应用

Answer 1

您有各种选项可以安全地存储api密钥。如果将CircleCi用于连续生成，则可以创建环境密钥。请检查您的构建解决方案是否有类似的内容。

还有一些加密文件(如gitsecret(的替代方案。这样就可以使用环境配置文件。

最重要的是，除非您对密钥进行了加密，否则不要将密钥存储在代码或配置文件中。