Feedback система за выходные: спам-защита и React компоненты

Feedback система за выходные: от API до React компонентов с защитой от спама

Понедельник утром открываю Jira и вижу задачу: нужна система обратной связи для borisovai-site. Не просто кнопки “понравилось/не понравилось”, а настоящая фишка с рейтингами, комментариями и защитой от ботов. Проект небольшой, но аудитория растёт — нужна смекалка при проектировании.

Начал я с архитектуры. Очень важно было подумать про защиту: спам никто не любит, а репутация падает быстро. Решил использовать двухуровневую защиту. Во-первых, браузерный fingerprint — собираю User-Agent, разрешение экрана, временную зону, язык браузера, WebGL и Canvas hash. Получается SHA256-подобный хеш, который хранится в localStorage. Это не идеально, но для 80% случаев работает. Во-вторых, IP rate limiting — максимум 20 фидбеков в час с одного адреса. Комбо из браузера и IP даёт приличную защиту без излишней паранойи.

На бэке создал стандартную CMS структуру: content-type feedback с полями для типа отзыва (helpful, unhelpful, rating, comment, bug_report, feature_request), самого комментария, email опционально. Приватные поля — browserFingerprint, ipAddress, userAgent — хранятся отдельно, видны только администратору. Логика валидации простая, но эффективная: пустые комментарии не принимаем, максимум 1000 символов, проверяем на дубликаты по паре fingerprint + targetSlug (то есть одна оценка на страницу от пользователя).

Фронтенд часть оказалась интереснее. Написал утилиту lib/fingerprint.ts, которая собирает все данные браузера и генерирует стабильный хеш — если пользователь вернётся завтра с того же девайса, хеш совпадёт. React Hook useFeedback.ts инкапсулирует всю логику работы с API: submitFeedback() для отправки, fetchStats() для получения счётчиков просмотров (сколько человек оценило), fetchComments() для загрузки последних комментариев с простой пагинацией.

Компоненты сделал модульными: <HelpfulWidget /> — это просто две кнопки с лайком и дизлайком, <RatingWidget /> — пять звёзд для оценки (стандартный UX паттерн), <CommentForm /> — textarea с валидацией на фронте перед отправкой. Каждый работает независимо, можно микшировать на странице.

Интересный момент про fingerprinting. Много разработчиков думают, что браузерный fingerprint — это какое-то магическое устройство, а на самом деле это просто комбинация публичных данных. Canvas fingerprinting, например, — это отрисовка градиента на невидимом canvas и сравнение пикселей. Неочевидно, что WebGL renderer и версия видеодрайвера сильно влияют на результат, и один и тот же браузер на разных машинах выдаст разные хеши. Поэтому я не полагаюсь на fingerprint как на абсолютный идентификатор — это просто дополнительный слой.

Итогом стали 8 готовых компонентов, 3 документа (полный гайд на 60+ строк, шпаргалка для быстрого старта, диаграммы архитектуры) и чеклист вопросов для дизайнера про стили и поведение. API готов, фронтенд готов, тесты написаны. Следующий спринт — интегрировать в шаблоны страниц и собрать статистику с первыми пользователями.

Дальше можно добавить модерацию комментариев, интеграцию с email, A/B тестирование вариантов виджетов. Но сейчас — в production.

Почему GitHub Actions — лучший друг разработчика? 😄 Потому что без него ничего не работает. С ним тоже, но хотя бы есть кого винить.