带域名限制API密钥时，Google Maps Embed API导航模式在Safari失效的原因与解决办法

问题现象 #

• 同一域名/子域名下使用免费版Google Maps Embed API（iframe）：
  • 地点模式：所有浏览器均可正常工作
  • 导航模式：Chrome、Firefox中正常，但Safari会返回HTTP 403错误，错误信息如下：

    This IP, site or mobile application is not authorized to use this API key. Request received from IP address X.X.X.X, with empty referer.

• API密钥已配置域名限制，移除限制后Safari可正常使用导航模式，但此操作存在安全风险

原因分析 #

核心原因是Safari隐私机制与Google Maps Embed API导航模式的请求逻辑冲突：

1. 请求流程差异：地点模式的iframe请求直接从当前域名发起，Referer头能正常携带；而导航模式的iframe内部会触发跨域请求（加载导航资源或跳转逻辑），Safari默认开启的"阻止跨站跟踪"隐私设置会屏蔽这类跨域请求的Referer头，导致Google API服务器无法验证域名权限，返回403错误。
2. API验证逻辑区别：Google对地点模式和导航模式的Referer验证标准不同，地点模式验证相对宽松，即使Referer有轻微异常也能通过；导航模式的验证则更严格，缺失Referer直接判定为未授权。

解决办法 #

1. 临时测试方案：让用户关闭Safari的"阻止跨站跟踪"设置（路径：设置->隐私与安全性->阻止跨站跟踪），但这需要用户手动操作，无法作为面向所有用户的通用方案。
2. 替换为JavaScript API：放弃Embed API的iframe导航模式，改用Google Maps JavaScript API实现导航功能。该API的请求完全由当前域名发起，Referer头能稳定携带，可在保持域名限制的同时兼容Safari。具体可通过google.maps.DirectionsService获取导航路线，再用google.maps.DirectionsRenderer渲染到页面上。
3. 反馈官方修复：这属于Google Maps Embed API的兼容性Bug，可通过Google Cloud官方支持渠道提交问题反馈，推动官方优化导航模式在Safari下的Referer验证逻辑。

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