Чат-бот із серверним проксі: ключ ніколи не на фронтенді

Що ти будуєш сьогодні і де лежить ключ

Сам бот — це п'ятнадцять рядків коду. Урок про інше: який файл відвідувач твого сайту побачить, а який — ні

У дев'ятому класі бот був таблицею заготовок. Учень тиснув кнопку — бот видавав готове речення. Усе це лежало прямо в сторінці.

Тепер відповідь пише модель — чужа програма на чужому сервері. Щоб до неї звернутися, потрібен ключ. Це довгий рядок символів, який доводить, що за запит платиш саме ти. І одразу постає нове питання. Де цей ключ лежить, поки бот працює?

Відповідь на весь урок коротка. Ключ лежить в одному файлі на твоєму сервері — ~/.env. У браузер він не потрапляє ніколи й ні в якому вигляді. Решта уроку — наслідки цього правила.

Чого навчишся за цей урок

• знаходити чужий ключ у чужому боті за три кліки, без жодного зламу;
• писати сторінку чату, яка звертається тільки до твого власного сервера;
• тримати ключ у файлі, який браузер не бачить і не може попросити;
• ставити на сервері обмеження, щоб чужий скрипт не з'їв твою квоту за ніч;
• рахувати, скільки коштує одна репліка бота і скільки — місяць роботи.

Хід уроку

Слова «проксі», «токен» і «системний промпт» поки нічого не означають. Розберемо їх по черзі, кожне на своєму місці.

Що ти зробиш за 120 хвилин

1. знайдеш ключ у навчальному «дірявому» боті за три кліки — і зрозумієш, чому це три кліки, а не злам;
2. напишеш system.md: роль бота, межі, формула відмови;
3. напишеш api/chat.php — проксі, який бере ключ із ~/.env і додає його вже на сервері;
4. додаси до проксі перевірки: метод, тип вмісту, довжину, частоту, таймаут і журнал без персональних даних;
5. зробиш сторінку чату bot/index.html + bot/chat.js, яка звертається лише до твого власного API;
6. перевіриш у вкладці «Мережа», що заголовка Authorization у запитах браузера немає взагалі;
7. налаштуєш .gitignore і переконаєшся, що .env не потрапив ані у робочу теку, ані в історію комітів.

Усе, що прийшло в браузер, — уже не таємниця

Це не про вразливість і не про недогляд. Це про те, як улаштований веб: браузер не може виконати код, якого він не отримав

Коли ти відкриваєш сторінку, сервер віддає її вміст файл за файлом: HTML, CSS, кожен .js. Браузер мусить мати повний текст скрипта, інакше він його не виконає. Отже, цей текст є і в тебе, і в кожного, хто відкрив ту саму адресу.

Подивитися на нього можна трьома способами. Жоден із них не потребує нічого, крім самого браузера.

Тому «ключ у JavaScript» і «ключ опублікований на сайті» означають те саме. Просто сказано двома різними способами.

Інспектор фронтенду: подивись на свою сторінку як відвідувач

Нижче — навчальний бот. Перемикач угорі вибирає, як він улаштований усередині, кнопка запускає звичайний огляд сторінки відвідувачем

Спочатку постав «ключ у фронтенді» і натисни кнопку. Порахуй, у скількох місцях ключ видно. Потім спробуй кожен спосіб «сховати» його і дивись, як міняється число. І аж наприкінці перемкни на «через проксі». Ті самі три місця — і порожньо.

Секунди на таймері — це темп анімації, а не заміряний час живої людини. Важливе тут не число. Важливо, що дій рівно три і жодна з них не є зламом: усі три файли сервер віддає сам, кожному, хто попросив.

Чому «сховати» ключ не працює в принципі

Кожна спроба сховати ключ у фронтенді додає рівно один крок до пошуку. Нуль захисту, плюс хибне відчуття, що захист є

Причина для всіх способів одна. Щоб скрипт міг скористатися ключем, він мусить у якусь мить тримати його у відкритому вигляді. А те, що бачить скрипт, бачить і людина.

Досить зупинити скрипт у налагоджувачі саме в цю мить. Або взагалі не читати код, а подивитися на запит, який уже пішов: ключ там у заголовку, звичайним текстом.

Що станеться далі, якщо ключ утік

Ключ ніхто не «зламує». Його просто знаходять. По інтернету цілодобово ходять боти й шукають рядки характерного вигляду — ті, що починаються на sk- чи AIza.

Вони перебирають публічні репозиторії, файли .js і випадково викладені .env. Знайдений ключ потрапляє в чужі руки за години, іноді за хвилини. Далі відбувається ось що.

• Твоїм ключем починають користуватися чужі люди з чужих машин. Ти про це не дізнаєшся: збоку все виглядає як звичайна робота.
• Квота вигоряє за кілька годин. Твій бот після цього перестає відповідати вже твоїм користувачам — грошей на них не лишилося.
• Рахунок приходить власнику ключа. Платить не той, хто натиснув кнопку, а той, чий ключ стояв у заголовку запиту.
• Якщо ключ шкільний, його вимикають цілком. Разом із ним перестають працювати боти всього класу, не тільки твій.
• Відкликати ключ можна за хвилину. Але гроші, уже списані за чужі запити, ніхто не поверне — саме тому швидкість тут важлива.

Проксі: маленький посередник, який знає ключ

Слово страшне, суть проста: замість «браузер → модель» стає «браузер → твій chat.php → модель»

Уяви бібліотеку з закритим сховищем. Ти кажеш бібліотекарці, яку книжку хочеш. Вона йде у сховище своїм ключем і виносить книжку тобі. Ключа тобі ніхто не дає. Ти навіть не знаєш, на якій полиці лежала книжка.

Такий посередник у вебі зветься проксі: він приймає запит від одного і переадресовує другому. Твій chat.php — саме така бібліотекарка. І в нього є властивість, якої в браузера немає: він працює на машині, до якої маєш доступ тільки ти. Тому ключ можна тримати там.

Браузер після цього не знає ні адреси API моделі, ні назви моделі, ні ключа. Він знає рівно одне. Є адреса /api/chat.php, туди надсилають {"message": "…"} і отримують відповідь.

Воронка обмежень: що проксі відсіює до того, як витратити гроші

Кожна перевірка коштує мікросекунди твого сервера і рятує від запиту, який коштує грошей

Порядок перевірок не випадковий. Спершу йдуть найдешевші: подивитися на метод і тип вмісту можна за мікросекунду. Потім ті, що потребують розбору тіла запиту — JSON і довжина повідомлення.

Далі перевірка частоти: вона вже лізе на диск за лічильником, тому коштує дорожче. І аж останнім іде єдиний по-справжньому дорогий крок — похід до моделі. Той, за який платять грошима.

Шість перевірок і що вони ловлять

Обмеження частоти має простий побутовий двійник. У шкільній їдальні хліб лежить у спільному кошику. Взяти можна скільки треба, але не всю буханку за раз — інакше наступним не лишиться. Правило «10 запитів за хвилину з однієї адреси» робить те саме. Англійською таке обмеження звуть rate limit.

Конструктор проксі: збери свій chat.php

Вмикай перевірки по одній і дивись, як росте код — і що написано під кожною вимкненою

Почни з усіх вимкнених. Це той самий «зручний» варіант, який видає AI-редактор, коли не поставити йому умов. Він працює. І він же за одну ніч здатен з'їсти квоту всього класу.

Лістинг у власному блоці, а не в терміналі: у PHP символ $ на початку рядка значущий, і кнопка копіювання термінала зрізала б його як промпт.

Системний промпт: не «сховати», а «не дати підмінити»

Персона бота — це файл. Питання лише в тому, хто має право цей файл переписати перед відправкою запиту

Системний промпт задає, ким бот себе вважає. Там записана його роль, тон, межі теми й формула відмови. У дев'ятому класі ти писав це прямо в скрипті сторінки. Для навчального бота такого досить. Для бота, за запити якого платиш ти, — уже ні.

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

Якщо промпт лежить на сервері, відвідувач надсилає тільки поле message. Усе решта до запиту додає chat.php.

З чого складається робочий system.md

1. Роль і аудиторія: хто бот і з ким говорить — «помічник учнів 8—11 класів нашої школи»;
2. Межі теми: перелік того, про що бот відповідає;
3. Явні «чого бот не робить»: не робить домашку замість учня, не дає медичних порад, не обговорює однокласників;
4. Формула відмови: дослівне речення, яким бот відмовляє, і куди він переадресовує («це поза моєю темою, спитай…»);
5. Тон і довжина: «коротко, 2—4 речення, без емодзі»;
6. Що робити, коли не знає: сказати «не знаю», а не вигадувати.

Критерій вимагає не менше 200 символів. Це мінімум, а не мета. Без третього й четвертого пунктів бот погоджується майже на все, скільки б символів там не було.

Стрімінг: чому текст «друкується» і чим це ускладнює перевірку

Коротко, як факт, який тобі знадобиться на уроці 14

Ти бачив, як у чат-ботах текст ніби набирається на очах, по кілька слів. Це не анімація. Модель справді пише відповідь по частинах і віддає кожну частину одразу, не чекаючи кінця.

Такий режим зветься стрімінг (streaming). Технічно це один HTTP-запит, відповідь на який не закривається до кінця генерації. Звичайний запит поводиться інакше: чекає всю відповідь і повертає її одним шматком.

Ось у чому проблема. Фільтр на виході не дає боту сказати зайвого. Але працює він над готовим текстом, а в стрімінгу готового тексту немає.

Проксі помічає заборонений фрагмент — а попередні речення вже в браузері. Забрати їх звідти неможливо. Виходить вибір із двох. Або тримаєш увесь текст у себе до кінця і втрачаєш сенс стрімінгу. Або перевіряєш по шматках і миришся з тим, що фільтр спрацює із запізненням.

Скільки коштує одна репліка бота

Гроші рахують не за запитами, а за токенами: окремо за те, що ти надіслав, і окремо за те, що модель написала

Модель не бачить тексту так, як ти. Вона ріже його на шматочки завбільшки приблизно з частину слова. Такий шматочок і зветься токен.

Для латиниці грубе наближення таке: близько 4 символів на токен. Для кирилиці помітно гірше — приблизно 2 символи. Тому те саме речення українською коштує дорожче за англійське. Це саме наближення, а не правило. Точну кількість дає окремий запит до API, який рахує токени: у Claude це /v1/messages/count_tokens.

Ціни оголошують за мільйон токенів, окремо за вхідні й вихідні. Вихідні всюди дорожчі. Дивись тарифи своєї моделі. Числа в калькуляторі нижче — реальні ціни трьох моделей Claude станом на вересень 2026. Вони тут лише як порядок величини.

Порівняй два числа: «за 30 днів» і «скрипт у циклі». Друге зазвичай більше. І набирається воно за десять хвилин. Тому обмеження частоти в проксі — не педантизм. Це єдине, що стоїть між твоїм ключем і чиєюсь цікавістю.

П'ять файлів і одне місце, де лежить ключ

Чотири текстові файли їдуть по FTP. П'ятий створюється по SSH і в публічну частину не потрапляє ніколи

Фронтенд: усе, що йому дозволено знати

const box  = document.getElementById('log');
const inp  = document.getElementById('msg');
const send = document.getElementById('send');

function add(who, text){
  const p = document.createElement('p');
  p.className = 'm ' + who;
  p.textContent = text;          // textContent, не innerHTML: правило уроку 4
  box.appendChild(p);
  box.scrollTop = box.scrollHeight;
}

send.onclick = async () => {
  const text = inp.value.trim();
  if(!text) return;
  if(text.length > 400){ add('sys', 'Задовге повідомлення'); return; }

  add('me', text);
  inp.value = '';
  send.disabled = true;
  add('sys', 'бот друкує…');

  try{
    const r = await fetch('/api/chat.php', {
      method : 'POST',
      headers: { 'Content-Type': 'application/json' },
      body   : JSON.stringify({ message: text })
    });
    const data = await r.json();
    box.lastChild.remove();                       // прибрати «друкує…»
    if(r.status === 429){ add('sys', 'Забагато запитів, зачекай хвилину'); }
    else if(r.status === 413){ add('sys', 'Повідомлення задовге'); }
    else if(!r.ok){ add('sys', 'Помилка: ' + (data.error || r.status)); }
    else { add('bot', data.reply); }
  }catch(e){
    box.lastChild.remove();
    add('sys', 'Немає зв\'язку із сервером');
  }
  send.disabled = false;
};

Зверни увагу на дві речі. Перша: fetch іде на відносну адресу /api/chat.php. Це твій власний сервер і твій власний домен, жодних заголовків із ключем тут немає.

Друга: перевірка довжини в цьому файлі теж є. Так і має бути — вона підказує користувачу, що повідомлення завелике, ще до надсилання. Справжня перевірка все одно стоїть на сервері.

Ключ: створюється по SSH, читається сервером

Git: .gitignore і те, чого він не вміє

# секрети
.env
.env.*
!.env.example
config.js
*.key
*.pem

# сміття
node_modules/
.DS_Store

У .gitignore є одна властивість, про яку постійно забувають. Він діє на файли, за якими git ще не стежить. Якщо .env уже потрапив у коміт, рядок в ігнорі його звідти не прибере. Git продовжить стежити за файлом просто тому, що вже стежить.

Історія комітів схожа на класний журнал. Оцінку можна виправити на новій сторінці, але попередня сторінка нікуди не зникає — її досить перегорнути назад. Ключ, який хоч раз потрапив у коміт, дістають однією командою git log -p.

Практика: персона, проксі, фронтенд, git

Кроки 1—6 і 12—16 — у себе на комп'ютері та по SSH. По FTP їдуть чотири файли з кроків 8—11. Галочки зберігаються

Автоперевірка

Чекер надсилає боту тестове повідомлення, сканує ~/www/bot/ на рядки, схожі на ключі, і дивиться git. Спроби не обмежені

Демонстраційний режим: результат згенеровано для показу. На сервері ця кнопка викликає POST /api/check, який запускає /opt/lessons/13/check.sh від імені учня.

Що вчитель дивиться на твоєму екрані

• відкриту вкладку «Мережа» під час живої розмови з ботом: запити мають іти лише на /api/chat.php, і заголовка Authorization серед них немає жодного;
• вивід stat -c '%a' ~/.env — має бути 600;
• твій system.md — і просить назвати три запити, на які бот зобов'язаний відмовити, та прочитати формулу відмови;
• як ти відповідаєш на питання «покажи в chat.php рядок, який відсікає задовге повідомлення, і поясни, чому саме такий код»;
• git log --all -p у твоєму репозиторії — на предмет значення ключа в історії.

Шкала виконання

Це те, що бачить учитель, коли виставляє оцінку.

Сім речень, які варто запам'ятати

• усе, що прийшло в браузер, видно відвідувачу — інакше браузер не зміг би це виконати;
• «сховати» ключ мінімізацією, base64 чи окремим файлом означає додати один крок до пошуку і нуль до захисту;
• .gitignore ховає файл від git, а не від nginx;
• проксі цінний не тим, що ховає ключ, а тим, що на ньому є місце для перевірок, яких у браузері бути не може;
• системний промпт на сервері не стає таємним — він стає незамінним ззовні;
• платять за токени, і історію діалогу оплачують заново в кожному запиті;
• витік ключа лікується відкликанням, а не редагуванням файла: списані токени не повертають.

Де найчастіше помиляються

• AI-редактор згенерував «зручний» варіант із ключем у chat.js, і його ніхто не перечитав — це блокуючий провал no_key_front;
• ключ дубльовано: у .env «правильно», а в коментарі index.html «щоб не забути»;
• системний промпт зашитий рядком у PHP замість system.md — щоб виправити одне слово, треба перезаливати код;
• проксі приймає від браузера повне тіло запиту до моделі — ключ у безпеці, гаманець ні;
• .gitignore створено після першого коміту: .env уже відстежується, ігнор не діє;
• ~/.env має права 644 — читає будь-який акаунт на спільному сервері;
• ліміт довжини реалізовано лише в chat.js — обходиться одним запитом curl;
• chat.php віддає браузеру сиру відповідь API цілком, разом зі службовими полями й повідомленнями про помилки, у яких видно назву моделі та внутрішні ідентифікатори.

Домашнє завдання

Допиши в ~/www/bot/system.md три приклади запитів, на які бот має відмовити. Не категорії, а дослівні фрази — такі, які справді напишуть однокласники. Для кожної вкажи, якими словами бот відмовляє і куди переадресовує.

Другим абзацом опиши, що зробиш у перші п'ять хвилин, якщо побачиш свій ключ на чужому скріншоті. Потрібні чотири дії, у правильному порядку. Вони стануть основою файла incident.md на уроці 14.

Звідки взяті числа й формулювання

Ціни й ліміти перевіряй самостійно: вони змінюються частіше, ніж виходять підручники

• OWASP Top 10 для LLM-застосунків, LLM02 «Sensitive Information Disclosure» — про розкриття секретів через клієнтську частину й через відповіді моделі; там же LLM10 про необмежене споживання ресурсів, звідки вимога лімітів на сервері. owasp.org · Top 10 for LLM Applications
• OWASP Cheat Sheet «Secrets Management» — базове правило «секрет не потрапляє в код і в клієнтську частину», зберігання в змінних оточення та у файлах поза веб-корінням. cheatsheetseries.owasp.org · Secrets Management
• MDN, «Мережа» в інструментах розробника — що саме показує панель: список запитів, повні заголовки, тіло. Джерело схеми кроку 3. developer.mozilla.org · Network Monitor
• MDN, fetch() і CORS — чому запит із браузера напряму до чужого API або блокується політикою, або несе твої заголовки відкрито, і чому запит зі свого сервера цих обмежень не має. developer.mozilla.org · CORS
• MDN, коди відповіді HTTP — значення 405, 413, 415, 429 і 502, які повертає проксі з конструктора кроку 7. developer.mozilla.org · HTTP status
• RFC 6585, розділ 4 — першоджерело коду 429 Too Many Requests і заголовка Retry-After. rfc-editor.org/rfc/rfc6585
• PHP: parse_ini_file, json_decode, mb_strlen, file_put_contents з FILE_APPEND | LOCK_EX — усі функції з лістингу конструктора. php.net · parse_ini_file
• PHP: curl_setopt, опції CURLOPT_TIMEOUT і CURLOPT_CONNECTTIMEOUT — таймаути в секундах; без них запит чекає стільки, скільки триватиме з'єднання. php.net · curl_setopt
• gitignore(5) — прямо сказано, що правила діють на невідстежувані файли; вже закомітований файл ігнор не прибирає. Це джерело твердження з кроку 11. git-scm.com/docs/gitignore
• GitHub Docs, «Removing sensitive data from a repository» — документація сама починає з вимоги вважати секрет скомпрометованим і відкликати його, а вже потім чистити історію. docs.github.com · Removing sensitive data
• GitHub Secret scanning — опис того, як автоматичні сканери знаходять ключі за характерним префіксом у публічному коді. Звідси теза кроку 4 про те, що ключ не «зламують», а знаходять. docs.github.com · About secret scanning
• Anthropic, ціни за мільйон токенів — три тарифи в калькуляторі кроку 10 (1/5, 2/10 і 5/25 у.о. за 1 млн вхідних/вихідних токенів) відповідають реальним цінам Claude Haiku 4.5, Claude Sonnet 5 і Claude Opus 5 станом на вересень 2026. Перевір актуальні числа для своєї моделі перед розрахунком. anthropic.com/pricing
• Підрахунок токенів — точну кількість дає окремий виклик API (/v1/messages/count_tokens), а не формула. Наближення «≈4 символи на токен для латиниці, ≈2 для кирилиці» у калькуляторі — саме наближення, і воно підписане на сторінці. docs.claude.com · Token counting
• Стрімінг відповіді (server-sent events) — як улаштована відповідь по частинах і чому текст не можна «забрати назад» після того, як шматок пішов клієнту. developer.mozilla.org · Server-sent events
• Ключ у браузері як окремий клас помилки — розділ про автентифікацію API в OWASP API Security Top 10 (API2 «Broken Authentication»): ключ, доступний клієнту, вважається публічним. owasp.org · API Security Top 10

Повний список із поясненнями, що звідки взято і що є ілюстративним прикладом, — у файлі urok-13-джерела.md поруч із цією сторінкою.