[JAVA] Comment masquer la clé API Google Maps du HTML

Je m'inquiète des clés d'API lorsque j'utilise l'API JavaScript Maps

Google dit [[Official Sample]](https://developers.google.com/maps/documentation/javascript/adding], malgré le fait que «les clés API ne doivent pas être intégrées directement dans le code» sur le site officiel. -a-google-map) est codé comme suit, et ** YOUR_API_KEY ** apparaît dans le HTML. Si vous créez une page Web avec cela, vous publierez la clé API dans le monde entier. C'est comme marcher sur une voie publique avec Frichin. L'échantillon officiel est-il un roi nu?

<script defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Pour le moment, le document Google [Apply API key restrictions] indique "HTTP. Il dit que les restrictions par «références (sites Web)» sont essentielles, mais cela seul est extrêmement malheureux. Comme vous le savez tous, le nom d'une page Web peut être facilement usurpé en créant un serveur Web localement et en jouant avec les hôtes ... (je ne le fais pas, juste au cas où) Bien sûr, pour éviter d'être facturé à votre insu, [[Limiter l'utilisation de l'API]](https://cloud.google.com/apis/docs/capping-api-usage?authuser=1&authuser=1&hl=ja&visit_id=637360063115512101 -2429778502 & rd = 1) est implémenté, mais que se passe-t-il si quelqu'un quelque part utilise la clé API sans autorisation et y accède 1 million de fois? Je ne peux pas dormir la nuit ...

Cachez la clé API hors de vue

Après tout, je ne veux pas publier la clé API en HTML! !! J'ai donc décidé d'utiliser CGI pour cacher la clé API à l'intérieur du serveur.

1. 1. Définir sur la variable d'environnement

Transmettez la clé API à CGI avec le jeu de variables d'environnement. Mon environnement exécute CGI avec nginx + fcgiwrap, alors définissez-le au bas de /etc/nginx/fcgiwrap.conf comme suit.

fcgiwrap.conf


location /cgi-bin/ {
・ ・ ・ ・ ・ ・
    fastcgi_param GOOGLE_MAPS_API_KEY  YOUR_API_KEY; <=YOUR_API_Remplacez KEY par votre propre clé
}

La méthode de paramétrage ici diffère en fonction de votre environnement (apache, etc.), veuillez donc la définir en fonction de votre propre environnement.

2. Préparer CGI

En règle générale, remplacez la partie src =" https: // maps.googleapis.com / maps / api / js de l'exemple officiel par CGI. J'utilise python dans mon environnement, donc ça ressemble à ça.

getapijs.py


#!/usr/bin/python
# -*- coding: utf-8 -*-
import requests
import os
url = 'https://maps.googleapis.com/maps/api/js' #L'exemple HTML officiel est src=J'ai lu dans l'url
key = os.environ['GOOGLE_MAPS_API_KEY'] #Extraire la clé API contenue dans la variable d'environnement
mysrc = url + "?key=" + key #Concaténer la clé API à l'URL
response = requests.get(mysrc) #Allez sur le site de google map et introduisez src
print("'Content-Type': 'text/javascript; charset=UTF-8'") #En-tête pour revenir au HTML
print("")
print(response.text)

Cette partie est également différente pour chaque environnement, veuillez donc l'écrire dans votre propre langue. Le fait est que ** apportez la clé API de la variable d'environnement du serveur **, spécifiez l'url et récupérez le javascript du site google. La partie d'en-tête doit être `` Content-Type ':' text / javascript; charset = UTF-8 ''.

3. 3. Appelez CGI dans javascript window.onload

main.js


function initMap() {
    //Identique au contenu de l'échantillon officiel
    // Initialize and add the map
    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, centered at Uluru
    var map = new google.maps.Map(document.getElementById('map'), {zoom: 4, center: uluru});
    // The marker, positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});
}
window.onload = function() {
    //Après avoir affiché la page, écrivez le processus que vous souhaitez exécuter. C'est le point d'ici!
    fetch("/cgi-bin/getapijs.py").then(res=>{
        //Exécutez CGI et ne passez que le TEXTE résultant ensuite
        return res.text();
    }).then(mytext => {
        //Exécutez le javascript reçu avec EVAL.
        eval(mytext);
    }).then(() => {
        //Traitement post-exécution. L'exemple HTML officiel&callback=La partie qui a été appelée
        initMap();
    }).catch(() =>{
        //Veuillez gérer votre erreur préférée
    });
}

En HTML, <script src =" main.js "> </ script> est décrit dans la partie en-tête. Le style ici varie d'une personne à l'autre, vous pouvez donc utiliser le style que vous aimez. Le point est, après ** chargement de l'élément HTML ** (la partie différée de l'exemple HTML, window.onload dans mon exemple), ** exécuter CGI ** et recevoir le javascript en tant que TEXT ** avec EVAL La procédure consiste à exécuter **.

Pouvez-vous dormir l'esprit tranquille?

Étant donné que la clé API se trouve uniquement dans la variable d'environnement, vous pouvez publier la source sur GITHUB, et même si l'utilisateur du site Web regarde HTML ou JS avec les outils de développement de Chrome, la clé API est introuvable. Comparé à l'échantillon officiel marchant sur la voie publique à Frichin, le résultat est profane. La seule chose qui me met mal à l'aise est d'utiliser le "evil EVAL". Vous pourriez penser que c'est une page Web maléfique ... Ceux qui ont scellé EVAL en tant que personne interdite ne peuvent pas utiliser cette méthode, mais je pense qu'il est plus dangereux d'exposer la clé API au public que d'utiliser EVAL. Arrêtons-nous. Si votre entreprise interdit EVAL, veuillez abandonner et créer une application lourde avec JAVA. Je vais légèrement avec HTML + javascript + python.

Référence

index.html


<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
      }
    </style>
    <title>Hello World</title>
    <script src="main.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
  </body>
</html>

De plus, je me référerai à cet article. [Comment lire le JS externe à partir de JS que j'utilise souvent]

Recommended Posts

Comment masquer la clé API Google Maps du HTML
Comment mettre à jour Google Sheets à partir de Python
[Rails] google maps api Comment publier et afficher des informations cartographiques
Comment afficher la carte à l'aide de l'API Google Map (Android)
Comment appeler l'API Cloud à partir de GCP Cloud Functions
Comment utiliser l'API Google Cloud Translation
Comment analyser avec Google Colaboratory à l'aide de l'API Kaggle
Comment publier un ticket depuis l'API Shogun
Comment générer une clé publique à partir d'une clé privée SSH
Procédure de communication Ajax de HTML à JSON sur le serveur API
Comment utiliser Google Colaboratory
Comment obtenir des abonnés et des abonnés de Python à l'aide de l'API Mastodon
Comment se connecter à Cloud Firestore à partir de Google Cloud Functions avec du code Python
Comment obtenir un ingénieur de la trentaine
[Rails] Comment afficher Google Map
Comment utiliser SWIG de WAF
Réutilisation du flacon Comment écrire du HTML
[Mémo] Comment utiliser Google MµG
Comment utiliser l'API Python d'OpenPose
Comment lancer Explorer à partir de WSL
Comment accéder à wikipedia depuis python
Comment utiliser l'API Bing Search
Comment convertir .mgz en .nii.gz
[Python] Comment utiliser l'API Typetalk
Utiliser l'API Google Analytics de Python
De l'introduction de l'API GoogleCloudPlatform Natural Language à son utilisation
Comment gérer l'erreur OAuth2 lors de l'utilisation des API Google à partir de Python
Comment obtenir un exemple de rapport à partir d'une valeur de hachage à l'aide de l'API de Virus Total
Comment utiliser facilement les appareils électroménagers IOT de Siri par piratage API
Comment créer un clone depuis Github
[Rails] Comment présenter Google Analytics [Facile]
Comment convertir facilement le format de Markdown
[Mémo] Comment utiliser BeautifulSoup4 (1) Afficher html
Expliquer JavaScript de l'API de géocodage de Google Maps
Comment utiliser Google Test en langage C
[TF] Comment utiliser Tensorboard de Keras
Comment utiliser le multicœur du point de vue de plusieurs langues
Comment utiliser l'Assistant Google sur Windows 10
Utiliser l'API Google Cloud Vision de Python
Comment rechercher Google Drive dans Google Colaboratory
Comment accéder à RDS depuis Lambda (python)
Comment faire fonctionner Linux depuis la console
Comment installer votre propre autorité de certification (racine)
Comment créer un référentiel à partir d'un média
Comment accéder à la banque de données de l'extérieur
Comment utiliser l'API Cloud Vision de GCP
Convertir de Markdown en HTML en Python
Explication API pour toucher mastodonte de python
Connectez-vous à l'API Websocket de Coincheck depuis Python
Obtenez des utilisateurs appartenant à votre organisation à partir de l'API Garoon REST avec les requêtes Python +
Comment générer automatiquement un document API avec le framework Django REST et POST à partir de l'écran de document
Comment utiliser OAuth et API de compte de service avec le client API Google pour python