Keamanan Form Order dengan Order Form Security

SAMPEL / DEMO DAFTAR MENU ONLINE TERBARU

Meningkatkan Keamanan Form Order dengan order-form-security di Website Menu.

Di era digital, keamanan data pelanggan menjadi hal yang sangat penting, terutama untuk website yang menyediakan layanan pemesanan online seperti menu restoran, kafe, atau toko online. Order Form Security hadir sebagai solusi untuk melindungi form order dari berbagai ancaman siber, termasuk SQL injection, cross-site scripting (XSS), dan pengiriman data otomatis oleh bot.

Dengan plugin ini, setiap input yang dikirim melalui form order akan divalidasi dan disaring secara otomatis. Fitur tambahan seperti CSRF token memastikan bahwa hanya pengguna asli yang dapat mengirim data, sehingga integritas data pelanggan tetap terjaga. Website yang aman akan meningkatkan kepercayaan pelanggan, mengurangi risiko kerugian, dan mencegah manipulasi data.

Kapan Perlu Menggunakan Order Form Security?
Tidak semua website membutuhkan plugin ini sejak awal. Berikut beberapa kondisi ketika penggunaannya sangat dianjurkan:

  1. Volume Pesanan Tinggi – Jika website mulai menerima banyak order per hari, risiko serangan bot atau spam meningkat.

  2. Form Order Terbuka untuk Publik – Form tanpa login atau autentikasi rentan terhadap penyalahgunaan.

  3. Data Sensitif – Jika form memuat informasi pribadi pelanggan seperti alamat, nomor telepon, atau metode pembayaran.

  4. Serangan atau Spam Terjadi – Jika website pernah menjadi target spam form atau manipulasi input sebelumnya.

Dengan memahami kapan plugin ini dibutuhkan, Anda dapat menyeimbangkan antara performa website dan keamanan. Untuk bisnis kuliner, kafe, atau restoran, menerapkan Order Form Security tepat waktu dapat meminimalkan risiko dan memastikan pengalaman pelanggan tetap aman dan nyaman.

Admin Akses :

FILE :  https://drive.google.com/file/d/13tQLLAHmF30qssvTT-Yh8sYFx_yPs0b2/view?usp=drive_link

setting di plugin Order Form Security:

  • Form Class Selector → isi dengan : Contoh #restora-form
    (karena plugin injeksi nonce/reCAPTCHA pakai selector CSS, kalau form pakai ID maka ditulis dengan tanda #).
  • reCAPTCHA Site Key → isi dengan Site Key dari Google reCAPTCHA v2 (Checkbox) yang Anda daftarkan di Google reCAPTCHA Admin Console.
  • reCAPTCHA Secret Key → isi dengan Secret Key dari project yang sama di Google.

⚠️ Jika belum punya site key & secret key:

  1. Daftar dulu di Google reCAPTCHA v2.
    • Pilih tipe: reCAPTCHA v2 → “I’m not a robot” Checkbox.
    • Masukkan domain website Anda.
  2. Setelah didaftarkan, Google akan kasih Site Key & Secret Key.
  3. Masukkan ke setting plugin.

🔹 Step 1: Buka halaman Admin Console

  1. Buka link: 👉 Google reCAPTCHA Admin Console
    (pastikan login dengan akun Google yang biasa dipakai untuk kelola website).

🔹 Step 2: Daftar situs baru

Di form pendaftaran, isi data berikut:

  1. Label
    → Bebas, untuk pengingat saja. Contoh: Restora Security
  2. reCAPTCHA type
    → Pilih reCAPTCHA v2
    → Lalu pilih opsi “I’m not a robot” Checkbox
  3. Domains
    → Masukkan domain website Anda tanpa https:// dan tanpa / di belakang.
    Contoh:
  • restoku.com
  • subdomain.restoku.com

⚠️ kalau testing di localhost, bisa juga isi localhost.

  • Owners
    → Otomatis email Google Anda terisi. Bisa tambahkan email lain jika perlu.
  • Accept the reCAPTCHA Terms of Service ✅ centang.
  • Klik tombol Submit.

 

🔹 Step 3: Ambil Site Key & Secret Key

Setelah submit, Google akan menampilkan:

  • Site Key → dipakai di frontend (ditaruh di form).
  • Secret Key → dipakai di server (untuk validasi).

Contoh (fiktif):

  • Site Key: 6Lc12345AAAAAABBBCCCCDDDDEEEEFFFFGGGG
  • Secret Key: 6Lc12345AAAAAABBBCCCCDDDDEEEEFFFFHHHH

🔹 Step 4: Masukkan ke plugin

Buka WordPress → Settings → Order Form Security, lalu isi:

  • Form Class Selector → #restora-form
  • reCAPTCHA Site Key → paste Site Key dari Google
  • reCAPTCHA Secret Key → paste Secret Key dari Google

Simpan perubahan ✅

🔹 Step 5: Tes form

  1. Buka halaman Checkout (yang pakai [restora_checkout]).
  2. Harus muncul kotak reCAPTCHA (“I’m not a robot”).
  3. Kalau dicentang → form bisa lanjut submit.
  4. Kalau tidak dicentang / gagal validasi → plugin akan menolak submit dengan pesan error.

Penjelasan singkat fitur & cara kerja

  • Menambahkan nonce & marker otomatis: JavaScript (ditempel di frontend) menemukan form sesuai Form selector yang Anda set di settings (default .order-form) lalu menambahkan hidden input ofs_nonce dan ofs_form_marker=1. Plugin membuat nonce server-side (wp_create_nonce) dan memasukkannya ke field.
  • Validasi nonce saat submit: Saat server menerima POST yang mengandung ofs_form_marker, plugin memanggil wp_verify_nonce. Jika gagal → wp_die() (403).
  • Sanitasi input: Semua $_POST di-sanitize dengan heuristik sederhana:
    • Jika string mengandung newline atau panjang >120 → sanitize_textarea_field.
    • Jika string hanya angka → intval.
    • Lainnya → sanitize_text_field.
    • $_FILES tidak diubah.
  • Google reCAPTCHA v2:
    • Jika diaktifkan dan site key diisi → plugin menambahkan elemen <div class="g-recaptcha" data-sitekey="..."> ke form; script reCAPTCHA Google di-load otomatis.
    • Server-side verifikasi memakai wp_remote_post ke https://www.google.com/recaptcha/api/siteverify dengan secret key.
  • Rate limiting dasar: per IP, disimpan transient ofs_rate_<md5(ip)>. Default 30 detik (atur di settings). Jika melanggar → wp_die() 429.
  • Modular dan non-intrusive: plugin hanya menambahkan field marker dan nonce via JS. Jika sebuah form tidak cocok selector, plugin tidak ikut campur. Plugin tidak mengubah plugin order lama secara langsung — hanya memodifikasi $_POST (sanitasi) ketika marker terdeteksi.

Pengujian & tips

  1. Pasang plugin, buka Settings → Order Form Security.
  2. Set Form selector sesuai form Anda (coba .order-form atau form[data-order="true"] atau #my-order-form).
  3. Jika mau reCAPTCHA, isi site key & secret key dari Google reCAPTCHA v2 (Checkbox).
  4. Buka halaman frontend yang berisi form; view-source/inspector untuk memastikan ada hidden inputs:
    • ofs_form_marker = 1
    • ofs_nonce = <value>
    • bila reCAPTCHA aktif: ada <div class="g-recaptcha" data-sitekey="...">
  5. Submit form, periksa apakah proses order lama tetap bekerja; plugin akan memproduksi wp_die() saat gagal validasi sehingga Anda bisa melihat pesan kesalahan.

Rekomendasi fitur tambahan (untuk menu setting)

Di luar yang Anda minta, saya sarankan menambahkan beberapa opsi pada menu Settings agar plugin lebih fleksibel:

  1. Whitelist / bypass roles — biarkan admin/editor tidak terkena rate-limit atau reCAPTCHA saat development.
  2. Custom error messages — agar Anda dapat menampilkan pesan yang ramah (atau di-translate) daripada wp_die() default.
  3. Log attempts — simpan log (opsional) pada db atau file untuk menganalisis percobaan spam (hanya saat debug).
  4. Custom header for identifying forms — alih-alih hanya selector berbasis CSS, tambahkan opsi data-attribute (mis. data-ofs="1") yang plugin juga bisa gunakan untuk mengidentifikasi form.
  5. Blacklist IPs — daftar IP yang diblokir permanen.
  6. Adjust sanitization rules — konfigurasi whitelist field names yang harus diperlakukan numeric / email / phone / html-allowed (mis. untuk order notes).
  7. Support untuk reCAPTCHA v3 — jika ingin scoring-based protection (beda alur validasi).
  8. Fallback captcha — jika Google reCAPTCHA gagal (mis. load blocked), bisa fallback ke simple math-captcha.