Muss ich den API-Schlüssel ausblenden, wenn ich die Google Maps js-API verwende? Wenn das so ist, wie?

Lesezeit: 10 Minuten

Muss ich den API Schlussel ausblenden wenn ich die Google Maps
fstang

Gemäß https://developers.google.com/maps/documentation/javascript/tutorial#HTML5 es scheint, ich kann das folgende Tag zu meiner HTML-Datei hinzufügen und mit der Verwendung der maps js-API beginnen.

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

Aber dies wird meinen API-Schlüssel offenbaren.

Nachdem ich bei Google gesucht und Antworten auf Stackoverflow durchsucht habe, habe ich das Gefühl, dass es vielleicht nicht nötig ist, diesen API-Schlüssel zu verbergen. Ich muss nur den Referer festlegen, wenn ich den API-Schlüssel bei Google erstelle, wie in https://stackoverflow.com/a/2256312/1316649 erläutert

Sogar andere kennen meinen API-Schlüssel, sie können ihn nicht von einer anderen Domain verwenden. Habe ich recht?

Aber Google sagt, Sie sollten den API-Schlüssel nicht in Code einbetten:
https://support.google.com/cloud/answer/6310037

Muss ich also den API-Schlüssel ausblenden, wenn ich die Google Maps js-API verwende? Wenn das so ist, wie?

Update: Mit „API-Schlüssel“ meinte ich den API-Schlüssel des Browsers.

  • Wenn der API-Schlüssel nur mit Ihrer Domain zu tun hat, welchen Unterschied macht es, wenn andere ihn sehen können?

    – Adam Buchanan Smith

    1. Juli 16 um 20:56 Uhr

  • Ich denke, die Antwort des Cloud-Supports ist ein Haken an der Sicherheit für eine Vielzahl von Google-Diensten, die Schlüssel verwenden. Da Ihr Maps-Schlüssel an Ihre Domain gebunden ist, müssen Sie sich darüber keine Gedanken machen (und können sowieso nichts tun).

    – j08691

    1. Juli 16 um 20:57 Uhr

1643881930 544 Muss ich den API Schlussel ausblenden wenn ich die Google Maps
Matti Virkkunen

Sie können mehrere API-Schlüssel mit unterschiedlichen Einschränkungen erstellen, um sie sicher zu verwenden. Für das Einbetten einer Karte finden Sie in der Google Maps-Dokumentation eine Anleitung zum Erstellen eines korrekt eingeschränkten API-Schlüssels, damit dieser nicht für andere Zwecke missbraucht werden kann Holen Sie sich einen API-Schlüssel – Einschränken von API-Schlüsseln. Es ist in Ordnung, einen eingeschränkten API-Schlüssel in Ihren Quellcode aufzunehmen, da Sie ohne dies sowieso keine Karte richtig einbetten können.

Wenn Sie einen serverseitigen API-Zugriff benötigen, können Sie einen zweiten API-Schlüssel mit weniger Einschränkungen erstellen. Das sollte man geheim halten.

  • Danke für die Antwort! Ich frage nach dem Browserschlüssel. Ich werde die Frage aktualisieren.

    – fstang

    1. Juli 16 um 21:23 Uhr

  • Es gibt eine API für die Geolokalisierung per Javascript. Es wird angenommen, dass es versteckt ist, wie es im Tutorial angegeben ist, also habe ich eine Funktion nur gemacht, um es lautlos zum Fliegen zu bringen – aber es ist immer die gleiche Taste! Die Informationen zu diesen Schlüsseln sind in Google Dev unklar, danke für die Klarstellung!

    – Gustav

    11. November 17 um 17:05 Uhr

  • Google unterscheidet nicht mehr zwischen Schlüsseltypen, und alle Sicherheitsoptionen sind für alle Schlüssel verfügbar (zum Zeitpunkt des Schreibens im November 2020). Sehen cloud.google.com/docs/authentication/api-keys

    – Sirlerche

    15. Dezember 2020 um 9:28 Uhr

  • @sirlark Danke. Ich habe die Antwort aktualisiert, um zu zeigen, wie die Dinge jetzt funktionieren.

    – Matti Virkkunen

    15. Dezember 2020 um 10:59 Uhr

Obwohl die obigen Antworten hilfreich sind, behebt keine davon die folgende Schwachstelle:

Sobald ein Benutzer Zugriff auf Ihren API-Schlüssel hat, kann er ihn immer noch so oft verwenden, wie er möchte, selbst wenn er darauf beschränkt ist, ihn nur von Ihrer Domain aus zu verwenden. Im groben Sinne könnte dies eine Million Seitenaktualisierungen (und Kartenladevorgänge) in sehr kurzer Zeit bedeuten, wodurch Sie Ihr Nutzungskontingent überschreiten.

Ich habe keine Lösungen gefunden, die dieses Problem beheben. Es sei denn, ich übersehe etwas…?

Relevante Nutzungsbeschränkungen für Google Maps Javascript API hier.

  • Ich glaube nicht, dass man dagegen etwas tun kann, ohne eine Art eigene Back-End-Implementierung, um das Hämmern einzuschränken.

    – Hakan KA

    30. November 17 um 15:24 Uhr

  • Ich stimme hoch, weil ich nach Posts gesucht habe, die über das Problem von böswilligen Benutzern gesprochen haben, die das Kontingent erschöpfen, aber ich glaube nicht, dass dies wirklich versucht, die Frage zu beantworten.

    – Kevin Workman

    02.12.18 um 23:25 Uhr

  • Das ist das Problem, das ich ansprechen muss

    – Blaue Wolken

    9. August 19 um 10:25 Uhr

  • Angenommen, Sie befinden sich in einer Infrastruktur, die Zugriff auf ein Gateway/Reverse Proxy/Ingress usw. hat, können Sie immer einen Ratenbegrenzer verwenden. Mit etwas Kreativität und möglicherweise einer serverlosen Funktion könnten Sie sogar Ihre eigenen erstellen.

    – Brandon Miller

    21. Oktober 21 um 19:38 Uhr

  • Das könnte helfen > Maps JavaScript API-Nutzung und -Abrechnung | Google-Entwickler Sie können die Anzahl der Anfragen auf 3 Arten begrenzen. 1. Kartenladevorgänge pro Tag 2. Kartenladevorgänge pro Minute 3. Kartenladevorgänge pro Minute und Benutzer

    – Kai. T

    1. Januar um 8:05 Uhr


Der von Ihnen gepostete Link, der besagt, dass Sie keine API-Schlüssel in Code einbetten sollten, bezieht sich auf die Cloud-Plattform von Google. Sie können Ihren API-Schlüssel für Google Maps in Ihrem Code belassen.

So verbergen Sie einen API-Schlüssel für einen Dienst:

  1. Entwerfen Sie einen Webserver, der Anfragen für den Drittanbieterdienst und Proxy-Anfragen an sie akzeptiert.
  2. Entwerfen Sie Ihre Schnittstelle, um Anforderungen an den Webserver zu senden, den Sie in Schritt 1 entworfen haben.
  3. Speichern Sie den Schlüssel auf dem Webserver, den Sie in Schritt 1 erstellt haben, und wenden Sie die Authentifizierung, Autorisierung und Ratenbegrenzung auf die Proxy-Anforderungen von Drittanbietern an.

Die von Ihnen verwendeten Bibliotheken von Drittanbietern zwingen Sie möglicherweise dazu, bestimmte Hosts zu verwenden, oder zwingen Sie möglicherweise, einen API-Schlüssel einzuschließen. Für das erste Problem müssen Sie entweder den Bibliothekscode bearbeiten oder die Clientbibliothek des Drittanbieters mit einer anderen HTTP-Anforderungsbibliothek bereitstellen, z. B. durch Neudefinieren der fetch() Funktion in Javascript zum Beispiel. Für das zweite Problem fügen Sie einfach einen Müllschlüssel hinzu und Ihr Proxy-Server kann ihn ignorieren und ihn mit dem echten Schlüssel neu schreiben.

Leistungen:
  • Verstecken Sie Ihre Schlüssel.
  • Verfolgen Sie wer, was und wann für Anfragen und Antworten. Sie könnten dies jedoch auf andere Weise tun.
  • Könnte dem Dienst eine Caching-Ebene hinzufügen, um Anfragen zu beschleunigen, die andere Benutzer zuvor gestellt haben, sofern ihre Nutzungsbedingungen dies zulassen.
Vorbehalte:
  1. Da Benutzer Anfragen stellen, die sich als Ihr Server ausgeben, akzeptieren Sie ein Sicherheitsrisiko. Wenn der Benutzer absichtlich in böswilliger Absicht formatierte Anfragen stellt, tut er dies, während er vorgibt, Ihr Server zu sein. Sie können jedoch alle Anfragen protokollieren, wenn Sie sie später prüfen möchten.
  2. Es dauert mehr als ein paar Sekunden, den Proxy-Server mit all der Sicherheit zu erstellen und zu konfigurieren, die Sie benötigen.
  3. Sie müssen jetzt all diese Webanfragen bearbeiten, die viel Datenverkehr bedeuten können.
  4. Möglicherweise möchten Sie die Antworten abfangen, die der Server zurückgibt, falls er den Schlüssel im Antworttext während eines Fehlers oder aus anderen Gründen zurückgibt.
  5. Sie fügen ein weiteres Glied in die Kette ein, was den Dienst etwas weniger zuverlässig macht.
Erwähnungen

Ich wollte erwähnen, dass dies im Wesentlichen das ist, was „@OLTO and SUGI-cube Project“ in ihrer Antwort zu demonstrieren versuchte und was #Brandon Miller in einem Kommentar als Lösung vorschlug.

Ich würde empfehlen, Ihre API-Schlüssel so zu beschränken, dass sie nur von den IP-Adressen und Referrer-URLs verwendet werden, die sie benötigen: Durch die Beschränkung der IP-Adressen und Referrer-URLs können Sie die Auswirkungen eines kompromittierten API-Schlüssels verringern.

Sie können die Hosts und Apps angeben, die jeden Schlüssel von der Konsole aus verwenden können, indem Sie die Seite „Anmeldeinformationen“ öffnen und dann entweder einen neuen API-Schlüssel mit den gewünschten Einstellungen erstellen oder die Einstellungen eines API-Schlüssels bearbeiten.

Dies sollte Ihnen helfen, Ihre API-Schlüssel zu sichern.

Jeff

  • Das Einschränken des Referers bewirkt absolut nichts, jeder kann es fälschen. Und die Einschränkung über IP kann nicht für öffentliche Seiten wie die Kontaktseite durchgeführt werden, da Sie nicht alle Besucher-IPs auflisten können.

    – Martin Zvarik

    20. Dezember 18 um 0:09 Uhr

1643881931 479 Muss ich den API Schlussel ausblenden wenn ich die Google Maps
OLTO und SUGI-Cube-Projekt

Sie müssen den API-Schlüssel ausblenden

Sie müssen den API-Schlüssel ausblenden, wenn Sie die Google Maps js-API verwenden. Es reicht nicht aus, dass Sie den Referer festlegen. Ich habe einen lokalen Webserver auf meinem PC und kann meine Hosts-Datei ändern, damit ich den Domainnamen meines HTML als Ihre Domain fälschen kann. Wenn Sie Ihren API-Schlüssel in Ihrem HTML offenlegen, kann jemand mit diesem Schlüssel auf Google Map zugreifen. Dies könnte eine Million Seitenaktualisierungen (und Kartenladevorgänge) bedeuten!

Das ist ein schlechtes Beispiel von Google.

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

So verstecken Sie den API-Schlüssel vor HTML

Ich verwende Umgebungsvariablen und CGI, um meinen API-Schlüssel wie folgt vor HTML zu verbergen.

1. Umgebungsvariablen festlegen

Ich setze den Google Maps-API-Schlüssel in Umgebungsvariablen und übergebe ihn an meine CGI-Skripte. nginx + fcgiwrap laufen auf meinem Server, also setze ich den API-Schlüssel in meiner fcgiwrap.conf so.

fcgiwrap.conf

location /cgi-bin/ {
    ........
    fastcgi_param GOOGLE_MAPS_API_KEY  YOUR_API_KEY; <= SET YOUR API KEY HERE
}

2. Erstellen Sie ein CGI-Skript

Ich habe Python CGI so gemacht. Dies ist dasselbe wie src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY in SAMPLE von Google.

getapijs.py

#!/usr/bin/python
# -*- coding: utf-8 -*-
import requests
import os
url="https://maps.googleapis.com/maps/api/js"
key = os.environ['GOOGLE_MAPS_API_KEY'] # get Environment Variables
mysrc = url + "?key=" + key
response = requests.get(mysrc) # get src from Google Maps url
print("'Content-Type': 'text/javascript; charset=UTF-8'") # header for HTML
print("")
print(response.text)

3. CGI aus Javascript aufrufen

Rufen Sie Ihr CGI von window.onload auf. Dies ist dasselbe wie <script defer ... &callback=initMap> in BEISPIEL von Google.

main.js

function initMap() {
    var uluru = {lat: -25.344, lng: 131.036};
    var map = new google.maps.Map(document.getElementById('map'), {zoom: 4, center: uluru});
    var marker = new google.maps.Marker({position: uluru, map: map});
}
window.onload = function() {
    fetch("/cgi-bin/getapijs.py").then(res=>{
        return res.text();
    }).then(mytext => {
        eval(mytext);
    }).then(() => {
        initMap();
    }).catch(() =>{
        // error handling
    });
}

4.Lesen Sie main.js in Ihrem HTML

einstellen <script src="main.js"></script> in Ihrem Header-Bereich.

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>

  • Das Einschränken des Referers bewirkt absolut nichts, jeder kann es fälschen. Und die Einschränkung über IP kann nicht für öffentliche Seiten wie die Kontaktseite durchgeführt werden, da Sie nicht alle Besucher-IPs auflisten können.

    – Martin Zvarik

    20. Dezember 18 um 0:09 Uhr

1643881931 678 Muss ich den API Schlussel ausblenden wenn ich die Google Maps
Brandon Miller

Die zwei am meisten akzeptierten Möglichkeiten, die ich gesehen habe, sind entweder die Verwendung von [@googlemaps/js-api-loader]1 Oder – und das ist wichtig – Ihre Schlüssel so einzuschränken, wie Google es Ihnen sagt.

.

753640cookie-checkMuss ich den API-Schlüssel ausblenden, wenn ich die Google Maps js-API verwende? Wenn das so ist, wie?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy