Xây dựng form liên hệ an toàn cho website tĩnh với Cloudflare Workers và reCAPTCHA v3

Việc tích hợp form liên hệ vào website tĩnh luôn là thách thức khi không có backend truyền thống. Bài viết này trình bày giải pháp toàn diện sử dụng Cloudflare Pages Functions kết hợp Google reCAPTCHA v3 và dịch vụ email Resend để tạo form gửi mail chống spam hiệu quả, kèm theo phương án thay thế bằng Cloudflare Turnstile.

Ngoài ra, tác giả cũng chia sẻ chi tiết về cách hoạt động của reCAPTCHA v3, các biện pháp bảo mật như honeypot, kiểm tra dữ liệu hai lớp và tối ưu trải nghiệm người dùng với tính năng hỗ trợ tiếp cận (accessibility).

Vì sao cần serverless endpoint cho form liên hệ?

Đối với website tĩnh được xây dựng bằng Eleventy (11ty) và lưu trữ trên Cloudflare Pages, không tồn tại máy chủ backend để xử lý phương thức POST từ form. Do đó, giải pháp serverless endpoint thông qua Cloudflare Worker là lựa chọn tối ưu. Worker này nhận dữ liệu từ form, xác thực và chuyển tiếp email đến hộp thư mong muốn một cách an toàn.

Kiến trúc tổng quan hệ thống

Quy trình hoạt động của hệ thống bao gồm:

• Người dùng điền thông tin vào form liên hệ
• Google reCAPTCHA v3 chạy ngầm và tạo token xác thực có thời hạn ngắn
• Form gửi dữ liệu đến /api/contact (Pages Function trong functions/api/contact.js)
• Hàm này thực hiện xác minh token với Google, kiểm tra dữ liệu đầu vào và gửi email qua Resend
• Người dùng được chuyển hướng đến trang "Cảm ơn" sau khi gửi thành công

Kiến trúc hệ thống liên hệ

Tìm hiểu cơ chế hoạt động của Google reCAPTCHA v3

Điểm đặc biệt của reCAPTCHA v3 là hoạt động hoàn toàn ẩn với người dùng, không yêu cầu xác nhận hình ảnh hay câu đố phiền phức. Thay vào đó, nó phân tích đa dạng tín hiệu để đánh giá mức độ "giống người" của phiên tương tác.

Phân tích hành vi người dùng

Google quan sát các mẫu hành vi như chuyển động chuột, tốc độ gõ phím, hành vi cuộn trang và thời gian tương tác. Người thật thường có thao tác "không hoàn hảo" - chuột di chuyển cong vẹo, gõ phím không đều. Trong khi đó, bot thường thể hiện các mẫu quá hoàn hảo như đường thẳng, thời gian phản hồi cực nhanh.

Nhận dạng thiết bị và trình duyệt

Tương tự kỹ thuật fingerprinting trong quảng cáo, reCAPTCHA kiểm tra phiên bản trình duyệt, phông chữ, độ phân giải màn hình, cài đặt ngôn ngữ và nhiều tín hiệu khác. Bot thường chạy trong môi trường headless hoặc thiết bị giả lập - rất khác biệt so với thiết bị thật.

"Thật thú vị khi biết rằng fingerprinting không chỉ dùng cho mục đích quảng cáo. Nó còn hữu ích trong việc xác minh người dùng là con người thật sự."

Tín hiệu mạng và danh tiếng

Nhờ mạng lưới toàn cầu, Google có thể truy xuất dữ liệu về địa chỉ IP, mạng bot, proxy và các mẫu lạm dụng trước đó. Phát hiện traffic đáng ngờ trở nên dễ dàng hơn bao giờ hết.

Xử lý dữ liệu form với Cloudflare Pages Function

Code dưới đây là phần xử lý chính nằm tại functions/api/contact.js, được trigger cho mọi POST request đến /api/contact:

export const onRequestPost = async ({ request, env }) => {
  try {
    // 1. Chỉ chấp nhận form HTML chuẩn
    const contentType = request.headers.get('content-type') || '';
    if (!contentType.includes('application/x-www-form-urlencoded') && 
        !contentType.includes('multipart/form-data')) {
      return new Response(JSON.stringify({ error: 'Unsupported content type' }), {
        status: 415,
        headers: { 'content-type': 'application/json' },
      });
    }

    const form = await request.formData();

    // 2. Kiểm tra trường honeypot
    if (form.get('_its-a-trap!')) {
      const hpUrl = new URL('/', request.url);
      return Response.redirect(hpUrl.toString(), 303);
    }

    // 3. Trích xuất và chuẩn hóa dữ liệu
    const name = (form.get('name') || '').toString().trim();
    const email = (form.get('email') || '').toString().trim();
    const message = (form.get('message') || '').toString().trim();
    const redirectUrl = (form.get('_redirect') || '/contact/thanks/').toString();

    // 4. Kiểm tra trường bắt buộc
    if (!name || !email || !message) {
      return new Response(JSON.stringify({ error: 'Missing required fields' }), {
        status: 400,
        headers: { 'content-type': 'application/json' },
      });
    }

    // 5. Kiểm tra độ dài
    if (name.length > 200 || email.length > 320 || message.length > 5000) {
      return new Response(JSON.stringify({ error: 'Invalid field lengths' }), {
        status: 400,
        headers: { 'content-type': 'application/json' },
      });
    }

    // ... (continues with CAPTCHA verification and email sending)

Tích hợp reCAPTCHA v3 vào form

Phía máy khách

Form sử dụng chuẩn HTML5 với custom JavaScript validation để kiểm tra dữ liệu trước khi gửi. Sử dụng thuộc tính novalidate để kiểm soát hoàn toàn quá trình xác thực.

Phía máy chủ

Sau khi nhận token từ reCAPTCHA, server gửi yêu cầu xác minh đến Google:

const verifyParams = new URLSearchParams({
  secret,
  response: recaptchaToken.toString(),
});
if (remoteIp) {
  verifyParams.append('remoteip', remoteIp);
}

const verifyResp = await fetch('https://www.google.com/recaptcha/api/siteverify', {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  body: verifyParams,
});

Xử lý kết quả và ngưỡng chấp nhận

reCAPTCHA trả về điểm số từ 0.0 đến 1.0. Tác giả đề xuất:

• 0.9 – 1.0: Rất có khả năng là người
• 0.5: Không chắc chắn
• 0.0 – 0.3: Rất có khả năng là bot

Code sẽ từ chối mọi yêu cầu có điểm dưới 0.3, và có thể yêu cầu xác thực thêm (MFA) cho điểm từ 0.4 – 0.8 tùy vào mức độ rủi ro của từng use case.

Các tính năng bảo mật và UX của form

Chống spam đa lớp

Ngoài reCAPTCHA, form còn tích hợp honeypot - một trường ẩn mà người dùng thật không bao giờ thấy hoặc điền. Bot thường quét source code và điền vào mọi trường, vì vậy nếu trường này có giá trị, yêu cầu sẽ bị từ chối ngay lập tức.

Xác thực dữ liệu hai lớp

• Phía máy khách: Sử dụng JavaScript custom để kiểm tra trường bắt buộc và định dạng email
• Phía máy chủ: Kiểm tra lại độ dài tối đa (name: 200 ký tự, email: 320 ký tự, message: 5000 ký tự) và token reCAPTCHA hợp lệ

Tiếp cận và trải nghiệm người dùng

Form tuân thủ chuẩn WCAG với các tính năng như aria-labelledby, role="alert", role="status", di chuyển focus đến error summary khi có lỗi, hỗ trợ đọc màn hình và trợ giúp điều hướng bàn phím.

So sánh với Cloudflare Turnstile

Sau khi chia sẻ bài viết, tác giả nhận được góp ý về việc sử dụng Cloudflare Turnstile - sản phẩm CAPTCHA của chính Cloudflare. Đây là lựa chọn thay thế hấp dẫn với ưu điểm:

Lợi ích của Turnstile

Turnstile là lựa chọn thay thế hoàn toàn miễn phí của Cloudflare, hoạt động trực tiếp trên nền tảng của họ, giúp đơn giản hóa CSP và giảm sự phụ thuộc vào bên thứ ba. Giải pháp này tương tự như reCAPTCHA v3 - vô hình với người dùng nhưng vẫn chặn hiệu quả bot.

Chi phí ưu đãi

Resend hiện có gói miễn phí cho nhà phát triển, Cloudflare Functions trên Pages cũng có hạn mức miễn phí hào phóng. Kết hợp cả ba giải pháp sẽ gần như không tốn phí cho website cá nhân.

Lịch sử các giải pháp đã sử dụng

Qua nhiều năm, tác giả đã thử nghiệm nhiều phương án khác nhau:

• Netlify Forms: Đơn giản nhưng phụ thuộc vào nền tảng Netlify
• Cloudflare Pages Functions + MailChannels: Hiệu quả đến khi MailChannels ngừng dịch vụ miễn phí
• Formspree.io: Dễ tích hợp nhưng có phí
• Formspark.io: Đơn giản nhưng vẫn gặp spam
• Botpoison: Chống bot tốt nhưng chưa đủ

Cuối cùng, Cloudflare Pages Functions + reCAPTCHA v3 + Resend là giải pháp tối ưu nhất với chi phí thấp, bảo mật tốt.

Kết luận

Việc xây dựng form liên hệ an toàn cho website tĩnh không còn là thách thức với sự kết hợp của Cloudflare Functions, reCAPTCHA v3 và Resend. Giải pháp này không chỉ chống spam hiệu quả mà còn đảm bảo tính bảo mật, khả năng tiếp cận cho người khuyết tật và tối ưu hóa trải nghiệm người dùng.

Đặc biệt, với Cloudflare Turnstile, các nhà phát triển Việt Nam và quốc tế có thể dễ dàng triển khai giải pháp miễn phí, hoàn toàn tương thích hệ sinh thái Cloudflare mà không cần phụ thuộc vào Google.