[{"data":1,"prerenderedAt":422},["ShallowReactive",2],{"blog-fr-google-api-key-exposed-in-frontend":3},{"id":4,"title":5,"body":6,"category":380,"cover":381,"coverAlt":381,"description":382,"draft":383,"extension":384,"faq":385,"image":401,"keywords":402,"meta":409,"navigation":410,"ogTitle":411,"path":412,"published":413,"seo":414,"stem":415,"tldr":416,"updated":413,"__hash__":421},"blog_fr\u002Fblog\u002Fgoogle-api-key-exposed-in-frontend.md","Une clé API Google dans votre frontend, est-ce un problème ?",{"type":7,"value":8,"toc":368},"minimark",[9,18,26,35,40,43,46,49,52,56,59,66,69,75,79,89,141,148,151,158,162,260,263,268,272,275,282,292,296,299,305,308,311,321,325,356],[10,11,12,13,17],"p",{},"Ouvrez votre appli dans un navigateur, affichez le code source de la page et\ncherchez ",[14,15,16],"code",{},"AIza",". Si une chaîne de quarante caractères apparaît, quelqu'un vous a\nprobablement déjà dit qu'elle était « exposée », sans probablement dire quoi\nfaire ensuite.",[10,19,20,21,25],{},"Voici ce que la plupart des conseils sur le sujet se trompent : ",[22,23,24],"strong",{},"une clé API\nGoogle dans votre frontend n'est pas le même genre de problème qu'une clé secrète\nStripe dans votre frontend, et la solution ne consiste pas à la cacher."," Traiter\nles deux de la même façon mène soit à paniquer pour votre carte, soit, pire, à\napprendre à hausser les épaules devant le mot « exposée » juste avant le jour où\nil compte.",[10,27,28,29,34],{},"Entre le 12 et le 14 août 2026, nous avons passé les mêmes neuf vérifications\nexternes sur 30 998 applis en ligne créées avec Lovable, Bolt, v0, Replit et\nBase44. Une clé API Google est apparue dans 1 142 d'entre elles. Une clé secrète\nStripe est apparue dans trois. Les chiffres complets sont dans\n",[30,31,33],"a",{"href":32},"\u002Fresearch\u002Fvibe-coded-app-security-2026","notre rapport de scan",".",[36,37,39],"h2",{"id":38},"est-ce-grave-que-ma-clé-api-google-soit-exposée-dans-le-frontend","Est-ce grave que ma clé API Google soit exposée dans le frontend ?",[10,41,42],{},"En général non. Tout dépend de si la clé est restreinte.",[10,44,45],{},"Une clé API Google n'est pas un mot de passe. Elle ressemble davantage à un\nnuméro de compte : elle indique à Google quel projet facturer et sur quel quota\nprélever. À elle seule, elle ne dit rien de qui envoie la requête.",[10,47,48],{},"C'est pourquoi elle peut vivre dans votre page. La carte est dessinée par le\nnavigateur de votre visiteur, donc c'est le navigateur qui doit envoyer ce numéro\nde compte à Google. Il n'existe aucune version de cela où la carte se charge et\noù le numéro reste caché.",[10,50,51],{},"La protection vient d'un second réglage, conservé du côté de Google, qui indique\ndepuis quels sites le numéro peut être utilisé. Google appelle cela une\nrestriction de référent HTTP. Une fois réglée, la clé imprimée dans votre page\nfonctionne sur votre site et renvoie une erreur partout ailleurs.",[36,53,55],{"id":54},"pourquoi-votre-appli-envoie-la-clé","Pourquoi votre appli envoie la clé",[10,57,58],{},"Parce que la requête part du navigateur de votre visiteur et non de votre\nserveur.",[10,60,61,62,65],{},"Quand quelqu'un charge une page contenant une carte, ce navigateur parle\ndirectement à ",[14,63,64],{},"maps.googleapis.com",". Il doit dire à quel projet Google la requête\nappartient, et cet identifiant doit se trouver dans la page, parce que la page\nest l'endroit d'où part la requête.",[10,67,68],{},"Google le sait. C'est pour cela que la restriction existe comme contrôle séparé :\nl'identifiant allait de toute façon devenir public, donc ce qui décide de qui\npeut l'utiliser se trouve dans un endroit que le public n'atteint pas.",[70,71],"diagram",{"alt":72,"caption":73,"src":74},"Deux rangées. Dans la rangée du haut, une restriction se dresse entre les requêtes et Google : une requête venant de yourapp.com la franchit et atteint maps.googleapis.com, tandis que la même clé envoyée depuis other.example est arrêtée à la restriction et marquée d'une croix. Dans la rangée du bas, la restriction est dessinée en trait interrompu et les deux requêtes passent, celle de l'inconnu en pointillés ambrés.","La clé est identique dans les deux rangées. La seule différence est la présence ou non d'une restriction.","\u002Fblog\u002Fgoogle-api-key-exposed-in-frontend\u002Frestricted-or-not-1600x820.png",[36,76,78],{"id":77},"comment-restreindre-une-clé-api-google","Comment restreindre une clé API Google",[10,80,81,82,88],{},"C'est gratuit, cela prend environ cinq minutes, et vous n'avez pas besoin de\ntoucher au code de votre appli. Dans la\n",[30,83,87],{"href":84,"rel":85},"https:\u002F\u002Fconsole.cloud.google.com\u002F",[86],"nofollow","console Google Cloud"," :",[90,91,92,100,110,129,138],"ol",{},[93,94,95,96,99],"li",{},"Allez dans ",[22,97,98],{},"API et services → Identifiants"," et cliquez sur la clé que vous\navez trouvée.",[93,101,102,103,106,107,34],{},"Sous ",[22,104,105],{},"Restrictions relatives aux applications",", choisissez ",[22,108,109],{},"Sites web",[93,111,112,113,116,117,120,121,124,125,128],{},"Ajoutez votre domaine. Pour un site à ",[14,114,115],{},"yourapp.com",", ajoutez\n",[14,118,119],{},"https:\u002F\u002Fyourapp.com\u002F*",". Ajoutez aussi votre domaine de préversion ou de\ntest, si vous en avez un, et souvenez-vous de l'adresse ",[14,122,123],{},".lovable.app"," ou\n",[14,126,127],{},".vercel.app"," sur laquelle votre appli était publiée avant que vous y\nrattachiez un domaine personnalisé.",[93,130,102,131,106,134,137],{},[22,132,133],{},"Restrictions relatives aux API",[22,135,136],{},"Restreindre la clé"," et\ncochez uniquement les API que votre appli appelle réellement. Une carte avec\nrecherche de lieux a besoin de l'API Maps JavaScript et de l'API Places, et de\nrien d'autre.",[93,139,140],{},"Enregistrez, attendez quelques minutes, puis chargez votre propre site et\nvérifiez que la carte se dessine toujours.",[10,142,143,144,147],{},"Si l'étape 3 est fausse, vous vous en apercevez immédiatement et visiblement : la\ncarte échoue avec ",[14,145,146],{},"RefererNotAllowedMapError"," dans la console du navigateur, ce\nqui nomme précisément le problème. Ajoutez le domaine manquant et cela\nrefonctionne. C'est un changement réversible, et c'est pourquoi il vaut la peine\nde le faire avant d'avoir fini de lire cet article.",[10,149,150],{},"Une chose à ne pas faire : les propres conseils de dépannage de Google indiquent\nque les restrictions par adresse IP sont destinées aux clés côté serveur et ne\nconviennent pas à une clé utilisée par un navigateur. Si vous restreignez une clé\nde frontend par IP, votre appli casse pour tous les visiteurs.",[10,152,153,154,34],{},"Si vous préférez voir quelles clés votre appli envoie réellement avant de les\npasser une par une, notre scan gratuit lit votre site en ligne depuis l'extérieur\net vous dit ce qu'il trouve. Il dure environ 20 secondes et ne demande aucun\ncompte : ",[30,155,157],{"href":156},"\u002F#scan","scannez votre appli",[36,159,161],{"id":160},"quels-identifiants-google-ont-leur-place-dans-un-navigateur","Quels identifiants Google ont leur place dans un navigateur",[163,164,165,184],"table",{},[166,167,168],"thead",{},[169,170,171,175,178,181],"tr",{},[172,173,174],"th",{},"Identifiant",[172,176,177],{},"À quoi cela ressemble",[172,179,180],{},"Dans votre frontend ?",[172,182,183],{},"Ce qui le protège réellement",[185,186,187,208,224,242],"tbody",{},[169,188,189,193,198,205],{},[190,191,192],"td",{},"Clé navigateur Maps ou Places",[190,194,195],{},[14,196,197],{},"AIza…",[190,199,200],{},[201,202,204],"key-verdict",{"type":203},"safe","Sa place est ici",[190,206,207],{},"La restriction de référent, plus un plafond de quota",[169,209,210,213,217,221],{},[190,211,212],{},"Clé de configuration web Firebase",[190,214,215],{},[14,216,197],{},[190,218,219],{},[201,220,204],{"type":203},[190,222,223],{},"Les règles de sécurité Firebase et App Check",[169,225,226,229,233,239],{},[190,227,228],{},"Une clé utilisée depuis votre serveur",[190,230,231],{},[14,232,197],{},[190,234,235],{},[201,236,238],{"type":237},"danger","Jamais",[190,240,241],{},"Rien, une fois publique. Gardez-la côté serveur",[169,243,244,247,253,257],{},[190,245,246],{},"Compte de service",[190,248,249,250],{},"un fichier JSON contenant ",[14,251,252],{},"\"private_key\"",[190,254,255],{},[201,256,238],{"type":237},[190,258,259],{},"Rien. Celui-là est un véritable identifiant",[10,261,262],{},"Les trois premières lignes sont la même chaîne. Une clé API Google ne porte pas\nécrit sur elle à quoi elle sert, donc la question n'est jamais « à quoi ressemble\ncette clé » mais « qu'a le droit de faire cette clé », et cette réponse vit dans\nla console et pas dans votre code.",[70,264],{"alt":265,"caption":266,"src":267},"Une seule clé AIza en haut se ramifie en trois copies identiques. La première est cochée et étiquetée yourapp.com, la deuxième est cochée et étiquetée firebaseConfig, et la troisième est barrée et étiquetée d'un astérisque représentant n'importe quel site. Séparé en dessous par un trait pointillé, un quatrième élément portant la mention type service_account est barré.","Trois d'entre elles sont les mêmes quarante caractères. Ce qui les sépare est un réglage invisible depuis le code de la page.","\u002Fblog\u002Fgoogle-api-key-exposed-in-frontend\u002Fone-shape-three-jobs-1600x720.png",[36,269,271],{"id":270},"la-clé-firebase-est-faite-pour-être-publique","La clé Firebase est faite pour être publique",[10,273,274],{},"C'est la ligne sur laquelle on nous interroge le plus, et la documentation de\nFirebase y répond clairement : les clés API des services Firebase peuvent figurer\ndans le code ou dans des fichiers de configuration, parce qu'elles ne contrôlent\nl'accès à rien. Ce sont les règles de sécurité Firebase et App Check qui en\ndécident.",[10,276,277,278,34],{},"Si cela vous semble familier, c'est le même dispositif que chez Supabase. La clé\npubliable identifie le projet, et les règles derrière elle décident ligne par\nligne qui peut lire quoi. Dans les deux cas, la clé n'est sûre que grâce à ces\nrègles, donc ce sont les règles qu'il faut aller regarder :\n",[30,279,281],{"href":280},"\u002Fblog\u002Fsupabase-rls-on-but-table-still-public","les activer ne revient pas à être protégé",[283,284,286],"callout",{"type":285},"warn",[10,287,288,291],{},[22,289,290],{},"Le seul piège Firebase, et il est récent."," La documentation de Firebase est\nprécise là-dessus : n'ajoutez pas l'API Gemini Developer, listée sous le nom de\nGenerative Language API, à la liste d'API autorisées de votre clé web Firebase.\nCette clé est publiée volontairement, et chaque appel au modèle fait avec elle\nest facturé à votre projet. L'erreur est facile à commettre dans une appli qui a\ncommencé comme une appli Firebase et a plus tard gagné une fonction d'IA, ce qui\nen fait désormais un très grand nombre.",[36,293,295],{"id":294},"ce-qui-arrive-vraiment-quand-une-clé-sans-restriction-fuit","Ce qui arrive vraiment quand une clé sans restriction fuit",[10,297,298],{},"Une facture, une panne, ou les deux. Pas une fuite de données.",[10,300,301,302,304],{},"Des robots automatiques parcourent les pages publiques en collectant les chaînes\n",[14,303,16],{},", et une clé sans restriction fonctionne depuis n'importe où, si bien que\nla vôtre finit par servir des tuiles de carte et des recherches de lieux pour le\nprojet de quelqu'un d'autre. Google le nomme directement dans sa propre\ndocumentation de démarrage : la raison de poser des restrictions est d'empêcher\nle vol de quota.",[10,306,307],{},"Vous le remarquez en général de deux façons. La facture est plus élevée que le\nmois dernier sans raison identifiable, ou les cartes de votre appli cessent de se\ndessiner en cours de mois parce que le projet a épuisé son quota et que chaque\nvisiteur voit désormais un rectangle gris.",[10,309,310],{},"Les deux se réparent. Aucune n'expose les données de vos utilisateurs, car une\nclé Maps ne peut pas lire votre base de données. C'est la différence honnête\nentre ce constat et une clé de base de données ayant fuité, et c'est pourquoi\nnotre scanner signale une clé API Google comme quelque chose à vérifier et non\ncomme une urgence.",[10,312,313,314,317,318,320],{},"Le seul identifiant Google qui se comporte réellement comme une urgence est un\ncompte de service. Si votre appli envoie un fichier JSON contenant\n",[14,315,316],{},"\"type\": \"service_account\""," et un bloc ",[14,319,252],{},", ce sont de véritables\nidentifiants avec de véritables permissions sur votre projet cloud. Supprimez la\nclé dans la console, puis regardez ce à quoi elle pouvait accéder.",[36,322,324],{"id":323},"quoi-faire-maintenant","Quoi faire maintenant",[326,327,328],"key-takeaways",{},[329,330,331,337,343,346,349],"ul",{},[93,332,333,334,336],{},"Cherchez ",[14,335,16],{}," dans le code source de votre site en ligne. Chaque occurrence est une clé dont il faut rendre compte.",[93,338,339,340,342],{},"Restreignez chacune dans la console Google Cloud : ",[22,341,109],{}," dans les restrictions relatives aux applications, votre domaine, et uniquement les API que vous utilisez. Gratuit, environ cinq minutes, aucun changement de code.",[93,344,345],{},"Posez aussi un plafond de quota quotidien sur la clé pendant que vous y êtes. La restriction réduit le trafic ; un plafond limite ce que tout cela peut coûter.",[93,347,348],{},"Laissez votre clé de configuration Firebase où elle est. Vérifiez plutôt que vos règles de sécurité font leur travail, et gardez l'API Gemini hors de la liste autorisée de cette clé.",[93,350,351,352,355],{},"Si vous trouvez un fichier JSON ",[14,353,354],{},"service_account"," dans votre frontend, traitez cela comme urgent. Supprimez la clé dans la console plutôt que de seulement retirer le fichier, car votre historique de versions contient encore l'ancienne valeur.",[10,357,358,359,363,364,34],{},"Si vous préférez traiter cela comme une liste, la\n",[30,360,362],{"href":361},"\u002Fchecklist","checklist de sécurité en 10 minutes"," couvre ce point ainsi que les\nautres choses à désactiver dans une appli tout juste lancée. Et pour la question\nplus large de savoir quelles clés ont leur place dans un navigateur, nous avons\n",[30,365,367],{"href":366},"\u002Fblog\u002Fwhich-api-keys-are-safe-in-your-frontend","un guide pour distinguer les clés publiables des clés secrètes",{"title":369,"searchDepth":370,"depth":370,"links":371},"",3,[372,374,375,376,377,378,379],{"id":38,"depth":373,"text":39},2,{"id":54,"depth":373,"text":55},{"id":77,"depth":373,"text":78},{"id":160,"depth":373,"text":161},{"id":270,"depth":373,"text":271},{"id":294,"depth":373,"text":295},{"id":323,"depth":373,"text":324},"Bases de la sécurité",null,"Une clé API Google exposée dans votre frontend est la clé que notre scanner trouve le plus souvent, et en général tout va bien. Un réglage gratuit tranche.",false,"md",[386,389,392,395,398],{"q":387,"a":388},"Quelqu'un a trouvé ma clé Google Maps dans le code de la page. Dois-je la renouveler ?","Restreignez-la d'abord : cela prend environ cinq minutes et ne casse rien. Ouvrez la clé dans la console Google Cloud, réglez les restrictions d'application sur Sites web et ajoutez votre domaine, puis limitez les restrictions d'API aux seules API que votre appli utilise. Le renouvellement vient ensuite, et seulement si la clé est restée sans restriction un certain temps et que vous voyez une consommation dont vous n'êtes pas à l'origine.",{"q":390,"a":391},"Je ne peux pas simplement cacher la clé pour que personne ne la trouve ?","Non. Le navigateur de votre visiteur doit envoyer la clé à Google pour charger la carte, donc tout ce que le navigateur peut utiliser, un visiteur peut le lire. Minifier ou renommer ne ralentit quelqu'un que quelques secondes. Restreindre la clé est la solution qui fonctionne vraiment, et elle fonctionne que quelqu'un trouve la clé ou non.",{"q":393,"a":394},"Ma clé est restreinte à mon domaine. Quelqu'un peut-il quand même l'utiliser ?","Un en-tête de référent peut être falsifié, donc une personne déterminée peut envoyer des requêtes prétendant venir de votre site. Ce que la restriction supprime, c'est le cas facile : un robot automatique qui collecte des clés sur les pages publiques et les utilise directement depuis son propre serveur. C'est ce trafic qui produit les factures surprises, donc la restriction vaut la peine même si ce n'est pas un mur. Ajoutez aussi un plafond de quota quotidien sur la clé et vous aurez une limite à ce que tout cela peut vous coûter.",{"q":396,"a":397},"Firebase a mis une clé API dans mon fichier de configuration. Est-ce une erreur ?","Non, et Firebase le documente. Une clé API web Firebase identifie votre projet au lieu d'autoriser l'accès, et l'accès est décidé par les règles de sécurité Firebase et App Check. Elle est faite pour être dans votre code. La seule chose à éviter est d'ajouter l'API Gemini Developer à la liste d'API autorisées de cette clé, car cela transforme une clé publiée volontairement en une clé qui peut dépenser de l'argent.",{"q":399,"a":400},"Et si je trouve un fichier contenant \"type\": \"service_account\" dans mon appli ?","C'est une autre situation, et elle est urgente. Une clé de compte de service est un véritable identifiant avec une clé privée dedans, et sa place est sur un serveur. Supprimez la clé dans la console Google Cloud sous IAM et administration puis Comptes de service, sortez le fichier de votre frontend, et vérifiez votre facturation et vos journaux d'audit. La supprimer du code seul ne ferme pas la porte, car l'ancienne valeur reste dans votre historique de versions.","\u002Fblog\u002Fgoogle-api-key-exposed-in-frontend\u002Fcard-800x500.png",[403,404,405,406,407,408],"clé api google dans le frontend","restreindre clé api google maps","restriction de référent http","clé api firebase publique","clé api AIza","ma clé api google est-elle sûre",{},true,"Une clé API Google dans votre frontend ?","\u002Fblog\u002Fgoogle-api-key-exposed-in-frontend","2026-08-22",{"title":5,"description":382},"blog\u002Fgoogle-api-key-exposed-in-frontend",[417,418,419,420],"Une clé API Google exposée dans votre frontend ne pose en général aucun problème, car une clé Google est un identifiant de facturation et pas un mot de passe.","Ce qui la rend sûre est une restriction de référent HTTP : un réglage qui indique à Google que la clé ne fonctionne que depuis votre propre site.","C'est gratuit, cela prend environ cinq minutes, et c'est la seule chose qui vaille la peine d'être faite aujourd'hui.","Un fichier de compte de service Google dans votre appli est le cas différent et urgent. Celui-là est un véritable identifiant.","WkaQiZ2FnM4OLc6ZqMp6xibMAwVy0XBBAsV2kE8eXjo",1787826048205]