Basic Concept

Bot ဆိုတာ authentication မရှိတဲ့ contact/login/registration လို form တွေမှာ အလိုအလျောက် ဖြည့်ပြီး data တွေထည့်ဖို့ ဖန်တီးထားတဲ့ program တွေဆိုတာ သိပြီးသားဖြစ်မှာပါ။

Bot တွေကို ဥပမာ Automate Testing လို မှန်ကန်တဲ့ နေရာတွေမှာ အသုံးပြုမယ်ဆိုရင် အကျိုးရှိနိုင်ပါတယ်။ ဒါပေမယ့် ဥပမာ မကောင်းတဲ့ ရည်ရွယ်ချက်နဲ့ spamming, data hijacking လို attack လုပ်တာတွေမှာ အသုံးချမယ်ဆိုရင်တော့ attack လုပ်ခံရတဲ့ အဖွဲ့အစည်းမှာ ထိခိုက်နိုင်ပါတယ်။

Bot တွေကို ကာကွယ်ဖို့အတွက် နည်းလမ်းတွေ အမျိုးမျိုးရှိ အထဲမှာမှ Honeypot က နည်းလမ်းတစ်ခု ဖြစ်ပါတယ်။

Honeypot ဆိုတာ attacker တွေ ဝင်လာတဲ့အခါမှာ -

• attacker ရဲ့ ပစ်မှတ် တစ်ခုအနေနဲ့ ဟန်ဆောင်

• တကယ် အလုပ်လုပ်မယ့် function နဲ့ ခွဲခြားပြီး

• attacker ကို သူ့ ပစ်မှတ်ကို ထိသွားပြီလို့ ထင်မြင်ယူဆ သွားအောင် ပုံဖော် တုန့်ပြန် ပေးတဲ့ နည်းလမ်း တစ်ခုပါ။

Implementation

Honeypot နည်းလမ်း ကို TCP/IP Protocol Suite ရဲ့ Layer တိုင်းမှာ ရိုးရှင်းတဲ့ အခြေခံ အကျဆုံး ပုံစံကနေ ရှုပ်ထွေးပြီး အဆင့်မြင့်တဲ့ ပုံစံတွေအထိ အကောင်အထည်ဖော်လို့ရပါတယ်။

ဒီ Post မှာတော့ Application Layer မှာ ရှိတဲ့ API Based Web Application တွေအတွက် VueJS/HTML/CSS Frontend ပိုင်း နဲ့ Backend Laravel သုံးပြီး လက်တွေ့အကောင်အထည်ဖော်ပုံကို မျှဝေပေးသွားမှာ ဖြစ်ပါတယ်။

အောက်ပါ Sequence Diagram ကို လေ့လာကြည့်ပါ။ Implement လုပ်ရမှာက

• Frontend UI ဘက် အခြမ်းနဲ့

• Backend API ရှေ့က ကာတဲ့ Middleware ဘက် အခြမ်း နှစ်ခု ဖြစ်ပါတယ်။

Frontend Honeypot UI

User က တကယ်ဖြည့်ရမယ့် Form field တွေ ကြားထဲမှာ

• Bot တွေ Page ရဲ့ DOM ကို scan လုပ်လို့ တွေ့နိုင်တဲ့ honeypot field html element တစ်ခုကို ထည့်ပြီး

• အဲ့ honeypot field ကို User မမြင်အောင် ဝှက်ထားဖို့ CSS style code သုံးပြီး လုပ်ရပါမယ်။

<template>
  <form @submit.prevent="submitForm">
    <!-- Your regular form fields -->

    <!-- Honeypot Field "topyenoh" (visually hidden but in the form) -->
    <div class="topyenoh">
      <input type="text" name="topyenoh" v-model="topyenoh" autocomplete="off">
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      // Your regular form data
      topyenoh: '' // Honeypot field
    };
  },
  methods: {
    submitForm() {
      if (this.topyenoh) {
        // Looks like a bot filled it out, don't actually submit
        return false;
      }
      // Process form submission here for legitimate users
    }
  }
}
</script>

<style>
.topyenoh {
    position: absolute;
    left: -5000px;
}
</style>

Code မှာ honeypot field ပါတဲ့ <div> element ကို user မမြင်အောင် ဖျောက်ထားပါတယ်။ display: none; visibility: hidden; တို့ သုံးလို့ရပေမယ့် Bot အတွက် detect လုပ်ရတာ အရမ်းထင်ရှား လွယ်ကူလွန်းတဲ့ အတွက် position နဲ့ left property ကို တွဲပြီး နမူနာ သုံးထားပါတယ်။ ဘယ်ဘက်ကို -5000 px ရွှေ့ထားတဲ့ Display မှာ ပေါ်မှာမဟုတ်ပါဘူး။ နေရာလွတ်ဖြစ်မနေအောင် position ကို absolute ထား ပေးထားပါတယ်။

API ကို form submit မလုပ်ခင်မှာလည်း Frontend ဘက်က honeypot field ကို ဖြည့်ထား မထား အရင်စစ်ပါတယ်။

Backend Honeypot Laravel Middleware

<?php

namespace App\Http\Middleware;

use Closure;

class Honeypot
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        // Server-side check for the honeypot field
        // for preventing bot registering users
        if (!empty($request->input('topyenoh'))) {
            // Likely a bot submission, ignore or handle accordingly
            return response()->json(['message' => 'Success!'], 200); // Optionally fake a successful response
        }

        return $next($request);
    }
}

Backend Laravel ဘက်ကလည်း honeypot field ကို data ပါမပါ စစ်ပါတယ်။ data ပါလာရင် bot လို့ သတ်မှတ်ပြီး functional အလုပ်တွေ ဆက်မလုပ်တော့ဘဲ Fake response ပြန်ပါတယ်။

ဒီလောက်ဆို Honeypot နဲ့ ပတ်သက်ပြီး Web Application မှာ ဘယ်လို implement လုပ်လို့ရလဲဆိုတာ အခြေခံလောက် သဘောပေါက်မှာပါ။

ဖတ်ရှုလေ့လာ တဲ့အတွက် ကျေးဇူးတင်ပါတယ်။

Aung Kyaw Minn | Head of Technology

Onenex