google maps react前端API密钥存储

Question

我正在构建一个全栈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节点模块文件做了一些深入的挖掘。我在google maps react节点模块文件中找到了.env和.env.example文件。env.example文件显示gapi_key=fill_in_your_key_here

1. 在google maps react节点模块文件中存储api密钥

对解决方案A的关注

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

与解决方案B有关的问题

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

谢谢你的想法和时间。

PS我使用了create-react-app

Answer 1

您有各种选项来安全地存储api密钥。如果您正在使用circoleci进行连续构建，则可以创建一个环境键。检查构建解决方案是否有类似的内容。

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

底线不要将密钥存储在代码或配置文件中，除非您对其进行加密。