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 也不例外。也就是说，永远不要单独依赖前端来确保任何安全性，并且还要进行服务器端验证和安全检查。

React 中禁用的按钮有多安全？

How safe are disabled buttons in React?

html

events

button

disabled-input

reactjs