คุณสมบัติ isTrusted คืออะไร?
คุณสมบัติ isTrusted ของออบเจ็กต์ Event ใน HTML DOM คืนค่า Boolean (true หรือ false) บ่งบอกว่าเหตุการณ์ (Event) เกิดขึ้นจาก **การกระทำของผู้ใช้จริง** หรือจาก **สคริปต์ (Script)**
true: เหตุการณ์ถูกกระตุ้นโดยผู้ใช้ (คลิกเมาส์, กดแป้นพิมพ์, แตะหน้าจอ)false: เหตุการณ์ถูกกระตุ้นโดยโค้ด JavaScript (เช่นelement.click(),dispatchEvent())
ความสำคัญ:ช่วยป้องกันการโจมตีประเภท Clickjacking หรือการหลอกลวงระบบโดยการจำลองเหตุการณ์
ตัวอย่างการใช้งาน: ป้องกันการล็อกอินโดยสคริปต์
<!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>
ผลลัพธ์ที่คาดหวัง
- ก่อน 2 วินาที: แสดงข้อความ "ระบบจะลองล็อกอินอัตโนมัติ..."
- หลัง 2 วินาที (สคริปต์ทำงาน): แสดง "⚠ พบพยายามล็อกอินโดยสคริปต์อัตโนมัติ! บล็อกการเข้าถึง" (สีแดง)
- หากผู้ใช้คลิกปุ่มด้วยตัวเอง: แสดง "ยินดีต้อนรับ [ชื่อ]" (สีเขียว)
เหตุการณ์ที่รองรับ isTrusted
รองรับทุกเหตุการณ์มาตรฐานของ DOM เช่น click, submit, keydown, mouseover, touchstart ฯลฯ
ข้อจำกัด
- ไม่สามารถป้องกันการโจมตีระดับฮาร์ดแวร์หรือระดับ OS (เช่น โปรแกรมจำลองเมาส์)
- บางเบราว์เซอร์เก่าอาจไม่รองรับ (IE11+ รองรับ, Edge, Chrome, Firefox, Safari รองรับเต็มที่)
- ไม่ใช่การป้องกันที่สมบูรณ์แบบ ควรใช้ร่วมกับ CSRF Token, Rate Limiting, และการตรวจสอบฝั่งเซิร์ฟเวอร์
สรุป
event.isTrusted เป็นเครื่องมือสำคัญสำหรับ **Client-side Security** ช่วยแยกแยะระหว่างการกระทำของมนุษย์และสคริปต์อัตโนมัติ ควรนำไปใช้ในฟอร์มสำคัญ เช่น ล็อกอิน, ชำระเงิน, การเปลี่ยนรหัสผ่าน