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

Question

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

HTTP referrers - 它不在 public 域名上，它在本机应用程序的 webview 中的本地主机上。 http://localhost/ 对应 Android，capacitor://localhost/ 对应 iOS。使用这些限制似乎不太安全，因为它们非常通用，所有其他应用程序都会有相同的限制。
IP 地址 - 原因显而易见。
Android Apps - 它不在本机代码中，它在 webview 中。
iOS Apps - 它不在本机代码中，它在 webview 中。

这些选项中的

None 可以适用于我的情况。那么如何保护我的 API 密钥不被滥用？

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

Answer 1

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

的内容

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

中所述

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

Note: file:// referers need a special representation to be added to the key restriction. The "file://" part should be replaced with "__file_url__" before being added to the key restriction. For example, "file:///path/to/" should be formatted as "__file_url__//path/to/*". After enabling file:// referers, it is recommended you regularly check your usage, to make sure it matches your expectations.

希望对您有所帮助。

Answer 2

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

"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

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

How to protect Google Maps API key on Ionic app?

android

google-maps

google-api

ios

ionic4