如何保护 Ionic 应用程序上的 Google Maps API 密钥？

Question

我为 Android 和 iOS 发布了 Ionic PWA 应用程序（我使用 Capacitor 生成本机构建）。在前端代码中，它有我的 Google Maps API 密钥，但是，我不能将其限制为 google 提供的任何选项，因为...

1. HTTP 引荐来源网址 - 它不在公共域名上，它在本机应用程序的 web 视图内的本地主机上。 http://localhost/ 适用于 Android，capacitor://localhost/ 适用于 iOS。将这些用作限制似乎不太安全，因为它们非常通用，并且所有其他应用程序都将具有相同的限制。

2. IP 地址 - 原因显而易见。

3. Android 应用程序 - 它不在本机代码中，而是在 web 视图中。

4. iOS 应用程序 - 它不在本机代码中，而是在 web 视图中。

这些选项都不适合我的情况。那么如何保护我的 API 密钥免遭滥用？

有什么想法吗？我不能是唯一一个在 Ionic 应用程序中使用 Google Maps API 的人。

Answer 1

您可以配置电容器应用程序的主机名

"server": {
    // You can configure the local hostname, but it's recommended to keep localhost
    // as it allows to run web APIs that require a secure context such as
    // navigator.geolocation and MediaDevices.getUserMedia.
    "hostname": "unique-app",
  }

然后将 API 密钥限制为 capacitor://unique-app

https://capacitor.ionicframework.com/docs/basics/configuring-your-app

Answer 2

为了保护您的 API 密钥，您必须在 web 视图中检查 window.location.href 的值。我猜你会看到类似file://some/path。

因此，您需要为此路径应用 HTTP 引荐来源网址限制。请注意，带有 file:// 协议的 URL 需要特殊表示，如

中所述

https://developers.google.com/maps/documentation/javascript/get-api-key#restrict_key

注意： file:// 引用者需要一个特殊的表示来添加到密钥限制中。在添加到密钥限制之前，应将“file://”部分替换为“__file_url__”。例如，“file:///path/to/”应格式化为“__file_url__//path/to/*”。启用 file://referers 后，建议您定期检查您的使用情况，以确保它符合您的期望。

我希望这会有所帮助。