如何在Ionic应用程序上保护Google Maps API密钥? [英] How to protect Google Maps API key on Ionic app?

问题描述

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

I have Ionic PWA app published for Android and iOS (I used Capacitor to generate the native build). In the frontend code, it has my Google Maps API key, however, I can't restrict it to any of the options google offers because...

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

1. HTTP referrers - It's not on a public domain name, it's on a local host within the webview of the native app. http://localhost/ for Android and capacitor://localhost/ for iOS. It does not seem very secure to use these as restrictions as they are very generic, and all other apps will have the same ones.

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

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

iOS Apps - It's not within the native code, it's within a webview.

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

None of these options can work for my situation. So how can I protect my API key from abuse?

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

Any ideas? I can't be the only the one using Google Maps API within an Ionic app.

推荐答案

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

You can configure the hostname of capacitor apps

"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

and then restrict the the API keys to capacitor://unique-app

https://capacitor.ionicframework.com/docs/basics/configuring -您的应用

这篇关于如何在Ionic应用程序上保护Google Maps API密钥?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！