Tích hợp biểu mẫu
Kiến trúc nhận form an toàn: endpoint riêng, kiểm tra dữ liệu ở server, chống spam bằng Turnstile và honeypot, lưu vào D1.
- Hiểu luồng dữ liệu từ form tĩnh tới nơi lưu trữ
- Kiểm tra dữ liệu ở cả trình duyệt và server
- Chống spam bằng Turnstile và honeypot, giữ secret ở server
Landing Page tĩnh (HTML, CSS, JS) không tự lưu dữ liệu. Để nhận form, bạn cần một endpoint: một địa chỉ phía server nhận dữ liệu, kiểm tra, lưu lại và báo cho người phụ trách. Trên hạ tầng Cloudflare, có thể dùng Workers làm endpoint và D1 (cơ sở dữ liệu SQL) để lưu.
- Trình duyệt kiểm tra cơ bản (trường bắt buộc, định dạng email, số điện thoại) để báo lỗi nhanh cho khách.
- Form gửi dữ liệu bằng POST tới endpoint, ví dụ /api/lead, kèm token Turnstile.
- Worker kiểm tra lại toàn bộ dữ liệu ở server: không tin dữ liệu từ trình duyệt.
- Worker gọi API Siteverify của Turnstile bằng secret key để xác thực token.
- Worker kiểm tra trường honeypot: nếu có giá trị, bỏ qua yêu cầu.
- Lưu lead vào D1 bằng câu lệnh có tham số (prepared statement), tránh SQL injection.
- Gửi thông báo (email, webhook tới CRM) và trả về kết quả JSON để trang hiển thị lời cảm ơn.
Chống spam: Turnstile và honeypot
| Cách | Hoạt động | Lưu ý |
|---|---|---|
| Cloudflare Turnstile | Widget xác minh người dùng thật, thường không bắt giải đố | Bắt buộc xác thực token ở server; site key ở trang, secret key ở server |
| Honeypot | Một trường ẩn với người dùng; bot tự điền thì bị loại | Ẩn bằng CSS và đặt tabindex="-1", autocomplete="off" để không ảnh hưởng người dùng thật |
| Giới hạn tần suất | Giới hạn số lần gửi theo thời gian | Giảm spam hàng loạt từ một nguồn |
Dữ liệu cá nhân trong form
- Chỉ lưu trường cần thiết; không lưu dữ liệu nhạy cảm nếu không bắt buộc
- Lưu thời điểm và nội dung đồng ý khách đã đánh dấu
- Giới hạn người có quyền xem dữ liệu lead
- Có quy trình xóa khi khách yêu cầu và thời hạn lưu trữ rõ ràng
- Xử lý dữ liệu quy mô lớn hoặc nhạy cảm: nên tham khảo luật sư về Luật 91/2025/QH15
Bài tập thực hành
Vẽ sơ đồ kiến trúc nhận form cho Landing Page của bạn: các trường, nơi kiểm tra, cách chống spam, nơi lưu, ai được thông báo, nơi cất secret.
Gợi ý: Dùng 7 bước trong bài làm khung. Đánh dấu rõ phần nào chạy ở trình duyệt, phần nào chạy ở server.
- Dữ liệu được kiểm tra lại ở server
- Có Turnstile (xác thực ở server) và honeypot
- Không có secret nào ở frontend
- Có lưu bằng chứng đồng ý và quy trình xóa dữ liệu
- Có phương án liên hệ dự phòng khi form lỗi
Kiểm tra kiến thức
- Chỉ ở trình duyệt
- Ở server, gọi API Siteverify bằng secret key
- Không cần xác thực
- Trong Google Sheets
Xem đáp án
B. Ở server, gọi API Siteverify bằng secret key — Xác thực ở trình duyệt có thể bị giả mạo; chỉ server giữ secret key mới xác nhận token hợp lệ.
- Một loại cookie quảng cáo
- Trường ẩn với người dùng, bot tự điền sẽ bị loại
- Mã giảm giá
- Một công cụ email
Xem đáp án
B. Trường ẩn với người dùng, bot tự điền sẽ bị loại — Người dùng thật không thấy nên để trống trường này; bot điền mọi ô sẽ bị phát hiện.
- Vì trình duyệt chậm
- Vì kẻ xấu có thể bỏ qua trình duyệt và gửi thẳng tới endpoint
- Vì luật bắt buộc dùng server
- Không cần
Xem đáp án
B. Vì kẻ xấu có thể bỏ qua trình duyệt và gửi thẳng tới endpoint — Kiểm tra ở trình duyệt chỉ để tiện cho người dùng; bất kỳ ai cũng có thể gửi yêu cầu trực tiếp tới endpoint.