Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

คุณสมบัติ isTrusted ของ Event ใน HTML DOM

คุณสมบัติ isTrusted คืออะไร?

คุณสมบัติ isTrusted ของออบเจ็กต์ Event ใน HTML DOM คืนค่า Boolean (true หรือ false) บ่งบอกว่าเหตุการณ์ (Event) เกิดขึ้นจาก **การกระทำของผู้ใช้จริง** หรือจาก **สคริปต์ (Script)**

  • true: เหตุการณ์ถูกกระตุ้นโดยผู้ใช้ (คลิกเมาส์, กดแป้นพิมพ์, แตะหน้าจอ)
  • false: เหตุการณ์ถูกกระตุ้นโดยโค้ด JavaScript (เช่น element.click(), dispatchEvent())

ความสำคัญ:

ตัวอย่างการใช้งาน: ป้องกันการล็อกอินโดยสคริปต์

<!DOCTYPE html>
<html>
<head>
  <title>HTML isTrusted Demo</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 10px; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>การเข้าสู่ระบบปลอดภัย</legend>
      <input type="email" id="emailInput" placeholder="อีเมล เช่น user@example.com">
      <input type="password" id="passInput" placeholder="รหัสผ่าน">
      <input type="button" id="loginBtn" value="เข้าสู่ระบบ" onclick="handleLogin(event)">
      <div id="msg">ระบบจะลองล็อกอินอัตโนมัติใน 2 วินาที...</div>
    </fieldset>
  </form>

  <script>
    var emailInput = document.getElementById("emailInput");
    var passInput = document.getElementById("passInput");
    var loginBtn = document.getElementById("loginBtn");
    var msg = document.getElementById("msg");

    // จำลองสคริปต์มัลแวร์พยายามล็อกอินอัตโนมัติ
    setTimeout(function() {
      emailInput.value = "attacker@evil.com";
      passInput.value = "stolenpassword";
      loginBtn.click(); // เรียก event โดยสคริปต์ -> isTrusted = false
    }, 2000);

    function handleLogin(event) {
      if (event.isTrusted) {
        // กดโดยผู้ใช้จริง
        msg.textContent = 'ยินดีต้อนรับ ' + emailInput.value.split("@")[0];
        msg.style.color = "green";
        // ทำการล็อกอินจริงที่นี่ (AJAX, form submit ฯลฯ)
      } else {
        // ถูกเรียกโดยสคริปต์
        msg.textContent = '⚠ พบพยายามล็อกอินโดยสคริปต์อัตโนมัติ! บล็อกการเข้าถึง';
        msg.style.color = "red";
        // บล็อก หรือแจ้งเตือนระบบความปลอดภัย
      }
    }
  </script>
</body>
</html>

ผลลัพธ์ที่คาดหวัง

  1. ก่อน 2 วินาที: แสดงข้อความ "ระบบจะลองล็อกอินอัตโนมัติ..."
  2. หลัง 2 วินาที (สคริปต์ทำงาน): แสดง "⚠ พบพยายามล็อกอินโดยสคริปต์อัตโนมัติ! บล็อกการเข้าถึง" (สีแดง)
  3. หากผู้ใช้คลิกปุ่มด้วยตัวเอง: แสดง "ยินดีต้อนรับ [ชื่อ]" (สีเขียว)

เหตุการณ์ที่รองรับ isTrusted

รองรับทุกเหตุการณ์มาตรฐานของ DOM เช่น click, submit, keydown, mouseover, touchstart ฯลฯ

ข้อจำกัด

  • ไม่สามารถป้องกันการโจมตีระดับฮาร์ดแวร์หรือระดับ OS (เช่น โปรแกรมจำลองเมาส์)
  • บางเบราว์เซอร์เก่าอาจไม่รองรับ (IE11+ รองรับ, Edge, Chrome, Firefox, Safari รองรับเต็มที่)
  • ไม่ใช่การป้องกันที่สมบูรณ์แบบ ควรใช้ร่วมกับ CSRF Token, Rate Limiting, และการตรวจสอบฝั่งเซิร์ฟเวอร์

สรุป

event.isTrusted เป็นเครื่องมือสำคัญสำหรับ **Client-side Security** ช่วยแยกแยะระหว่างการกระทำของมนุษย์และสคริปต์อัตโนมัติ ควรนำไปใช้ในฟอร์มสำคัญ เช่น ล็อกอิน, ชำระเงิน, การเปลี่ยนรหัสผ่าน