如何在img src中使用Google photo_reference且不泄露URL中的API密钥

你当前直接在img的src中使用带密钥的https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=PHOTOREFHERE&key=YOUR_API_KEY接口确实会存在API密钥泄露的风险，可通过以下几种方案解决：

• 后端代理中转（最推荐方案） #

  你可以在自身服务端搭建一个代理接口，前端仅需要请求你的自有接口，示例如下：

  GET /api/google-place-photo?photoreference=PHOTOREFHERE&maxwidth=400
  

  后端收到请求后，将仅保存在服务端环境变量中的API密钥拼接至Google Place Photo接口的请求参数中，发起调用后将返回的图片二进制流直接透传给前端即可。该方案下API密钥全程不会对外暴露，从根本上避免泄露风险。
  配套优化建议：

  • 给自有代理接口添加访问频率限制，避免被恶意刷取导致Google API费用超额
  • 新增图片缓存逻辑，相同参数的重复请求可直接返回本地/对象存储中缓存的图片，降低接口延迟的同时减少Google API调用次数，节省成本

• 边缘函数/Serverless中转（静态站点适用） #

  如果你使用的是无后端的静态站点，可以用Cloudflare Worker、Vercel Edge Function等Serverless服务实现中转逻辑，本质和后端代理逻辑一致，将API密钥保存在Serverless服务的环境变量中，前端请求边缘函数地址即可获取图片，不会泄露密钥。

• API密钥访问限制（兜底安全方案） #

  无论是否使用中转方案，都建议你在Google Cloud控制台为对应API密钥添加访问限制：

  • 若使用中转方案，可限制密钥仅允许你的后端服务器IP调用，即便密钥意外泄露也无法被其他人使用
  • 若必须在前端直接调用接口，可限制密钥仅允许你的站点域名的HTTP Referer发起调用，避免密钥被其他站点盗用
    注意：HTTP Referer存在被伪造的可能，该方案仅可作为辅助安全手段，不可替代中转方案使用

禁止通过前端JS动态拼接密钥赋值给img src的方式处理，用户可直接通过浏览器控制台的网络请求栏查看到完整的带密钥的Google接口地址，无法起到隐藏密钥的作用。

内容的提问来源于stack exchange，提问作者Axel Blaz