/practice/bug-hunt — учебный продукт BugFinder, небольшой трекер багов. В него намеренно заложено около 45 багов разной природы: интерфейс, доступность, состояние, валидация, локализация, авторизация. Задача — найти как можно больше. Раздел открыт в сопровождении.
8 разделов BugFinder
- Регистрация (
/practice/bug-hunt/register) — форма с email и паролем. - Дашборд (
/practice/bug-hunt/dashboard) — таблица багов с сортировкой. - Карточка бага (
/practice/bug-hunt/bug/1) — просмотр и редактирование одного бага. - Поиск (
/practice/bug-hunt/search) — поиск по базе. - Профиль (
/practice/bug-hunt/profile) — личные данные. - Настройки (
/practice/bug-hunt/settings) — тема, язык, смена пароля. - Создать баг (
/practice/bug-hunt/create-bug) — большая форма. - Админ-панель (
/practice/bug-hunt/admin) — управление пользователями.
Два режима
Охота за багами — сессия на время
/practice/bug-hunt/hunt: 20 минут без подсказок. Каждую находку вы записываете своими словами как короткий баг-репорт. Платформа сопоставляет находки с каталогом багов сначала по шаблонам, а то, что не совпало, отдаёт языковой модели. Балл — доля найденных багов, за каждую ложную тревогу вычитается 5 процентных пунктов. Зачёт — от 70 баллов.
Чек-лист
/practice/bug-hunt/report: около 55 пунктов, из них примерно 10 — ложные («красные селёдки»). Отметьте только то, что подтвердили воспроизведением. Зачёт — если найдено не меньше 36 настоящих багов и отмечено не больше одного ложного пункта.
Что и где искать
Функциональные баги
- Кнопка не реагирует.
- Форма отправляется с пустыми полями.
- Сохранение не сохраняет.
- Состояние не обновляется после действия.
Валидация
- Email без
@. - Пароль из одного символа.
- Очень длинные строки (1000+ символов).
- HTML-теги и спецсимволы в полях.
Доступность (a11y)
- Кнопки сделаны из
<div>и недоступны с клавиатуры. - У полей нет
<label>. - Пустой или бессмысленный
altу изображений. - Низкий контраст текста.
- Не виден фокус.
Интерфейс
- Текст вылезает за границы.
- Числа и даты отображаются неверно или не выровнены.
Безопасность
- Пароль виден в DOM или в подсказке.
- Токен хранится в
localStorage. - Доступ к чужим данным по изменённому id в адресе (IDOR).
Подсказки
- Откройте DevTools на каждой странице. Многие баги видны только в Console, Network и Application.
- Пройдите страницу клавишей Tab — так находятся недоступные кнопки и пропуски фокуса.
- Поменяйте id в адресе карточки бага и посмотрите, что произойдёт.
- Откройте админ-панель напрямую по адресу — проверьте, кого она пускает.
Что дальше
- Виджет «Bug-checklist» — как устроен чек-лист
- Практика a11y и perf
- Практика security — SQLi, XSS, авторизация
- Виджет «Drag-triage» — как оценивать severity найденного