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

我只想知道从postData() 函数中删除if(!enabled) return; 行是否完全安全。是否有其他工具可以真正启用禁用的反应按钮或直接调用postData()？

Answer 1

disabled 按钮在 React 中和在 HTML 中一样安全。最终浏览器理解和获得的是 DOM 元素，在浏览器上渲染的 React 也不例外。也就是说，永远不要单独依赖前端来确保任何安全性，还要进行服务器端验证和安全检查。