[{"data":1,"prerenderedAt":422},["ShallowReactive",2],{"blog-uk-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_uk\u002Fblog\u002Fgoogle-api-key-exposed-in-frontend.md","Чи є проблемою ключ API Google у вашому браузері?",{"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",{},"Відкрийте свій застосунок у браузері, подивіться код сторінки й пошукайте\n",[14,15,16],"code",{},"AIza",". Якщо у відповідь з’явиться рядок із сорока символів, вам, найпевніше, уже\nсказали, що він «у відкритому доступі», і, найпевніше, не сказали, що робити\nдалі.",[10,19,20,21,25],{},"Ось те, у чому більшість порад на цю тему помиляється: ",[22,23,24],"strong",{},"ключ API Google у коді\nвашої сторінки це не та сама проблема, що й секретний ключ Stripe у коді вашої\nсторінки, і рішення полягає не в тому, щоб його сховати."," Ставитися до них\nоднаково означає або панікувати через свою карту, або, що гірше, звикнути\nзнизувати плечима на слова «у відкритому доступі» саме перед тим днем, коли це\nматиме значення.",[10,27,28,29,34],{},"Між 12 і 14 серпня 2026 року ми провели ті самі дев’ять зовнішніх перевірок для\n30 998 робочих застосунків, створених у Lovable, Bolt, v0, Replit і Base44. У\n1 142 з них знайшовся ключ API Google. У трьох знайшовся секретний ключ Stripe.\nПовні цифри є в ",[30,31,33],"a",{"href":32},"\u002Fresearch\u002Fvibe-coded-app-security-2026","нашому звіті про сканування",".",[36,37,39],"h2",{"id":38},"чи-погано-що-мій-ключ-api-google-видно-в-коді-сторінки","Чи погано, що мій ключ API Google видно в коді сторінки?",[10,41,42],{},"Зазвичай ні. Усе залежить від того, чи обмежений цей ключ.",[10,44,45],{},"Ключ API Google не є паролем. Він радше схожий на номер рахунку: він каже Google,\nякий проєкт виставляти до сплати і з якої квоти списувати. Сам собою він нічого\nне каже про те, хто робить запит.",[10,47,48],{},"Саме тому він може жити на вашій сторінці. Карту малює браузер вашого\nвідвідувача, тож саме браузер має надіслати цей номер рахунку до Google. Немає\nтакого варіанту, у якому карта завантажується, а номер лишається прихованим.",[10,50,51],{},"Захист дає друге налаштування, що зберігається на боці Google і визначає, з яких\nсайтів цим номером можна користуватися. Google називає це обмеженням за\nHTTP-referrer. Коли воно встановлене, надрукований на вашій сторінці ключ працює\nна вашому сайті й повертає помилку скрізь інде.",[36,53,55],{"id":54},"чому-ваш-застосунок-узагалі-віддає-ключ","Чому ваш застосунок узагалі віддає ключ",[10,57,58],{},"Тому що запит іде з браузера вашого відвідувача, а не з вашого сервера.",[10,60,61,62,65],{},"Коли хтось завантажує сторінку з картою, цей браузер звертається просто до\n",[14,63,64],{},"maps.googleapis.com",". Він має вказати, якому проєкту Google належить запит, і цей\nідентифікатор має бути на сторінці, бо саме зі сторінки запит і робиться.",[10,67,68],{},"Google це знає. Саме тому обмеження існує як окремий елемент керування:\nідентифікатор однаково став би публічним, тож те, що вирішує, хто може ним\nкористуватися, живе там, куди публіка не дістанеться.",[70,71],"diagram",{"alt":72,"caption":73,"src":74},"Два рядки. У верхньому рядку обмеження стоїть між запитами та Google: запит із yourapp.com проходить крізь нього й досягає maps.googleapis.com, тоді як той самий ключ, надісланий із other.example, зупиняється на обмеженні й позначається хрестиком. У нижньому рядку обмеження намальоване перерваною лінією, і обидва запити проходять, а запит стороннього показано бурштиновим пунктиром.","Ключ в обох рядках однаковий. Різниця лише в тому, чи встановлено на ньому обмеження.","\u002Fblog\u002Fgoogle-api-key-exposed-in-frontend\u002Frestricted-or-not-1600x820.png",[36,76,78],{"id":77},"як-обмежити-ключ-api-google","Як обмежити ключ API Google",[10,80,81,82,88],{},"Це безкоштовно, займає близько п’яти хвилин, і торкатися коду застосунку не\nпотрібно. У ",[30,83,87],{"href":84,"rel":85},"https:\u002F\u002Fconsole.cloud.google.com\u002F",[86],"nofollow","консолі Google Cloud",":",[90,91,92,100,110,129,138],"ol",{},[93,94,95,96,99],"li",{},"Перейдіть до ",[22,97,98],{},"API та сервіси → Облікові дані"," й натисніть на знайдений\nключ.",[93,101,102,103,106,107,34],{},"У розділі ",[22,104,105],{},"Обмеження застосунку"," виберіть ",[22,108,109],{},"Вебсайти",[93,111,112,113,116,117,120,121,124,125,128],{},"Додайте свій домен. Для сайту на ",[14,114,115],{},"yourapp.com"," додайте\n",[14,118,119],{},"https:\u002F\u002Fyourapp.com\u002F*",". Додайте також домен попереднього перегляду чи\nтестовий, якщо він у вас є, і згадайте адресу ",[14,122,123],{},".lovable.app"," або\n",[14,126,127],{},".vercel.app",", на якій ваш застосунок був опублікований до того, як ви\nпід’єднали власний домен.",[93,130,102,131,106,134,137],{},[22,132,133],{},"Обмеження API",[22,135,136],{},"Обмежити ключ"," і позначте лише ті\nAPI, які ваш застосунок справді викликає. Карті з пошуком місць потрібні Maps\nJavaScript API та Places API, і більше нічого.",[93,139,140],{},"Збережіть, зачекайте кілька хвилин, потім завантажте власний сайт і\nперевірте, чи карта досі малюється.",[10,142,143,144,147],{},"Якщо крок 3 зроблено неправильно, ви дізнаєтеся про це одразу й наочно: карта\nпадає з ",[14,145,146],{},"RefererNotAllowedMapError"," у консолі браузера, і це називає проблему\nточно. Додайте домен, якого бракує, і все знову працює. Ця зміна оборотна, і саме\nтому її варто зробити ще до того, як ви дочитаєте цю статтю.",[10,149,150],{},"Одного робити не варто: власні поради Google щодо усунення несправностей кажуть,\nщо обмеження за IP-адресою призначені для серверних ключів і не підходять для\nключа, яким користується браузер. Якщо обмежити фронтендний ключ за IP, ваш\nзастосунок зламається для кожного відвідувача.",[10,152,153,154,34],{},"Якщо ви радше подивилися б, які ключі ваш застосунок насправді віддає, ніж\nперебирали їх по одному, наше безкоштовне сканування читає ваш робочий сайт\nззовні й показує, що воно бачить. Це триває близько 20 секунд і не потребує\nакаунта: ",[30,155,157],{"href":156},"\u002F#scan","сканувати застосунок",[36,159,161],{"id":160},"які-облікові-дані-google-доречні-в-браузері","Які облікові дані Google доречні в браузері",[163,164,165,184],"table",{},[166,167,168],"thead",{},[169,170,171,175,178,181],"tr",{},[172,173,174],"th",{},"Облікові дані",[172,176,177],{},"Який вигляд має",[172,179,180],{},"У коді сторінки?",[172,182,183],{},"Що насправді захищає",[185,186,187,208,224,242],"tbody",{},[169,188,189,193,198,205],{},[190,191,192],"td",{},"Браузерний ключ Maps або Places",[190,194,195],{},[14,196,197],{},"AIza…",[190,199,200],{},[201,202,204],"key-verdict",{"type":203},"safe","Тут доречно",[190,206,207],{},"Обмеження за referrer плюс ліміт квоти",[169,209,210,213,217,221],{},[190,211,212],{},"Вебключ конфігурації Firebase",[190,214,215],{},[14,216,197],{},[190,218,219],{},[201,220,204],{"type":203},[190,222,223],{},"Правила безпеки Firebase та App Check",[169,225,226,229,233,239],{},[190,227,228],{},"Ключ, який ви використовуєте на сервері",[190,230,231],{},[14,232,197],{},[190,234,235],{},[201,236,238],{"type":237},"danger","Ніколи",[190,240,241],{},"Нічого, щойно він став публічним",[169,243,244,247,253,257],{},[190,245,246],{},"Сервісний акаунт",[190,248,249,250],{},"файл JSON, що містить ",[14,251,252],{},"\"private_key\"",[190,254,255],{},[201,256,238],{"type":237},[190,258,259],{},"Нічого. Ось це справжні облікові дані",[10,261,262],{},"Перші три рядки це той самий рядок символів. На ключі API Google спереду не\nнаписано, для чого він, тож питання ніколи не звучить як «який вигляд має цей\nключ», а звучить як «що цьому ключу дозволено», і ця відповідь живе в консолі, а\nне у вашому коді.",[70,264],{"alt":265,"caption":266,"src":267},"Один ключ AIza угорі розгалужується на три однакові копії. Перша позначена галочкою й підписана yourapp.com, друга позначена галочкою й підписана firebaseConfig, а третя перекреслена й підписана зірочкою, що означає будь-який сайт. Нижче, відокремлений пунктирною лінією, перекреслений четвертий елемент із написом type service_account.","Три з них це ті самі сорок символів. Розділяє їх налаштування, якого в коді сторінки не видно.","\u002Fblog\u002Fgoogle-api-key-exposed-in-frontend\u002Fone-shape-three-jobs-1600x720.png",[36,269,271],{"id":270},"ключ-firebase-створений-щоб-бути-публічним","Ключ Firebase створений, щоб бути публічним",[10,273,274],{},"Це той рядок, про який запитують найчастіше, і власна документація Firebase\nвідповідає на це прямо: ключі API для сервісів Firebase можна тримати в коді чи\nу файлах конфігурації, бо вони ні до чого не надають доступ. Це вирішують правила\nбезпеки Firebase та App Check.",[10,276,277,278,34],{},"Якщо це звучить знайомо, то це той самий устрій, що й у Supabase. Публічний ключ\nпозначає проєкт, а правила за ним вирішують рядок за рядком, хто що може читати.\nВ обох випадках ключ безпечний лише завдяки цим правилам, тож саме на правила\nварто піти й подивитися:\n",[30,279,281],{"href":280},"\u002Fblog\u002Fsupabase-rls-on-but-table-still-public","увімкнути їх не означає бути захищеним",[283,284,286],"callout",{"type":285},"warn",[10,287,288,291],{},[22,289,290],{},"Єдина пастка Firebase, і вона нова."," Документація Firebase каже про це чітко:\nне додавайте Gemini Developer API, наведений там як Generative Language API, до\nсписку дозволених API вашого вебключа Firebase. Цей ключ опублікований навмисно,\nі кожен виклик моделі через нього виставляється до сплати вашому проєкту. Таку\nпомилку легко зробити в застосунку, який починався як застосунок на Firebase, а\nзгодом отримав функцію зі штучним інтелектом, а таких уже дуже багато.",[36,293,295],{"id":294},"що-насправді-стається-коли-витікає-необмежений-ключ","Що насправді стається, коли витікає необмежений ключ",[10,297,298],{},"Рахунок, простій або і те, і те. Не витік даних.",[10,300,301,302,304],{},"Автоматичні збирачі обходять публічні сторінки, вишукуючи рядки ",[14,303,16],{},", а\nнеобмежений ключ працює звідусіль, тож ваш зрештою обслуговує фрагменти карти й\nпошук місць для чужого проєкту. Google називає це прямо у власній документації\nдля початківців: причина встановлювати обмеження полягає в тому, щоб запобігти\nкрадіжці квоти.",[10,306,307],{},"Помічають це зазвичай одним із двох способів. Рахунок більший, ніж минулого\nмісяця, без причини, яку ви могли б назвати, або карти вашого застосунку\nперестають малюватися посеред місяця, бо проєкт вичерпав квоту й кожен відвідувач\nтепер бачить сірий прямокутник.",[10,309,310],{},"І те, і те виправно. Ані те, ані те не розкриває дані ваших користувачів, бо ключ\nMaps не може прочитати вашу базу даних. Це чесна різниця між цією знахідкою та\nвитеклим ключем від бази, і саме тому наш сканер повідомляє про ключ API Google\nяк про те, що варто перевірити, а не як про надзвичайну ситуацію.",[10,312,313,314,317,318,320],{},"Єдині облікові дані Google, які справді поводяться як надзвичайна ситуація, це\nсервісний акаунт. Якщо ваш застосунок віддає файл JSON із\n",[14,315,316],{},"\"type\": \"service_account\""," і блоком ",[14,319,252],{}," усередині, то це справжні\nоблікові дані зі справжніми правами у вашому хмарному проєкті. Видаліть ключ у\nконсолі, а потім подивіться, до чого він міг дістатися.",[36,322,324],{"id":323},"що-зробити-просто-зараз","Що зробити просто зараз",[326,327,328],"key-takeaways",{},[329,330,331,337,343,346,349],"ul",{},[93,332,333,334,336],{},"Пошукайте ",[14,335,16],{}," в коді свого робочого сайту. Кожен збіг це ключ, за який треба відповісти.",[93,338,339,340,342],{},"Обмежте кожен із них у консолі Google Cloud: ",[22,341,109],{}," в обмеженнях застосунку, ваш домен і тільки ті API, якими ви користуєтесь. Безкоштовно, близько п’яти хвилин, без змін у коді.",[93,344,345],{},"Заразом установіть денний ліміт квоти на ключ. Обмеження зменшує трафік, а ліміт визначає стелю того, у скільки це може обійтися.",[93,347,348],{},"Залиште ключ конфігурації Firebase там, де він є. Натомість перевірте, чи ваші правила безпеки роблять свою роботу, і тримайте Gemini API поза списком дозволених для цього ключа.",[93,350,351,352,355],{},"Якщо ви знайшли файл JSON ",[14,353,354],{},"service_account"," у коді сторінки, вважайте це терміновим. Видаліть ключ у консолі, а не просто заберіть файл, бо в історії версій старе значення лишається.",[10,357,358,359,363,364,34],{},"Якщо вам зручніше пройти це списком, ",[30,360,362],{"href":361},"\u002Fchecklist","10-хвилинний чекліст безпеки","\nохоплює це разом з іншим, що варто вимкнути у щойно запущеному застосунку. А щодо\nширшого питання, які ключі взагалі доречні в браузері, у нас є\n",[30,365,367],{"href":366},"\u002Fblog\u002Fwhich-api-keys-are-safe-in-your-frontend","посібник, як відрізнити публічні ключі від секретних",{"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},"Основи безпеки",null,"Ключ API Google у відкритому коді сторінки наш сканер знаходить найчастіше, і зазвичай усе гаразд. Вирішує це одне безкоштовне налаштування.",false,"md",[386,389,392,395,398],{"q":387,"a":388},"Хтось знайшов мій ключ Google Maps у коді сторінки. Чи треба його міняти?","Спершу обмежте його: це займає близько п’яти хвилин і нічого не ламає. Відкрийте ключ у консолі Google Cloud, у обмеженнях застосунку виберіть Вебсайти й додайте свій домен, а потім в обмеженнях API залиште тільки ті API, якими користується ваш застосунок. Заміна йде після цього, і лише якщо ключ певний час був без обмежень і ви бачите використання, якого самі не спричиняли.",{"q":390,"a":391},"Хіба не можна просто сховати ключ, щоб ніхто його не знайшов?","Ні. Браузер вашого відвідувача має надіслати ключ до Google, щоб завантажити карту, тож усе, чим може скористатися браузер, відвідувач може прочитати. Мініфікація чи перейменування затримають когось лише на кілька секунд. Обмеження ключа це те рішення, яке справді працює, і воно працює незалежно від того, чи знайде хтось ключ.",{"q":393,"a":394},"Мій ключ обмежено моїм доменом. Чи може хтось усе одно ним скористатися?","Заголовок referrer можна підробити, тож наполеглива людина може надсилати запити, які видають себе за запити з вашого сайту. Обмеження прибирає простий випадок: автоматичний збирач, який знаходить ключі на публічних сторінках і використовує їх просто зі свого сервера. Саме цей трафік і створює несподівані рахунки, тому обмеження варте того, навіть якщо це не стіна. Додайте ще й денний ліміт квоти на ключ, і ви матимете стелю для того, у скільки все це може вам обійтися.",{"q":396,"a":397},"Firebase записав ключ API у мій файл конфігурації. Це помилка?","Ні, і Firebase це документує. Вебключ API Firebase позначає ваш проєкт, а не надає доступ, і про доступ вирішують правила безпеки Firebase та App Check. Він створений для того, щоб бути у вашому коді. Уникати слід лише одного: додавати Gemini Developer API до списку дозволених API цього ключа, бо так навмисно опублікований ключ стає ключем, який може витрачати гроші.",{"q":399,"a":400},"А якщо я знайду файл із \"type\": \"service_account\" у своєму застосунку?","Це інша ситуація, і вона термінова. Ключ сервісного акаунта це справжні облікові дані з приватним ключем усередині, і його місце на сервері. Видаліть ключ у консолі Google Cloud у розділі IAM і адміністрування, далі Сервісні акаунти, приберіть файл із коду сторінки та перевірте свої рахунки й журнали аудиту. Видалення лише з коду не зачиняє двері, бо старе значення далі лишається в історії версій.","\u002Fblog\u002Fgoogle-api-key-exposed-in-frontend\u002Fcard-800x500.png",[403,404,405,406,407,408],"ключ api google у браузері","обмежити ключ api google maps","обмеження за http-referrer","публічний ключ api firebase","ключ api AIza","чи безпечний мій ключ api google",{},true,"Ключ API Google у вашому браузері?","\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],"Ключ API Google, видимий у коді вашої сторінки, зазвичай не є проблемою, бо ключ Google це ідентифікатор для рахунку, а не пароль.","Безпечним його робить обмеження за HTTP-referrer: налаштування, яке каже Google, що ключ працює лише з вашого власного сайту.","Це безкоштовно, займає близько п’яти хвилин і є тією єдиною справою, яку варто зробити сьогодні.","Файл сервісного акаунта Google у вашому застосунку це інший і терміновий випадок. Ось це справжні облікові дані.","jDCvC04NIb9lYZSVvz5Wyx6zzNvyzpQVELbxaNeoSLI",1787826051143]