API-ключ OpenAI чи Gemini у браузері: як усунути критичну вразливість

Чому витік API-ключа у браузер — це пряма загроза бюджету

Інтеграція штучного інтелекту у веб-сервіси стала стандартом для сучасного бізнесу: від розумних пошукових рядків до генеративних чат-ботів. Проте під час швидкої розробки або прототипування розробники часто припускаються фатальної помилки — викликають моделі OpenAI чи Google Gemini безпосередньо з клієнтського JavaScript.

Якщо ваш фронтенд напряму взаємодіє з сервісами ШІ, секретний токен потрапляє у вихідний код сторінки. Будь-який відвідувач може відкрити панель розробника у браузері, скопіювати ключ і використовувати платний доступ до моделі за ваш рахунок. У результаті бізнес стикається з непередбачуваними рахунками або раптовим блокуванням сервісу через вичерпання лімітів.

Типові сценарії потрапляння ключів у фронтенд

• Змінні оточення для клієнта: використання префіксів на зразок NEXT_PUBLIC_ або VITE_ вшиває значення у фінальний бандл під час збірки проєкту.
• Прапорець dangerouslyAllowBrowser: клієнтська бібліотека OpenAI забороняє виконання в браузері без цього параметра, оскільки він прямо демаскує облікові дані.
• Швидка генерація коду AI-асистентами: інструменти швидкої розробки інколи прописують API-запити прямо всередині React- чи Vue-компонентів заради швидкої демонстрації.

Як виявити проблему на діючому сайті

Перевірити безпеку власного проєкту можна за лічені хвилини. Достатньо виконати базовий аудит:

• Вкладка Network у DevTools: активуйте функцію ШІ на сайті. Якщо запити йдуть безпосередньо на домени api.openai.com чи generativelanguage.googleapis.com, ваш ключ повністю скомпрометований.
• Аналіз коду: виконайте пошук по репозиторію за сигнатурами ключів (sk-proj-, AIza) та наявністю dangerouslyAllowBrowser.
• Моніторинг білінгу: перевірте графіки витрат у кабінеті провайдера ШІ. Сплески аномального трафіку вказують на несанкціоноване використання.

Надійне архітектурне рішення: перенесення логіки в Edge Functions

Єдиний надійний спосіб захистити токен — перенести взаємодію з AI-провайдерами на сторону сервера. Найбільш ефективним і швидким рішенням є використання Edge Functions або serverless-воркерів (наприклад, Supabase, Cloudflare Workers або Vercel Functions).

Покроковий алгоритм захисту

• Збережіть токен у змінних середовища сервера: ключ має зберігатися суворо як зашифрований секрет платформи, до якого фронтенд не має жодного доступу.
• Створіть захищену функцію: налаштуйте Edge-функцію, яка обов'язково перевіряє авторизацію користувача, валідує вхідний запит (довжину тексту, структуру) і лише потім надсилає запит до OpenAI чи Gemini.
• Переведіть фронтенд на власний бекенд: інтерфейс користувача повинен викликати вашу функцію замість прямого звернення до API моделі. Клієнтський SDK AI слід повністю видалити з браузерного коду.
• Перевипустіть скомпрометований ключ: щойно новий бекенд запрацює в продакшені, негайно згенеруйте новий API-токен у кабінеті провайдера, оновіть серверні секрети та видаліть старий ключ.

Додаткові рівні захисту для комерційних проєктів

Самого приховування ключа недостатньо, якщо користувачі можуть безперервно спамити вашу Edge-функцію. Щоб оптимізувати витрати бізнесу, команда ViAcore завжди впроваджує комплексні заходи:

• Обмеження запитів (Rate Limiting): встановіть денні або годинні ліміти генерацій для окремого акаунта чи IP-адреси.
• Бюджетні сповіщення: налаштуйте тригери в особистому кабінеті OpenAI чи Google Cloud, які попередять вас про досягнення 50%, 80% і 100% ліміту витрат.
• Валідація та цензурування промптів: обрізайте занадто довгі запити на бекенді ще до того, як вони надійдуть до LLM, аби зменшити витрати токенів.

Надійна архітектура дозволяє масштабувати можливості генеративного штучного інтелекту без ризику фінансових збитків чи порушення безпеки цифрового продукту.