Rate Limit สำหรับป้องกัน Spam ปุ่ม Submit

Rate Limit คือการจำกัดจำนวนครั้งที่ผู้ใช้สามารถทำ Action ซ้ำได้ในช่วงเวลาหนึ่ง ซึ่งช่วยป้องกันปัญหาการกดปุ่มซ้ำหลายครั้ง ลดภาระ Server และป้องกัน bot หรือพฤติกรรมที่ผิดปกติในระบบ E-commerce

ระดับของ Rate Limit

Basic Protection (พื้นฐาน)

เหมาะสำหรับ App ที่เพิ่งเริ่มต้น หรือยังไม่มีปัญหา spam ที่รุนแรง

const rateLimits = {
  perMinute: 3,      // 3 ครั้ง/นาที
  perHour: 10,       // 10 ครั้ง/ชั่วโมง
  cooldown: 20000    // ห่าง 20 วินาที/ครั้ง
}

Medium Protection (กลาง - แนะนำ)

เหมาะสำหรับ E-commerce ทั่วไป สมดุลระหว่างความปลอดภัยและ UX

const rateLimits = {
  perMinute: 2,      // 2 ครั้ง/นาที
  perHour: 5,        // 5 ครั้ง/ชั่วโมง
  perDay: 20,        // 20 ครั้ง/วัน
  cooldown: 30000    // ห่าง 30 วินาที/ครั้ง
}

Strict Protection (เข้มงวด)

เหมาะสำหรับระบบที่มีความเสี่ยงสูง หรือต้องการการควบคุมที่แน่นหนา

const rateLimits = {
  perMinute: 1,      // 1 ครั้ง/นาที
  perHour: 3,        // 3 ครั้ง/ชั่วโมง
  perDay: 10,        // 10 ครั้ง/วัน
  cooldown: 60000    // ห่าง 1 นาที/ครั้ง
}

แนะนำสำหรับ E-commerce ทั่วไป

ควรแยก Rate Limit ออกเป็น 2 ชั้น คือ Client-side เพื่อ UX และ Server-side เพื่อความปลอดภัยจริง

// Client-side (UI disable)
const clientLimit = {
  cooldown: 3000     // disable ปุ่ม 3 วินาที
}

// Server-side (ป้องกันจริง)
const serverLimit = {
  perMinute: 2,      // 2 ออเดอร์/นาที
  perHour: 5,        // 5 ออเดอร์/ชั่วโมง
  perDay: 20         // 20 ออเดอร์/วัน (ผู้ใช้ทั่วไป)
}

ปรับตาม User Type

ผู้ใช้แต่ละประเภทมีความน่าเชื่อถือและ Pattern การใช้งานต่างกัน ควรตั้งค่า limit ให้สอดคล้องกัน

const rateLimitByUserType = {
  guest: {
    perHour: 2,
    perDay: 5
  },
  registered: {
    perHour: 5,
    perDay: 20
  },
  verified: {
    perHour: 10,
    perDay: 50
  },
  vip: {
    perHour: 20,
    perDay: 100
  }
}

การป้องกันเพิ่มเติม

นอกจาก Rate Limit ยังมีวิธีเสริมที่ควรนำมาใช้ร่วมกัน

1. Debounce ปุ่ม - ห่าง 3-5 วินาทีหลังกดแต่ละครั้ง
2. CAPTCHA - แสดงเมื่อกดเกิน 3 ครั้งภายใน 5 นาที
3. IP-based limit - ป้องกัน bot ที่ใช้ user คนเดียวยิง request
4. Session tracking - ตรวจสอบพฤติกรรมผิดปกติ เช่น กดเร็วผิดมนุษย์
5. Payment verification - ยืนยันการชำระเงินก่อนสร้าง Order จริง

ตัวอย่าง Implementation

ตัวอย่าง Rate Limiter แบบ Simple ที่ใช้ Map เก็บ attempt ของแต่ละ user

const orderAttempts = new Map();

async function createOrder(userId) {
  const now = Date.now();
  const userAttempts = orderAttempts.get(userId) || [];

  // ลบ attempts เก่าที่เกิน 1 ชั่วโมง
  const recentAttempts = userAttempts.filter(
    time => now - time < 3600000
  );

  if (recentAttempts.length >= 5) {
    throw new Error('คุณสั่งซื้อถี่เกินไป กรุณารอสักครู่');
  }

  recentAttempts.push(now);
  orderAttempts.set(userId, recentAttempts);

  // ดำเนินการสั่งซื้อ
  return processOrder();
}

คำแนะนำเพิ่มเติม

• เริ่มต้นปานกลาง แล้วปรับตามข้อมูลการใช้งานจริง อย่า over-restrict ตั้งแต่แรก
• เก็บ logs ทุก attempt เพื่อวิเคราะห์พฤติกรรมและปรับ threshold ได้แม่นขึ้น
• แจ้งเตือนให้ชัดเจน เมื่อ user โดน rate limit เช่น บอกว่าต้องรออีกกี่วินาที
• ยืดหยุ่นในช่วง peak เช่น flash sale หรือ 11.11 อาจปรับ limit ชั่วคราวได้

สำหรับ ธุรกิจทั่วไป แนะนำที่ 2 ครั้ง/นาที และ 5 ครั้ง/ชั่วโมง ซึ่งสมดุลระหว่างการป้องกัน spam และไม่กวนใจผู้ใช้งานจริง