禁用表单提交按钮- InnerHTML(安全风险)和CSS样式(重新输入)

Question

我已经创建了一个按钮，希望只允许提交一旦它被点击(这里的代码)。

1. 使用InnerHTML存在安全风险吗?(我在电视上观看避免InnerHTML的在线课程)

2. 当我禁用指针/光标时，它似乎重置了按钮CSS，我必须再次为Javascript中的按钮重新输入inline CSS。为什么会这样?

   结果

    function change_button() {
   document.getElementById('get-results').innerHTML = 'Processing....';
   document.getElementById('get-results').style.cssText = 'pointer-events:none !important;cursor:not-allowed !important; height: 44px; color:#fff; font-size:18px; padding: 9px 20px; background-color: #000; display:inline-block; padding-right: 20px;'
   }
   

Answer 1

最好将按钮设置为disabled，这样可以防止进一步的单击，并且您也不需要乱搞CSS。正如注释所提到的，当前的代码会删除应用于按钮的现有样式。

然而，我仍然会实现一个服务器端机制来防止对提交的数据进行双重处理，因为可能会有其他方式发生重复提交，比如浏览器刷新。

至于使用innerHTML相关的安全风险，我不知道在这种情况下有任何…你能详细说明你们担心哪些风险吗?

顺便说一下，在你的onclick中传递对'this'的引用给你一个简单的方法来引用被点击的按钮，而不必使用getElementById。

function change_button(btn) {
  btn.disabled = true;
  btn.innerHTML = "Processing...";
}

<button type="button" onclick="change_button(this);" style="cursor: pointer; height: 44px; color:#fff; font-size:18px; padding: 9px 20px; background-color: #000; display:inline-block; padding-right: 20px;" id="get-results">Results</button>