How to check trusted events

js_bits_bill

JS Bits Bill

Posted on June 15, 2021

How to check trusted events

How would one check if an event was triggered by an actual user action and not from a script or dispatched event? Well, there's an isTrusted property on Event objects:

btn.addEventListener('click', event => {
  if (!event.isTrusted) {
    return console.log('Not trusted!');
  }

  console.log('Proceed');
});
Enter fullscreen mode Exit fullscreen mode

Here we are checking if event.isTrusted is false and if so, return out. isTrusted will only be true when the click event is done via a real mouse click and not with a proxy click via:

btn.click();
Enter fullscreen mode Exit fullscreen mode

or

btn.dispatchEvent(new MouseEvent('click'));
Enter fullscreen mode Exit fullscreen mode

If you want to make sure certain interactions can only be accomplished by user behavior and not via scripts (i.e. browser extensions) Event.isTrusted can help add an extra layer of security! 🔒

Here's a video on using the isTrusted property:


isTrusted TikTok


Check out more #JSBits at my blog, jsbits-yo.com. Or follow me on Twitter and TikTok!

💖 💪 🙅 🚩
js_bits_bill
JS Bits Bill

Posted on June 15, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related