Como proteger a chave da API do Google Maps no aplicativo Ionic?

8

Tenho o aplicativo Ionic PWA publicado para Android e iOS (usei o Capacitor para gerar a compilação nativa). No código do front-end, ele possui minha chave da API do Google Maps, no entanto, não posso restringi-lo a nenhuma das opções que o Google oferece, porque ...

  1. Referenciadores HTTP - Não está em um nome de domínio público, está em um host local na visualização da web do aplicativo nativo. http://localhost/para Android e capacitor://localhost/iOS. Não parece muito seguro usá-los como restrições, pois são muito genéricos, e todos os outros aplicativos terão os mesmos.

  2. Endereços IP - por razões óbvias.

  3. Aplicativos Android - não está no código nativo, está em uma visualização na web.
  4. Aplicativos iOS - não está no código nativo, está em uma visualização na web.

    insira a descrição da imagem aqui

Nenhuma dessas opções pode funcionar para a minha situação. Então, como posso proteger minha chave de API de abuso?

Alguma ideia? Não posso ser o único a usar a API do Google Maps em um aplicativo Ionic.

nachshon f
fonte
usar GoogleMap nativa e siga este link ele vai ajudar você baadiersydow.com/...
Prakash ubhadiya
Esse é o objetivo de usar o Capacitor. Você não precisa usar nada nativo.
Nachshon f 15/11/19

Respostas:

4

Você pode configurar o nome do host dos aplicativos capacitores

"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",
  }

e depois restrinja as chaves da API a capacitor://unique-app

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

PC Principal
fonte
Estou tendo um problema ... Depois de criar para prod, no iOS, o aplicativo é aberto com uma tela branca em branco. Isso só acontece se eu definir um nome de host personalizado.
Nachshon f
3

Para proteger sua chave de API, você deve verificar o valor de window.location.hrefdentro de uma visualização na web. Eu acho que você verá algo parecido file://some/path.

Portanto, você precisará aplicar a restrição do referenciador HTTP para esse caminho. Observe que os URLs com um protocolo file: // requerem representação especial, conforme explicado em

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

Nota: referenciadores file: // precisam de uma representação especial para ser adicionada à restrição de chave. A parte "file: //" deve ser substituída por "__file_url__" antes de ser adicionada à restrição de chave. Por exemplo, "file: /// path / to /" deve ser formatado como "__file_url __ // path / to / *". Depois de ativar os referenciadores file: //, é recomendável que você verifique regularmente seu uso, para garantir que ele corresponda às suas expectativas.

Eu espero que isso ajude.

xomena
fonte
Estou usando o Capacitor, e ele exibe a web usando localhost / (android) e capacitor: // localhost / (iOS). Não parece muito seguro usá-los como restrições, pois são muito genéricos, e todos os outros aplicativos terão os mesmos. Sugestões?
Nachshon f 15/11/19