部署时如何安全存储Google Maps API密钥并支持无需编译的修改？

先明确最核心的逻辑：

• 前端要加载Google Maps地图，必然得暴露密钥，但可以通过Google Cloud的限制规则把风险降到最低
• 后端做地理编码/反向地理编码，绝对不能让密钥出现在前端，必须走后端代理

你之前试的几个方案问题在哪 #

1. 数据库存了给前端拿：纯纯送人头，网络请求一抓包就能拿到密钥，完全不安全
2. 存在React里：不管是写代码里还是存localStorage，开发者工具随便就能找到，风险极高
3. 存在.env里打包：React打包会把前端的环境变量硬编码进静态文件，别人反编译一下就能拿到，根本不安全

安全还能灵活改的解决方案 #

后端密钥（地理编码用） #

• 单独开一个只给后端用的API密钥，在Google Cloud控制台只开Geocoding API权限
• 把这个密钥存在后端的环境变量里（比如后端的.env，或者用云服务商的密钥管理工具），绝对不能传到前端
• 后端自己写个地理编码的接口，前端调你的后端接口，后端再用密钥去调Google的API。这样前端从头到尾碰不到这个密钥
• 改密钥的时候，直接更新后端的环境变量就行，不用重新编译任何代码

前端密钥（加载地图用） #

• 再开一个只给前端用的API密钥，在Google Cloud控制台必须加严格限制：
  • HTTP引用限制：只允许你的域名（比如https://yourdomain.com）用这个密钥
  • API限制：只开Maps JavaScript API，其他API全关
• 把这个前端密钥存在后端的配置里（比如数据库、配置中心，或者后端环境变量）
• 前端页面加载的时候，先调后端的一个简单接口拿这个密钥，再用密钥加载Google Maps
  比如React里这么写：

  useEffect(() => {
    fetch('/api/get-maps-key')
      .then(res => res.json())
      .then(data => {
        const script = document.createElement('script');
        script.src = `https://maps.googleapis.com/maps/api/js?key=${data.key}&libraries=places`;
        script.async = true;
        document.body.appendChild(script);
      });
  }, []);
  

• 好处：
  • 就算密钥被抓包，因为有域名和API限制，别人拿了也用不了
  • 改密钥直接更后端配置，前端不用重新编译，刷新页面就生效

额外提醒 #

• 定期换一下密钥，尤其是前端的
• 多看看Google Cloud控制台的API使用统计，有异常请求及时处理
• 后端调Google API的时候加个频率限制，防止被恶意刷配额

内容的提问来源于stack exchange，提问作者Selim Choueiter