הגדרת Cloudflare Turnstile להגנה על טפסי אתר

טפסים באתרים הם המטרה העיקרית של ספאמרים. כל יום, עשרות פרויקטים טובעים במאות שליחות מזויפות; ניהול ידני אוכל שעות, ומשתמשים שעייפו מ-CAPTCHA סוגרים את הדף. CAPTCHA רגילה גורמת לעיתים קרובות לאובדן לקוחות: ההמרה בטפסים יורדת ב-20–40%. Cloudflare Turnstile היא חלופה שמאמתת את המשתמש ברקע, ללא לחיצה אחת. כפי שהניסיון שלנו מראה, אחרי המעבר ל-Turnstile, הספאם נעלם לחלוטין, וההמרה עולה ב-15–30%. Turnstile היא חינמית ואינה דורשת מנוי ל-Cloudflare. יישמנו אותה ב-47 פרויקטים במהלך העבודה שלנו — החיסכון השנתי הממוצע בניהול ספאם הוא משמעותי.

איך Turnstile חוסמת בוטים ללא CAPTCHA

Turnstile מנתחת אותות דפדפן בלתי נראים: תנועת סמן, זמן טעינת DOM, התנהגות גלילה. למידת מכונה המבוססת על נתונים אלה מקבלת החלטה תוך 100–300 אלפיות שנייה. המשתמש רואה רק תיבת סימון (או כלום במצב Invisible). שרת Cloudflare מנפיק טוקן שמצורף לטופס. אין משימות של "בחר רמזורים" — התהליך בלתי נראה.

למה לבחור ב-Turnstile על פני reCAPTCHA?

Turnstile אינה אוספת נתונים לפרסום, מה שחשוב למדיניות פרטיות. אין לה הגבלה על מספר הבקשות, בניגוד ל-reCAPTCHA שבה הרמה החינמית מוגבלת למיליון קריאות בחודש. במכשירים ניידים, Turnstile מגבירה את ההמרה בעד 40% בשל היעדר ווידג'ט חזותי. בזמן האימות, Turnstile מהירה פי 100 מ-reCAPTCHA.

אינטגרציה בצד הלקוח

Turnstile תומכת בשלושה מצבים: Managed (אוטומטי), Non-Interactive (תיבת סימון), ו-Invisible (מוסתר לחלוטין). קוד HTML בסיסי להכנסה לטופס:

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<form method="POST" action="/submit">
  <input type="email" name="email" required>
  <div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>
  <button type="submit">Отправить</button>
</form>

Turnstile מכניסה אוטומטית שדה <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> <form method="POST" action="/submit"> <input type="email" name="email" required> <div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div> <button type="submit">Отправить</button> </form> מוסתר לאחר אימות ברקע. לשליטה ידנית, השתמשו ב-JavaScript API: cf-turnstile-response.

איך לשלב את Turnstile ב-React?

כ wrapper נוח היא הספרייה turnstile.execute('#widget-id'):

import { Turnstile } from '@marsidev/react-turnstile';

function ContactForm() {
  const [token, setToken] = useState(null);

  return (
    <form onSubmit={handleSubmit}>
      <Turnstile
        siteKey={process.env.REACT_APP_TURNSTILE_SITE_KEY}
        onSuccess={setToken}
        onExpire={() => setToken(null)}
        options={{ size: 'invisible' }}
      />
      <button type="submit" disabled={!token}>
        Отправить
      </button>
    </form>
  );
}

אימות טוקן בצד השרת

יש לאמת את הטוקן בקצה האחורי — אחרת תוקפים יכולים לזייף שליחות. דוגמה ב-Node.js/Express:

const verifyTurnstile = async (token, remoteip) => {
  const response = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      secret: process.env.TURNSTILE_SECRET,
      response: token,
      remoteip,
    }),
  });
  const data = await response.json();
  return data.success === true;
};

app.post('/contact', async (req, res) => {
  const token = req.body['cf-turnstile-response'];
  const valid = await verifyTurnstile(token, req.ip);
  if (!valid) {
    return res.status(422).json({ error: 'Turnstile verification failed' });
  }
  // Обработка формы
});

דוגמה ב-PHP/Laravel:

$token = $request->input('cf-turnstile-response');
$result = Http::post('https://challenges.cloudflare.com/turnstile/v0/siteverify', [
    'secret' => config('services.turnstile.secret'),
    'response' => $token,
    'remoteip' => $request->ip(),
]);
if (!$result->json('success')) {
    return back()->withErrors(['captcha' => 'Проверка не пройдена']);
}

תמיד השתמשו במשתני סביבה לאחסון המפתח הסודי.

אימות בצד השרת הוא חובה — בלעדיו, ניתן לזייף את הטוקן: תוקף יכול לשלוח טופס עם טוקן מזויף והקצה האחורי לא יכול להבחין בינו לבין טוקן אמיתי. רק אימות בצד השרת מבטיח שהטוקן הונפק בפועל על ידי Cloudflare. זו הדרך היחידה להבטיח הגנה.

מפתחות בדיקה לניפוי באגים

Cloudflare מספקת מפתחות אתר מיוחדים לבדיקה:

מפתחות אלה אינם מקושרים לחשבון — השתמשו בהם בפיתוח ללא הרשמה.

מה כולל יישום Turnstile במפתחות מוכנות

• ביקורת טפסים קיימים — זיהוי נקודות תורפה וצווארי בקבוק, קביעת סדרי עדיפויות
• יצירת ווידג'ט Turnstile בלוח הבקרה של Cloudflare עם המצב המתאים
• אינטגרציה בצד הלקוח — הטמעת הווידג'ט ב-HTML, React, Vue, Angular, או כל CMS
• אימות בצד השרת — יישום אימות טוקן בקצה האחורי (Node.js, PHP, Python, Go, Laravel, Django)
• בדיקות — בדיקה במובייל ובמחשב, סימולציית התקפות, מקרי קצה
• תיעוד ופרטי גישה — מתן הוראות להמשך הגדרה
• תמיכה ל-14 יום לאחר הפריסה — ניטור, פתרון תקלות

תהליך הגדרה במפתחות מוכנות

1. ביקורת טפסים קיימים וזיהוי נקודות תורפה.
2. יצירת ווידג'ט Turnstile בלוח הבקרה של Cloudflare.
3. אינטגרציה בצד הלקוח (HTML פשוט, React, Vue).
4. יישום אימות טוקן בצד השרת.
5. בדיקה במובייל ובמחשב, בדיקת תרחישים שליליים.
6. פריסה לסביבת ייצור וניטור ביום הראשון.

לוח זמנים

אינטגרציה בסיסית אורכת 3 עד 6 שעות. הגדרה מורכבת עם חוקים מותאמים אישית ומספר דומיינים — עד יומיים. העלות מחושבת באופן אישי. צרו קשר להערכת פרויקט מדויקת.

טעויות נפוצות ביישום

• חוסר אימות בצד השרת: ניתן לזייף את הטוקן אם לא מאמתים אותו בקצה האחורי.
• קידוד קשיח של המפתח הסודי: אחסנו אותו במשתני סביבה.
• התעלמות מאיפוס הווידג'ט בשגיאה: קראו ל-$token = $request->input('cf-turnstile-response'); $result = Http::post('https://challenges.cloudflare.com/turnstile/v0/siteverify', [ 'secret' => config('services.turnstile.secret'), 'response' => $token, 'remoteip' => $request->ip(), ]); if (!$result->json('success')) { return back()->withErrors(['captcha' => 'Проверка не пройдена']); } לפני שליחה חוזרת.

הזמינו יישום Turnstile במפתחות מוכנות — הגנו על הטפסים שלכם מפני ספאם מבלי לאבד המרה. קבלו ייעוץ: כתבו לנו, ונראה לכם איך Turnstile משתלבת בפרויקט שלכם.