I just discovered that editing a button in developer tools to enable a disabled button changes nothing. The button somehow remains disabled internally. (Though the disabled style effects are removed)
//This is how the button looks like in Chrome developer tools
<button disabled>Post</button>
//editing out "disabled" does nothing. The click event doesn't get called
Interestingly, trying to disable an enabled button changes nothing as well. The onClick method still gets called when it's clicked.
Before my discovery, I always used a flag to block a click incase a malicious user enabled the button.
....
const [enabled, setEnabled] = useState(false)
....
....
const postData = () = {
if(!enabled) return;
//sensitive action takes place here
}
....
....
return(
<button disabled={!enabled} onClick={postData}>Post</button>
);
....
I just want to know if it is completely safe to remove the if(!enabled) return; line from the postData() function. Are there other tools that could really enable a disabled react button or call postData() directly?
disabled button are as safe in React as they used to be in HTML. Ultimately what Browser understand and gets is DOM elements and React rendered on a Browser is no exception to this. That said never rely on front-end alone for any security and have server-side validations and security checks as well.