HTML의 isTrusted 이벤트 속성은 해당 이벤트가 신뢰할 수 있는(trusted) 이벤트인지 여부를 나타내는 불리언(Boolean) 값을 반환합니다.
참고: 스크립트를 통해 이벤트가 호출되면 isTrusted는 false를 반환하고, 실제 사용자의 상호작용으로 발생한 이벤트라면 true를 반환합니다.
이 속성은 특히 보안 관점에서 유용합니다. 예를 들어, 악성 스크립트가 프로그래밍 방식으로 버튼 클릭을 위조하는 것과 실제 사용자의 클릭을 구분하는 데 활용할 수 있습니다.
isTrusted 속성 예제
다음은 로그인 버튼 클릭 이벤트가 사용자에 의한 것인지, 아니면 스크립트에 의한 것인지 판별하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML isTrusted</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>HTML-isTrusted-attribute</legend>
<input type="email" id="emailSelect" placeholder="eg: xyz@abc.com">
<input type="password" id="passWordSelect">
<input id="loginbtn" type="button" value="Login" onclick="login(event)">
<div id="divDisplay">2초 후 로그인이 시도됩니다</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];
else
divDisplay.textContent = '스크립트에 의한 비인가 로그인 시도입니다';
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
1) 아무 동작도 일어나기 전
초기 화면에는 "2초 후 로그인이 시도됩니다"라는 안내 문구가 표시됩니다.
2) 스크립트로 'Login' 버튼이 클릭된 경우
setTimeout 함수가 2초 후 자동으로 loginbtn.click()을 호출하므로, 이 이벤트는 사용자가 아닌 스크립트에 의해 발생한 것입니다. 따라서 event.isTrusted는 false가 되며, "스크립트에 의한 비인가 로그인 시도입니다"라는 메시지가 출력됩니다.
3) 사용자가 직접 'Login' 버튼을 클릭한 경우
사용자가 마우스로 직접 버튼을 클릭하면 event.isTrusted는 true가 되어, 환영 메시지와 함께 이메일 계정 이름이 화면에 표시됩니다.
정리
isTrusted 속성은 읽기 전용(read-only)이며, 개발자가 임의로 값을 조작할 수 없습니다. 이러한 특성 덕분에 자동화 도구나 매크로에 의한 가짜 이벤트를 걸러내는 보안 장치로 활용하기에 적합합니다. 다만 모든 브라우저 환경에서 동일하게 동작하도록 하려면, 이 속성만으로 인증 로직을 구성하기보다는 서버 측 검증과 함께 사용하는 것이 좋습니다.