[javascript 안전한 이벤트] event.isTrusted를 활용해 이벤트 보안과 무결성 지키기
웹페이지에서 입력이나 이벤트가 일어날 땐, 민감한 사용자의 정보들이 포함될 수도 있다.
때문에, 보안을 잘 지키는 것이 중요한데.
이번엔 이벤트에서 보안을 잘 유지하기 위한 방법중 하나인 event.isTrusted에 대해서 알게되어 글을 남기고자 한다 👍
(이벤트 이름부터 믿음직하다 🐈)
event.isTrusted를 사용하면, 이벤트가 사용자에 의해 생성된 것인지 아니면 스크립트에 의해 인위적으로 생성된 것인지 확인할 수 있다.
이를 통해 악의적인 스크립트 또는 의도하지 않은 코드가 이벤트를 트리거했는지 검증할 수 있다고 한다 🎨
- event.isTrusted === true
이벤트가 사용자의 직접적인 동작(예: 마우스 클릭, 키보드 입력)에 의해 발생한 경우 - event.isTrusted === false
이벤트가 JavaScript 코드에서 dispatchEvent를 통해 프로그래밍적으로 생성된 경우
event.isTrusted 를 사용하는 예제 코드 확인하기 🍎
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>isTrusted Example</title>
</head>
<body>
<button id="secure-button">클릭하세요</button>
<script>
const button = document.getElementById('secure-button');
// 클릭 이벤트 핸들러
button.addEventListener('click', (event) => {
if (event.isTrusted) {
alert('사용자가 버튼을 클릭했습니다!');
} else {
alert('스크립트에 의해 클릭 이벤트가 발생했습니다. 무시합니다.');
}
});
// 악의적인 이벤트 시뮬레이션
setTimeout(() => {
const fakeEvent = new Event('click', { bubbles: true, cancelable: true });
button.dispatchEvent(fakeEvent); // 스크립트로 이벤트를 발생시킴
}, 1000);
</script>
</body>
</html>
위 코드상에서 1초 뒤 실행되는 dispatchEvent같은 스크립트로 생성한 악의적인 이벤트의 경우, isTrusted는 false가 되어 탐지가 된다.
반면, 사용자가 웹 페이지에서 직접 클릭한 경우는 true가 되어 정상 작동됨을 확인할 수 있다 👍
❗ 중요 로직과 연관된 이벤트에는 까먹지 말고 사용하자 !!!
event.isTrusted는 보안과 이벤트 무결성을 유지하기 위한 중요한 속성이다.
예를 들어, 버튼 클릭 이벤트를 통해 중요한 작업(예: 결제 처리, 데이터 삭제 등)을 실행할 때, 스크립트가 악의적으로 이벤트를 생성해 작업을 수행하지 못하도록 보호할 수 있다.
그러니까 까먹지 말고 event.isTrusted로 꼼꼼히 확인하자.
참고자료 🙌
https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted
Event: isTrusted property - Web APIs | MDN
The isTrusted read-only property of the Event interface is a boolean value that is true when the event was generated by the user agent (including via user actions and programmatic methods such as HTMLElement.focus()), and false when the event was dispatche
developer.mozilla.org