Redirection prevents repeated forms submission

1. Repetitive form submission:

(1) After submitting the form, refresh the web page.

(2) After clicking submit for the first time, if the submission is not successful, click the submit button again.

(3) After the user submits the form, click the browser's [Back] button to return to the form page and submit it again.

2. Examples

(1) For the first case (after submitting the form, refresh the web page)

At the beginning, we used forwarding to jump to the page:

After visiting the main page by visiting /user/login, there is a problem of repeated submission of the form when refreshing the page, that is, every time the page is refreshed, it will go through again /user/login-->dashboard. The login page often has a database query operation. Such repeated submission of the form will cause the background pressure. The access path at this time is ( http://localhost:8080/user/login)

To solve the repeated submission of the form, we can use redirection to solve:

And our homepage here needs to be parsed by a template engine, so it cannot be redirected directly to the main page. For this we need to add a view mapping.

After using redirection, no matter how you refresh, the background page will no longer take /user/login-->dashboardthis path (the access path at this time is http://localhost:8080/main.html):

(2) For the second case (network delay)

After clicking the submit button, make the button unavailable and complete through js.

<script type="text/javascript">
 window.onload = function(){
     
      
  var btn = document.getElementById("btn");
  //为按钮绑定单击响应函数
  btn.onclick = function(){
     
       
   //点击以后使按钮不可用
   this.disabled=true; 
   //当将提交按钮设置为不可用时，会自动取消它的默认行为
   //手动提交表单
   this.parentNode.submit(); 
  };
 };
</script>
<form action="${pageContext.request.contextPath }/login" >
	user:<input type="text" name="username">
	password<input type="password" name="pwd">
	<input type="submit" value="提交" id="btn">
</form>

(3) The back button repeatedly submits the form

After the form is submitted successfully, directly clicking the back button on the browser will also cause repeated submission of the form. This is mainly because: when the server processes the request, it does not check whether it is a repeated request, which may lead to attacks by malicious users.

Java uses Token to prevent repeated forms submission:

• Generate a unique Token (token) on the server side, and save the Token in the Session field of the current user.
• Before processing the request, send the Token to the client's Form form, use a hidden field in the Form to store the Token, and submit the Token to the server when the form is submitted.
• On the server side, it is judged whether the Token submitted by the client is consistent with the Token generated by the server. If they are inconsistent, it means that it is not the same request, that is, it is a repeated submission. At this time, the server does not need to process the repeated submission of the form. If they are the same, the form submission is processed, and the identification number stored in the session field of the current user is cleared after processing.

3. Problems caused by repeated submissions

• Inserting a large amount of duplicate data into the database also brings pressure to the database query and takes up server resources.
• If the backend does not check whether it is a duplicate request, it may cause a malicious attack.