In this lab, we will programmatically understand why this problem occurs and how to fix this.
Lets begin
The application is accessible from Kali Linux using the following URL. http://192.168.56.101/webapps/double_submit/1/double_submit.html/ This looks the image below when accessed from a web browser.
Let us enter 1234 as user input and click Place Order to complete the order. As you can see in the figure below, the order has been placed, and the entry has been added to the database. Note: Just to understand the problem better, we are displaying the time from the server.
Now, let us click the refresh button and see what happens.
As we can see in the above figure, the request is ready to be sent again. If we click Resend, the form data (order) will be resubmitted resulting in a duplicate order. We can check it by clicking Resend button.
If we compare the time in both the screenshots, they are different, and that confirms that the form has been resubmitted. The following is an image of the same problem.
Lets check our code to see what’s happening behind the scenes.
double_submit.html
As we can see in the excerpt above, the double_submit.html page sends user entered data to process.php as a post request. Now, let us see what process.php does with the data received.process.php
Submitted Successfully
Data written into the database:
process.php is taking the user entered data and it is saving it to a file named db.txt on the server and then it sends 200 OK response to the client. If this process.php page is refreshed, it resubmits the post data it was holding from the previous request.How to avoid this?
This is a well-known problem and the PRG (POST/REDIRECT/GET) Pattern is used to avoid this. It basically instructs our process.php page to issue a redirect another page instead of sending 200 OK response to the client.
Let us see how we can achieve this.
process.php
As you can see in the excerpt above, process.php is redirecting the user to success.php after inserting the data.
success.php
Submitted Successfully
Data written into the database:
success.php will read the contents from the back end and displays them over a GET request. Let us verify this using the updated code. The modified application can be accessed from the following URL. http://192.168.56.101/webapps/double_submit/2/double_submit.html/Enter the credit card number and click Place Order.
As you can see in the figure above, the order is placed. Now, even if we refresh the page, we will not see any duplicate insertion because we are on success.php and it only makes a GET request to fetch and display data from the backend storage.
Image Credits
https://upload.wikimedia.org/wikipedia/commons/f/f3/PostRedirectGet_DoubleSubmitProblem.png
