google maps react 前端 API 密钥存储

Question

我正在构建一个完整的堆栈 MERN（MongoDB Express React Nodejs）应用程序。我正在使用 NPM 包 Google Maps React 在我的网站上显示 google 地图。我很难想出一个策略来保护我的前端 google 映射 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

将密钥存储在我的 Mongo 数据库中
向数据库发出 GET 请求以获取 google 地图 API 键
将API关键数据字符串放入google地图组件

解决方案 B

注意：我对 Google Maps React Node 模块文件进行了深入挖掘。我在 google 映射反应节点模块文件中找到了 .env 和 .env.example 文件。 .env.example 文件说 GAPI_KEY=FILL_IN_YOUR_KEY_HERE

在 google 映射反应节点模块文件中存储 api 键

对解决方案 A 的担忧

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

对解决方案 B 的担忧

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

感谢您的想法和时间。

PS 我使用了 create-react-app

Answer 1

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

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

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

google maps react 前端 API 密钥存储

google maps react front end API key storage

api-key

reactjs

mern

google-maps-react