Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML isTrusted Event Property
The isTrusted event property is a read-only boolean property that indicates whether an event was triggered by a user action or programmatically by a script. This property is crucial for security purposes, allowing developers to distinguish between genuine user interactions and automated script-generated events.
When an event is triggered by genuine user actions like clicks, keystrokes, or mouse movements, the isTrusted property returns true. However, when the same event is generated programmatically using JavaScript methods like click(), dispatchEvent(), or similar functions, it returns false.
Syntax
Following is the syntax to access the isTrusted property from an event object −
event.isTrusted
Return Value
The isTrusted property returns a boolean value −
true− If the event was generated by a genuine user actionfalse− If the event was generated programmatically by a script
How isTrusted Works
The browser automatically sets the isTrusted property when creating event objects. User-initiated events (clicking a button, typing on keyboard, moving mouse) are marked as trusted, while script-generated events are marked as untrusted. This mechanism helps prevent malicious scripts from simulating user actions for unauthorized operations.
Example − Login Security Check
Following example demonstrates how isTrusted property can be used to implement security checks in a login form −
<!DOCTYPE html>
<html>
<head>
<title>HTML isTrusted Property</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
padding: 20px;
}
input {
padding: 8px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="button"] {
background-color: #007bff;
color: white;
cursor: pointer;
border-radius: 10px;
}
#divDisplay {
margin-top: 15px;
padding: 10px;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<form>
<fieldset>
<legend>Login Security Check</legend>
<input type="email" id="emailSelect" placeholder="eg: xyz@abc.com">
<input type="password" id="passWordSelect" placeholder="Password">
<input id="loginbtn" type="button" value="Login" onclick="login(event)">
<div id="divDisplay">Attempt to login will take place in 2 seconds</div>
</fieldset>
</form>
<script>
var emailSelect = document.getElementById("emailSelect");
var passWordSelect = document.getElementById("passWordSelect");
var loginbtn = document.getElementById("loginbtn");
var divDisplay = document.getElementById("divDisplay");
setTimeout(function() {
emailSelect.value = "paulaStanford@MNC.com";
passWordSelect.value = "hellopaula";
loginbtn.click();
}, 2000);
function login(event) {
if(event.isTrusted) {
divDisplay.textContent = 'Welcome ' + emailSelect.value.split("@")[0];
divDisplay.style.color = 'green';
} else {
divDisplay.textContent = 'Unauthorized attempt to login from a script';
divDisplay.style.color = 'red';
}
}
</script>
</body>
</html>
The output demonstrates the security behavior −
Initial: "Attempt to login will take place in 2 seconds" After 2 seconds (script click): "Unauthorized attempt to login from a script" (red text) When user clicks Login: "Welcome paulaStanford" (green text)
Example − Button Click Detection
Following example shows how to detect whether a button was clicked by user or triggered by script −
<!DOCTYPE html>
<html>
<head>
<title>isTrusted Click Detection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Click Detection Example</h2>
<button id="testBtn" onclick="checkTrust(event)">Test Button</button>
<button onclick="simulateClick()">Simulate Click</button>
<p id="result">Click the buttons to see isTrusted values</p>
<script>
function checkTrust(event) {
var result = document.getElementById("result");
if (event.isTrusted) {
result.textContent = "Real user click detected! (isTrusted = true)";
result.style.color = "green";
} else {
result.textContent = "Script-generated click detected! (isTrusted = false)";
result.style.color = "red";
}
}
function simulateClick() {
document.getElementById("testBtn").click();
}
</script>
</body>
</html>
The output shows different behaviors for real vs simulated clicks −
Manual "Test Button" click: "Real user click detected! (isTrusted = true)" (green) "Simulate Click" button: "Script-generated click detected! (isTrusted = false)" (red)
Common Use Cases
The isTrusted property is commonly used for −
Security validation − Preventing automated form submissions and bot attacks
User interaction tracking − Distinguishing between real user engagement and programmatic events
Anti-fraud measures − Blocking suspicious automated activities in financial or sensitive operations
Analytics accuracy − Ensuring user interaction metrics reflect genuine user behavior
Browser Compatibility
The isTrusted property is widely supported across modern browsers including Chrome, Firefox, Safari, and Edge. It was introduced as part of the DOM Level 3 Events specification and is considered a standard security feature in web browsers.
Conclusion
The isTrusted event property is an essential security feature that helps developers distinguish between genuine user actions and script-generated events. By checking this property, applications can implement robust security measures to prevent automated attacks and ensure authentic user interactions.
184 Views
