フォームの送信ボタンを無効にする - InnerHTML（セキュリティリスク）とCSSスタイル（再入力）

Question

ボタンを作成しましたが、そのボタンがクリックされた後に投稿が許可されるのはhereです。

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

それはちょうど、さらにクリックを防ぐべき、無効にボタンを設定するには、あなたはどちらかあなたのCSSで約混乱する必要はありませんより良いおそらくです。コメントに記載されているように、現在のコードはボタンに適用されている既存のスタイルを消去します。

しかし、ブラウザの更新など、重複した送信が発生する可能性があるため、送信済みデータの二重処理を防止するためのサーバー側のメカニズムも実装しています。

innerHTMLの使用に関連するセキュリティリスクについては、私はこのケースでは何も認識していません...どのようなリスクについて懸念していますか？

ところで、あなたのonclickに 'this'への参照を渡すと、getElementByIdを使用せずにクリックされたボタンを簡単に参照することができます。数2の場合

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>