[{"data":1,"prerenderedAt":423},["ShallowReactive",2],{"blog-de-google-api-key-exposed-in-frontend":3},{"id":4,"title":5,"body":6,"category":381,"cover":382,"coverAlt":382,"description":383,"draft":384,"extension":385,"faq":386,"image":402,"keywords":403,"meta":410,"navigation":411,"ogTitle":412,"path":413,"published":414,"seo":415,"stem":416,"tldr":417,"updated":414,"__hash__":422},"blog_de\u002Fblog\u002Fgoogle-api-key-exposed-in-frontend.md","Ist ein Google-API-Schlüssel im Frontend ein Problem?",{"type":7,"value":8,"toc":369},"minimark",[9,18,26,35,40,43,46,49,52,56,59,66,69,75,79,89,141,148,151,158,162,261,264,269,273,276,283,293,297,300,306,309,312,322,326,357],[10,11,12,13,17],"p",{},"Öffne deine App im Browser, sieh dir den Seitenquelltext an und suche nach\n",[14,15,16],"code",{},"AIza",". Wenn eine vierzig Zeichen lange Zeichenfolge auftaucht, hat dir\nvermutlich schon jemand gesagt, sie sei „offengelegt\", und vermutlich nicht\ndazugesagt, was nun zu tun ist.",[10,19,20,21,25],{},"Hier ist der Punkt, den die meisten Ratgeber falsch darstellen: ",[22,23,24],"strong",{},"Ein\nGoogle-API-Schlüssel im Frontend ist nicht dieselbe Art von Problem wie ein\ngeheimer Stripe-Schlüssel im Frontend, und die Lösung besteht nicht darin, ihn zu\nverstecken."," Beide gleich zu behandeln führt entweder zu Panik wegen deiner\nKarte oder, schlimmer, dazu, dass du das Wort „offengelegt\" achselzuckend\nübergehst, kurz bevor es wirklich zählt.",[10,27,28,29,34],{},"Zwischen dem 12. und 14. August 2026 haben wir dieselben neun externen Prüfungen\nüber 30.998 live erreichbare Apps laufen lassen, gebaut mit Lovable, Bolt, v0,\nReplit und Base44. In 1.142 davon steckte ein Google-API-Schlüssel. In dreien\nsteckte ein geheimer Stripe-Schlüssel. Die vollständigen Zahlen stehen in\n",[30,31,33],"a",{"href":32},"\u002Fresearch\u002Fvibe-coded-app-security-2026","unserem Scan-Bericht",".",[36,37,39],"h2",{"id":38},"ist-es-schlimm-wenn-mein-google-api-schlüssel-im-frontend-sichtbar-ist","Ist es schlimm, wenn mein Google-API-Schlüssel im Frontend sichtbar ist?",[10,41,42],{},"Meistens nicht. Es hängt ganz davon ab, ob der Schlüssel eingeschränkt ist.",[10,44,45],{},"Ein Google-API-Schlüssel ist kein Passwort. Er ähnelt eher einer Kundennummer: Er\nsagt Google, welches Projekt abgerechnet und welches Kontingent belastet wird.\nFür sich genommen sagt er nichts darüber aus, wer die Anfrage stellt.",[10,47,48],{},"Deshalb darf er auf deiner Seite stehen. Die Karte wird vom Browser deines\nBesuchers gezeichnet, also muss der Browser die Kundennummer an Google schicken.\nEs gibt keine Variante davon, in der die Karte lädt und die Nummer verborgen\nbleibt.",[10,50,51],{},"Der Schutz kommt aus einer zweiten Einstellung auf Googles Seite, die festlegt,\nvon welchen Websites die Nummer benutzt werden darf. Google nennt das eine\nHTTP-Referrer-Einschränkung. Ist sie gesetzt, funktioniert der in deiner Seite\nabgedruckte Schlüssel auf deiner Website und gibt überall sonst einen Fehler\nzurück.",[36,53,55],{"id":54},"warum-deine-app-den-schlüssel-überhaupt-ausliefert","Warum deine App den Schlüssel überhaupt ausliefert",[10,57,58],{},"Weil die Anfrage vom Browser deines Besuchers ausgeht und nicht von deinem\nServer.",[10,60,61,62,65],{},"Wenn jemand eine Seite mit einer Karte lädt, spricht dieser Browser direkt mit\n",[14,63,64],{},"maps.googleapis.com",". Er muss angeben, zu welchem Google-Projekt die Anfrage\ngehört, und diese Kennung muss in der Seite stehen, weil die Anfrage von der\nSeite ausgeht.",[10,67,68],{},"Google weiß das. Genau deshalb existiert die Einschränkung als eigenes\nSteuerelement: Die Kennung würde ohnehin öffentlich werden, also liegt die\nEntscheidung darüber, wer sie benutzen darf, an einem Ort, den die Öffentlichkeit\nnicht erreicht.",[70,71],"diagram",{"alt":72,"caption":73,"src":74},"Zwei Reihen. In der oberen Reihe steht eine Einschränkung zwischen den Anfragen und Google: Eine Anfrage von yourapp.com kommt durch und erreicht maps.googleapis.com, während derselbe Schlüssel von other.example an der Einschränkung gestoppt und mit einem Kreuz markiert wird. In der unteren Reihe ist die Einschränkung als unterbrochene Linie gezeichnet und beide Anfragen kommen durch, die des Fremden gestrichelt in Bernstein.","Der Schlüssel ist in beiden Reihen identisch. Der einzige Unterschied ist, ob eine Einschränkung darauf gesetzt ist.","\u002Fblog\u002Fgoogle-api-key-exposed-in-frontend\u002Frestricted-or-not-1600x820.png",[36,76,78],{"id":77},"so-schränkst-du-einen-google-api-schlüssel-ein","So schränkst du einen Google-API-Schlüssel ein",[10,80,81,82,88],{},"Es ist kostenlos, dauert etwa fünf Minuten, und du musst den Code deiner App\nnicht anfassen. In der\n",[30,83,87],{"href":84,"rel":85},"https:\u002F\u002Fconsole.cloud.google.com\u002F",[86],"nofollow","Google Cloud Console",":",[90,91,92,100,110,129,138],"ol",{},[93,94,95,96,99],"li",{},"Gehe zu ",[22,97,98],{},"APIs & Dienste → Anmeldedaten"," und klicke auf den gefundenen\nSchlüssel.",[93,101,102,103,106,107,34],{},"Wähle unter ",[22,104,105],{},"Anwendungseinschränkungen"," die Option ",[22,108,109],{},"Websites",[93,111,112,113,116,117,120,121,124,125,128],{},"Trage deine Domain ein. Für eine Website unter ",[14,114,115],{},"yourapp.com"," also\n",[14,118,119],{},"https:\u002F\u002Fyourapp.com\u002F*",". Trage auch deine Vorschau- oder Staging-Domain ein,\nfalls du eine hast, und denk an die ",[14,122,123],{},".lovable.app","- oder ",[14,126,127],{},".vercel.app","-Adresse,\nunter der deine App veröffentlicht war, bevor du eine eigene Domain angebunden\nhast.",[93,130,102,131,106,134,137],{},[22,132,133],{},"API-Einschränkungen",[22,135,136],{},"Schlüssel einschränken"," und\nhake nur die APIs an, die deine App wirklich aufruft. Eine Karte mit Ortssuche\nbraucht die Maps JavaScript API und die Places API, sonst nichts.",[93,139,140],{},"Speichern, ein paar Minuten warten, dann deine eigene Website laden und\nprüfen, ob die Karte noch gezeichnet wird.",[10,142,143,144,147],{},"Ist Schritt 3 falsch, merkst du es sofort und sichtbar: Die Karte scheitert mit\n",[14,145,146],{},"RefererNotAllowedMapError"," in der Browser-Konsole, was das Problem genau\nbenennt. Trage die fehlende Domain nach, und es funktioniert wieder. Diese\nÄnderung ist umkehrbar, und deshalb lohnt es sich, sie zu machen, bevor du diesen\nArtikel zu Ende gelesen hast.",[10,149,150],{},"Eines solltest du nicht tun: Googles eigene Hinweise zur Fehlersuche sagen, dass\nIP-Einschränkungen für serverseitige Schlüssel gedacht und für einen im Browser\nbenutzten Schlüssel ungeeignet sind. Schränkst du einen Frontend-Schlüssel per IP\nein, bricht deine App für jeden Besucher.",[10,152,153,154,34],{},"Wenn du lieber erst siehst, welche Schlüssel deine App tatsächlich ausliefert,\nstatt sie einzeln durchzugehen: Unser kostenloser Scan liest deine Live-Website\nvon außen und zeigt dir, was er findet. Er dauert etwa 20 Sekunden und braucht\nkein Konto: ",[30,155,157],{"href":156},"\u002F#scan","App scannen",[36,159,161],{"id":160},"welche-google-zugangsdaten-in-einen-browser-gehören","Welche Google-Zugangsdaten in einen Browser gehören",[163,164,165,184],"table",{},[166,167,168],"thead",{},[169,170,171,175,178,181],"tr",{},[172,173,174],"th",{},"Zugangsdaten",[172,176,177],{},"Wie es aussieht",[172,179,180],{},"Im Frontend?",[172,182,183],{},"Was tatsächlich schützt",[185,186,187,208,224,242],"tbody",{},[169,188,189,193,198,205],{},[190,191,192],"td",{},"Maps- oder Places-Browser-Schlüssel",[190,194,195],{},[14,196,197],{},"AIza…",[190,199,200],{},[201,202,204],"key-verdict",{"type":203},"safe","Gehört hierher",[190,206,207],{},"Die Referrer-Einschränkung plus ein Kontingentlimit",[169,209,210,213,217,221],{},[190,211,212],{},"Firebase-Web-Konfigurationsschlüssel",[190,214,215],{},[14,216,197],{},[190,218,219],{},[201,220,204],{"type":203},[190,222,223],{},"Firebase Security Rules und App Check",[169,225,226,229,233,239],{},[190,227,228],{},"Ein Schlüssel für deinen Server",[190,230,231],{},[14,232,197],{},[190,234,235],{},[201,236,238],{"type":237},"danger","Niemals",[190,240,241],{},"Nichts, sobald er öffentlich ist. Serverseitig halten",[169,243,244,247,254,258],{},[190,245,246],{},"Dienstkonto",[190,248,249,250,253],{},"eine JSON-Datei mit ",[14,251,252],{},"\"private_key\""," darin",[190,255,256],{},[201,257,238],{"type":237},[190,259,260],{},"Nichts. Das sind echte Zugangsdaten",[10,262,263],{},"Die ersten drei Zeilen sind dieselbe Zeichenfolge. Einem Google-API-Schlüssel\nsieht man vorne nicht an, wofür er da ist. Die Frage lautet also nie „wie sieht\ndieser Schlüssel aus\", sondern „was darf dieser Schlüssel\", und diese Antwort\nsteht in der Console und nicht in deinem Code.",[70,265],{"alt":266,"caption":267,"src":268},"Ein einzelner AIza-Schlüssel oben verzweigt sich in drei identische Kopien. Die erste ist abgehakt und mit yourapp.com beschriftet, die zweite ist abgehakt und mit firebaseConfig beschriftet, die dritte ist durchgekreuzt und mit einem Sternchen für beliebige Websites beschriftet. Darunter, durch eine gestrichelte Linie abgetrennt, ist ein viertes Element mit der Aufschrift type service_account durchgekreuzt.","Drei davon sind dieselben vierzig Zeichen. Was sie unterscheidet, ist eine Einstellung, die man im Seitenquelltext nicht sehen kann.","\u002Fblog\u002Fgoogle-api-key-exposed-in-frontend\u002Fone-shape-three-jobs-1600x720.png",[36,270,272],{"id":271},"der-firebase-schlüssel-soll-öffentlich-sein","Der Firebase-Schlüssel soll öffentlich sein",[10,274,275],{},"Das ist die Zeile, nach der am häufigsten gefragt wird, und Firebases eigene\nDokumentation beantwortet sie unmissverständlich: API-Schlüssel für\nFirebase-Dienste dürfen in Code oder Konfigurationsdateien stehen, weil sie den\nZugriff auf gar nichts steuern. Das entscheiden die Firebase Security Rules und\nApp Check.",[10,277,278,279,34],{},"Falls dir das bekannt vorkommt: Es ist dieselbe Anordnung wie bei Supabase. Der\nöffentliche Schlüssel benennt das Projekt, und die Regeln dahinter entscheiden\nZeile für Zeile, wer was lesen darf. In beiden Fällen ist der Schlüssel nur wegen\ndieser Regeln sicher, also sind die Regeln das, was du dir ansehen solltest:\n",[30,280,282],{"href":281},"\u002Fblog\u002Fsupabase-rls-on-but-table-still-public","sie einzuschalten bedeutet nicht, geschützt zu sein",[284,285,287],"callout",{"type":286},"warn",[10,288,289,292],{},[22,290,291],{},"Die eine Firebase-Falle, und sie ist neu."," Firebases Dokumentation wird hier\ndeutlich: Nimm die Gemini Developer API, dort als Generative Language API\ngeführt, nicht in die Zulassungsliste deines Firebase-Web-Schlüssels auf. Dieser\nSchlüssel ist absichtlich veröffentlicht, und jeder Modellaufruf damit wird\ndeinem Projekt in Rechnung gestellt. In einer App, die als Firebase-App begann\nund später ein KI-Feature bekam, passiert das leicht, und das sind inzwischen\nsehr viele.",[36,294,296],{"id":295},"was-passiert-wenn-ein-uneingeschränkter-schlüssel-abfließt","Was passiert, wenn ein uneingeschränkter Schlüssel abfließt",[10,298,299],{},"Eine Rechnung, ein Ausfall oder beides. Kein Datenleck.",[10,301,302,303,305],{},"Automatische Scraper durchsuchen öffentliche Seiten nach ",[14,304,16],{},"-Zeichenfolgen,\nund ein uneingeschränkter Schlüssel funktioniert von überall. Deiner liefert dann\nKartenkacheln und Ortsabfragen für das Projekt von jemand anderem. Google benennt\ndas direkt in seiner eigenen Einstiegsdokumentation: Der Grund für\nEinschränkungen ist, Kontingentdiebstahl zu verhindern.",[10,307,308],{},"Du bemerkst es normalerweise auf eine von zwei Arten. Die Rechnung ist höher als\nim Vormonat, ohne dass du sagen könntest warum, oder die Karten deiner App hören\nmitten im Monat auf zu laden, weil das Projekt sein Kontingent aufgebraucht hat\nund jeder Besucher nun ein graues Rechteck sieht.",[10,310,311],{},"Beides lässt sich beheben. Beides legt keine Daten deiner Nutzer offen, denn ein\nMaps-Schlüssel kann deine Datenbank nicht lesen. Das ist der ehrliche Unterschied\nzwischen diesem Fund und einem abgeflossenen Datenbankschlüssel, und deshalb\nmeldet unser Scanner einen Google-API-Schlüssel als etwas zum Nachsehen und nicht\nals Notfall.",[10,313,314,315,318,319,321],{},"Die eine Google-Zugangsdatei, die sich tatsächlich wie ein Notfall verhält, ist\nein Dienstkonto. Liefert deine App eine JSON-Datei mit\n",[14,316,317],{},"\"type\": \"service_account\""," und einem ",[14,320,252],{},"-Block aus, dann sind das\nechte Zugangsdaten mit echten Berechtigungen für dein Cloud-Projekt. Lösche den\nSchlüssel in der Console und sieh dann nach, worauf er Zugriff hatte.",[36,323,325],{"id":324},"was-du-jetzt-tun-solltest","Was du jetzt tun solltest",[327,328,329],"key-takeaways",{},[330,331,332,338,344,347,350],"ul",{},[93,333,334,335,337],{},"Durchsuche den Seitenquelltext deiner Live-Website nach ",[14,336,16],{},". Für jeden Treffer musst du geradestehen.",[93,339,340,341,343],{},"Schränke jeden davon in der Google Cloud Console ein: ",[22,342,109],{}," unter den Anwendungseinschränkungen, deine Domain, und nur die APIs, die du nutzt. Kostenlos, etwa fünf Minuten, keine Codeänderung.",[93,345,346],{},"Setz gleich noch ein Tageslimit für das Kontingent. Die Einschränkung senkt den Verkehr; ein Limit deckelt, was davon überhaupt kosten kann.",[93,348,349],{},"Lass deinen Firebase-Konfigurationsschlüssel, wo er ist. Prüfe stattdessen, ob deine Security Rules ihre Arbeit tun, und halte die Gemini API aus der Zulassungsliste dieses Schlüssels heraus.",[93,351,352,353,356],{},"Findest du eine ",[14,354,355],{},"service_account","-JSON-Datei in deinem Frontend, behandle das als dringend. Lösche den Schlüssel in der Console, statt nur die Datei zu entfernen, denn deine Versionsgeschichte enthält den alten Wert weiterhin.",[10,358,359,360,364,365,34],{},"Wenn du das lieber als Liste abarbeitest: Die\n",[30,361,363],{"href":362},"\u002Fchecklist","10-Minuten-Sicherheitscheckliste"," deckt das zusammen mit den anderen\nDingen ab, die man in einer frisch veröffentlichten App abschalten sollte. Und\nfür die größere Frage, welche Schlüssel überhaupt in einen Browser gehören, haben\nwir\n",[30,366,368],{"href":367},"\u002Fblog\u002Fwhich-api-keys-are-safe-in-your-frontend","eine Anleitung, wie du öffentliche von geheimen Schlüsseln unterscheidest",{"title":370,"searchDepth":371,"depth":371,"links":372},"",3,[373,375,376,377,378,379,380],{"id":38,"depth":374,"text":39},2,{"id":54,"depth":374,"text":55},{"id":77,"depth":374,"text":78},{"id":160,"depth":374,"text":161},{"id":271,"depth":374,"text":272},{"id":295,"depth":374,"text":296},{"id":324,"depth":374,"text":325},"Sicherheitsgrundlagen",null,"Ein Google-API-Schlüssel im Frontend ist der Fund unseres Scanners Nummer eins, und meistens unbedenklich. Eine kostenlose Einstellung entscheidet darüber.",false,"md",[387,390,393,396,399],{"q":388,"a":389},"Jemand hat meinen Google-Maps-Schlüssel im Seitenquelltext gefunden. Soll ich ihn austauschen?","Schränke ihn zuerst ein, das dauert etwa fünf Minuten und macht nichts kaputt. Öffne den Schlüssel in der Google Cloud Console, setze die Anwendungseinschränkungen auf Websites und trage deine Domain ein, und beschränke ihn dann unter API-Einschränkungen auf die APIs, die deine App nutzt. Austauschen kommt danach, und nur wenn der Schlüssel eine Weile uneingeschränkt war und du Nutzung siehst, die nicht von dir stammt.",{"q":391,"a":392},"Kann ich den Schlüssel nicht einfach verstecken?","Nein. Der Browser deines Besuchers muss den Schlüssel an Google schicken, um die Karte zu laden. Alles, was der Browser benutzen kann, kann ein Besucher lesen. Minifizieren oder Umbenennen hält jemanden nur ein paar Sekunden auf. Den Schlüssel einzuschränken ist die Lösung, die tatsächlich wirkt, und sie wirkt unabhängig davon, ob jemand den Schlüssel findet.",{"q":394,"a":395},"Mein Schlüssel ist auf meine Domain beschränkt. Kann ihn trotzdem jemand benutzen?","Ein Referrer-Header lässt sich fälschen, also kann jemand mit genug Entschlossenheit Anfragen schicken, die vorgeben, von deiner Website zu kommen. Was die Einschränkung beseitigt, ist der einfache Fall: ein automatischer Scraper, der Schlüssel auf öffentlichen Seiten einsammelt und sie direkt von seinem eigenen Server aus benutzt. Genau dieser Verkehr erzeugt überraschende Rechnungen, also lohnt sich die Einschränkung, auch wenn sie keine Mauer ist. Setz zusätzlich ein Tageslimit für das Kontingent, dann hast du eine Obergrenze für alles, was das kosten kann.",{"q":397,"a":398},"Firebase hat einen API-Schlüssel in meine Konfigurationsdatei geschrieben. Ist das ein Fehler?","Nein, und Firebase dokumentiert das. Ein Firebase-Web-API-Schlüssel benennt dein Projekt, statt Zugriff zu gewähren, und über den Zugriff entscheiden stattdessen die Firebase Security Rules und App Check. Er gehört in deinen Code. Vermeiden solltest du nur eines: die Gemini Developer API in die Zulassungsliste dieses Schlüssels aufzunehmen, denn das macht aus einem absichtlich veröffentlichten Schlüssel einen, der Geld ausgeben kann.",{"q":400,"a":401},"Was, wenn ich in meiner App eine Datei mit \"type\": \"service_account\" finde?","Das ist eine andere Lage, und sie ist dringend. Ein Dienstkonto-Schlüssel enthält echte Zugangsdaten mit einem privaten Schlüssel darin und gehört auf einen Server. Lösche den Schlüssel in der Google Cloud Console unter IAM und Verwaltung, dann Dienstkonten, nimm die Datei aus deinem Frontend, und prüfe deine Abrechnung und deine Audit-Logs. Ihn nur aus dem Code zu löschen schließt die Tür nicht, weil der alte Wert weiterhin in deiner Versionsgeschichte steht.","\u002Fblog\u002Fgoogle-api-key-exposed-in-frontend\u002Fcard-800x500.png",[404,405,406,407,408,409],"google api key im frontend","google maps api-schlüssel einschränken","http-referrer-einschränkung","firebase api-schlüssel öffentlich","AIza api-schlüssel","ist mein google api-schlüssel sicher",{},true,"Google-API-Schlüssel im Frontend sichtbar?","\u002Fblog\u002Fgoogle-api-key-exposed-in-frontend","2026-08-22",{"title":5,"description":383},"blog\u002Fgoogle-api-key-exposed-in-frontend",[418,419,420,421],"Ein Google-API-Schlüssel im Frontend ist meistens unbedenklich, denn ein Google-Schlüssel ist eine Abrechnungskennung und kein Passwort.","Unbedenklich macht ihn eine HTTP-Referrer-Einschränkung: eine Einstellung, die Google sagt, dass der Schlüssel nur von deiner eigenen Website aus funktioniert.","Sie ist kostenlos, dauert etwa fünf Minuten und ist die eine Sache, die sich heute lohnt.","Eine Google-Dienstkonto-Datei in deiner App ist der andere, dringende Fall. Das sind echte Zugangsdaten.","len45UO-Zjb8jrUC3TFgda5z8T6DuggH9rWVpRTdNb0",1787826048205]