Безопасность и проверка: что нельзя доверять нейросети

Код страницы видят все

У приложения из одного HTML-файла нет секретов. Откройте любую страницу в браузере и нажмите Ctrl + U — увидите её код целиком. То же может сделать любой посетитель вашего трекера.

Отсюда главное правило: в коде страницы нельзя хранить ничего секретного. Ни паролей, ни ключей доступа к сервисам.

Типичная ситуация: вы просите добавить в трекер погоду или перевод, нейросеть подключает внешний сервис и вставляет в код ваш личный ключ доступа. Работает. Но ключ теперь виден всем — и кто угодно может пользоваться сервисом за ваш счёт или исчерпать ваш лимит.

Если для функции нужен секретный ключ, значит, нужен сервер, который хранит ключ и сам обращается к сервису. Это уже не проект из одного файла: такую часть лучше поручить программисту.

Чужие данные — чужая ответственность

Пока трекер хранит только ваши привычки в вашем браузере, вы ни за что не отвечаете. Всё меняется, когда приложение начинает собирать данные других людей: имена, телефоны, почты, ответы анкет.

Это персональные данные, и их сбор в России регулирует закон 152-ФЗ. Нужны согласие человека, политика обработки данных и меры защиты. А хранить такие данные в браузере посетителя бессмысленно — их нужно отправлять на сервер, и это снова выход за рамки проекта новичка.

Поэтому простое правило для вайбкодинга: не собирайте чужие данные, пока рядом нет того, кто отвечает за их защиту.

Типичная уязвимость: текст, который становится кодом

Нейросети часто выводят текст на страницу так:

row.innerHTML = '<span>' + habit.name + '</span>';

Выглядит невинно и работает. Но innerHTML разбирает текст как разметку. Если ввести вместо названия привычки кусок кода, браузер его выполнит. В личном трекере вы атакуете сами себя, но стоит данным оказаться у других людей — в общем списке, отзывах, гостевой книге — и чужой код выполнится уже у них. Эта уязвимость называется межсайтовым скриптингом (XSS) и входит в число самых распространённых.

Безопасный вариант выводит текст как текст:

const name = document.createElement('span');
name.textContent = habit.name;

textContent никогда не превращает текст в код. Проверить свой трекер просто: добавьте привычку с названием <b>Бег</b>. Если на карточке видны угловые скобки — всё в порядке. Если «Бег» стал жирным — вывод идёт через innerHTML, и это стоит исправить.

Подключения со стороны

Иногда нейросеть добавляет строку вроде <script src="https://…"> — загрузку чужой библиотеки из интернета. Такой код выполняется на вашей странице с теми же правами, что и ваш. Для небольших проектов просите обходиться без внешних библиотек — мы так и сделали в ограничениях задания. Если без библиотеки никак, узнайте, что это за источник, и не берите случайные адреса.

Чек-лист перед публикацией

Перед тем как показать проект другим, пройдите пять вопросов:

1. Секреты. В коде нет паролей, ключей и токенов.
2. Данные. Приложение не собирает чужие персональные данные — или вы знаете, как их защитить по закону.
3. Вывод текста. Всё, что вводит пользователь, выводится как текст: проверено вводом <b>Бег</b>.
4. Подключения. Нет загрузок кода со случайных адресов.
5. Сценарии. Таблица проверок из урока 6 пройдена полностью.

Нейросеть может помочь и здесь: «Проверь этот код по пунктам: секреты в коде, сбор персональных данных, вывод пользовательского текста через innerHTML, подключение внешних скриптов. Для каждого пункта — есть ли проблема и где». Но её ответ — подсказка, а не гарантия: пропустить проблему она может так же, как пропустила её, когда писала код.