JS Bits with Bill
JS Bits with Bill

JS Bits with Bill

How to check trusted events

How to check trusted events

JS Bits with Bill's photo
JS Bits with Bill

Published on Jun 15, 2021

1 min read

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');
});

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();

or

btn.dispatchEvent(new MouseEvent('click'));

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!

 
Share this