[PYTHON] So verbergen Sie den Google Maps-API-Schlüssel vor HTML

Ich mache mir Sorgen um API-Schlüssel bei der Verwendung der Maps JavaScript-API

Obwohl Google auf der offiziellen Website sagt: "Betten Sie den API-Schlüssel nicht direkt in den Code ein", [Offizielles Beispiel] -a-google-map) Die Codierung lautet wie folgt und ** YOUR_API_KEY ** wird im HTML-Code angezeigt. Wenn Sie damit eine Webseite erstellen, veröffentlichen Sie den API-Schlüssel weltweit. Es ist, als würde man mit Frichin auf einer öffentlichen Straße spazieren gehen. Ist die offizielle Probe ein nackter König?

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

Im Google-Dokument [API-Schlüsseleinschränkungen anwenden] wird derzeit "HTTP" angegeben. Es heißt, dass Einschränkungen durch "Verweise (Websites)" wesentlich sind, aber dies allein ist äußerst unglücklich. Wie Sie alle wissen, kann der Name einer Webseite leicht gefälscht werden, indem Sie einen Webserver lokal erstellen und mit Hosts herumspielen ... (das mache ich nicht, nur für den Fall) Um zu vermeiden, dass Sie ohne Ihr Wissen belastet werden, [API-Nutzung einschränken] -2429778502 & rd = 1) ist implementiert, aber was ist, wenn jemand irgendwo den API-Schlüssel ohne Erlaubnis verwendet und 1 Million Mal darauf zugreift? Ich kann nachts nicht schlafen ...

Verstecken Sie den API-Schlüssel außer Sichtweite

Schließlich möchte ich den API-Schlüssel nicht in HTML veröffentlichen! !! Deshalb habe ich mich für CGI entschieden, um den API-Schlüssel im Server zu verbergen.

1. 1. Auf Umgebungsvariable setzen

Übergeben Sie den API-Schlüssel mit der festgelegten Umgebungsvariablen an CGI. In meiner Umgebung wird CGI mit nginx + fcgiwrap ausgeführt. Legen Sie es daher wie folgt am Ende der Datei /etc/nginx/fcgiwrap.conf fest.

fcgiwrap.conf

location /cgi-bin/ {
・ ・ ・ ・ ・ ・
    fastcgi_param GOOGLE_MAPS_API_KEY　 YOUR_API_KEY;　＜＝YOUR_API_Ersetzen Sie den SCHLÜSSEL durch Ihren eigenen Schlüssel
}

Die hier festgelegte Einstellungsmethode hängt von Ihrer Umgebung ab (Apache usw.). Stellen Sie sie daher entsprechend Ihrer eigenen Umgebung ein.

2. Bereiten Sie CGI vor

Ersetzen Sie als Richtlinie den Teil src =" https: // maps.googleapis.com / maps / api / js des offiziellen Beispiels durch CGI. Ich verwende Python in meiner Umgebung, also sieht es so aus.

getapijs.py

#!/usr/bin/python
# -*- coding: utf-8 -*-
import requests
import os
url = 'https://maps.googleapis.com/maps/api/js' #Offizielles Beispiel-HTML ist src=Ich habe in der URL gelesen
key = os.environ['GOOGLE_MAPS_API_KEY'] #Extrahieren Sie den in der Umgebungsvariablen enthaltenen API-Schlüssel
mysrc = url + "?key=" + key #API-Schlüssel mit URL verketten
response = requests.get(mysrc) #Besuchen Sie die Google Map-Website und bringen Sie src ein
print("'Content-Type': 'text/javascript; charset=UTF-8'") #Header, um zu HTML zurückzukehren
print("")
print(response.text)

Dieser Teil ist auch für jede Umgebung unterschiedlich. Schreiben Sie ihn daher bitte in Ihrer eigenen Sprache. Der Punkt ist, dass ** den API-Schlüssel aus der Umgebungsvariablen des Servers holen **, die URL angeben und Javascript von der Google-Site abrufen. Der Header-Teil sollte "Content-Type" sein: "text / javascript; charset = UTF-8".

3. 3. Rufen Sie CGI in Javascript window.onload auf

main.js

function initMap() {
    //Entspricht dem Inhalt der offiziellen Stichprobe
    // 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() {
    //Schreiben Sie nach dem Anzeigen der Seite den Prozess, den Sie ausführen möchten. Dies ist der Punkt von hier!
    fetch("/cgi-bin/getapijs.py").then(res=>{
        //Führen Sie CGI aus und übergeben Sie als Nächstes nur den resultierenden TEXT
        return res.text();
    }).then(mytext => {
        //Führen Sie das empfangene Javascript mit EVAL aus.
        eval(mytext);
    }).then(() => {
        //Verarbeitung nach der Ausführung. Das offizielle Beispiel-HTML&callback=Der Teil, der aufgerufen wurde
        initMap();
    }).catch(() =>{
        //Bitte behandeln Sie Ihren Lieblingsfehler
    });
}

In HTML wird "