React中禁用按钮的安全性如何？

Question

我刚刚发现，在开发者工具中编辑一个按钮，启用一个禁用的按钮，不会有任何改变。该按钮在某种程度上仍然在内部被禁用。(虽然禁用的样式效果被移除)

//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

有趣的是，试图禁用一个已启用的按钮也没有任何改变。当按钮被点击时，onClick方法仍然会被调用。

在我发现之前，我总是使用一个标志来阻止点击，以防恶意用户启用按钮。

....
const [enabled, setEnabled] = useState(false)
....

....
const postData = () = {
   if(!enabled) return;

   //sensitive action takes place here
}
....

....
return(
    <button disabled={!enabled} onClick={postData}>Post</button>
);
....

我只是想知道，如果删除这个按钮是否完全安全。if(!enabled) return; 衲 postData() 函数。是否有其他工具可以真正实现禁用反应按钮或调用 postData() 直接使用？

Answer 1

disabled 按钮在React中就像在HTML中一样安全。浏览器最终理解和获取的是DOM元素，React在浏览器上的渲染也不例外。也就是说千万不要仅仅依靠前端来保证任何安全，也要有服务器端的验证和安全检查。