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

Question

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

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

2. IP地址-出于明显的原因。

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

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

   

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

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

Answer 1

为了保护您的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：//引荐来源后，建议您定期检查其用法，以确保其符合您的期望。

我希望这会有所帮助。

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