Дневник выбора Headless CMS — почему мы выбрали Pages CMS и защита от ботов с помощью Turnstile

Выбор CMS — неброская, но важная задача. В этой статье описан процесс оценки трёх вариантов CMS и реализация защиты от ботов с помощью Cloudflare Turnstile для контактной формы.

Процесс выбора CMS

При внедрении CMS на наш статический сайт, построенный на Astro, мы составили короткий список из следующих трёх кандидатов.

Keystatic: первый кандидат

Мы следили за Keystatic как типобезопасной CMS. Она официально поддерживает интеграцию с Astro. Однако работа в локальном режиме требует серверной среды выполнения, что плохо сочетается со статическим деплоем на Cloudflare Pages.

Sveltia CMS: функционально богатая, но тяжёлая

Sveltia CMS — это форк Decap CMS (ранее Netlify CMS) с современным UI и богатым функционалом. Однако она была избыточной для текущего масштаба проекта (всего несколько блог-постов и горстка статических страниц). Мы планируем переоценить её по мере роста контента в будущем.

Pages CMS: победитель

Pages CMS — лёгкая CMS, которая напрямую редактирует Markdown-файлы в репозитории GitHub.

Решающими факторами стали:

• Простая настройка: Достаточно добавить один файл .pages.yml
• Сервер не нужен: Работает через GitHub API, не требуя дополнительной инфраструктуры
• Нативный Markdown: Напрямую интегрируется с коллекциями контента Astro
• GUI-редактор: Члены команды без технического бэкграунда могут редактировать статьи из браузера

# .pages.yml
content:
  - name: blog
    label: ブログ
    path: src/content/blog
    type: collection
    fields:
      - name: title
        label: タイトル
        type: string
      - name: date
        label: 公開日
        type: date
      - name: tags
        label: タグ
        type: string
        list: true

Внедрение Cloudflare Turnstile

Мы внедрили Cloudflare Turnstile в качестве защиты от спама для контактной формы.

Почему Turnstile, а не reCAPTCHA

Google reCAPTCHA v2 заставляет пользователей выбирать изображения, а v3 основана на оценке, но вызывает опасения по поводу конфиденциальности. Cloudflare Turnstile превосходит по следующим параметрам:

Реализация

Внедрение Turnstile удивительно просто.

1. Создание виджета в панели Cloudflare

Создайте виджет в разделе «Turnstile» панели Cloudflare Dashboard и зарегистрируйте целевые хосты (рабочий домен и localhost). Будет выдан site key.

2. Добавление виджета в форму

<!-- Load the Turnstile script -->
<script
  src="https://challenges.cloudflare.com/turnstile/v0/api.js"
  async
  defer
></script>

<!-- Place the widget inside the form -->
<form action="https://ssgform.com/s/your-form-id" method="POST">
  <!-- Form fields -->
  <input type="text" name="name" required />
  <textarea name="message" required></textarea>

  <!-- Turnstile widget -->
  <div
    class="cf-turnstile"
    data-sitekey="your-site-key"
    data-language="ja"
    data-theme="light"
  ></div>

  <button type="submit">Submit</button>
</form>

Установка data-language="ja" отображает «成功しました！» (Успех!) по-японски при верификации. data-theme="light" управляет цветом фона для соответствия дизайну сайта.

3. Обновление заголовков CSP

Поскольку Turnstile использует iframe, его необходимо правильно разрешить в CSP.

script-src: https://challenges.cloudflare.com
connect-src: https://challenges.cloudflare.com
frame-src: https://challenges.cloudflare.com

Примечание: задержка распространения после создания виджета

Сразу после создания виджета в панели Cloudflare Dashboard требуется 1–2 минуты для глобального распространения site key. В этот период будет возникать ошибка 400020, но она разрешается после короткого ожидания.

Использование ssgform.com

Мы используем ssgform.com в качестве эндпоинта отправки формы. Это сервис обработки форм для статических сайтов со следующими преимуществами:

• Серверный код не требуется
• Автоматические уведомления по электронной почте
• Поддержка верификации токенов Turnstile
• Достаточный объём отправок на бесплатном тарифе

Итоги

Как для CMS, так и для защиты от ботов мы объединились вокруг принципа «выбирать необходимый минимум». Pages CMS можно настроить за 5 минут, а Turnstile реализуется добавлением всего нескольких строк HTML. Именно потому, что архитектура проста, операционные затраты остаются низкими.