While submitting the form data from the client-side to the server-side the data is visible in the network tab. For the development end, there is nothing to worry about it. But when you are in production mode, you always think about the security things. Obviously, it is thinkable because data is a big asset nowadays. If you are worried about the visibility of raw data in the network tab, why don’t encrypt form data? It is a good idea to encrypt form data before submitting it to the server. You can encrypt form data in JavaScript at the client side. So, before sending it to the server just encrypt it. Then at the server-end just decrypt the form data. The encryption and decryption are fully based on the hashing algorithm. There are lots of hashing methods available in PHP like open_ssl_encrypt, base64_encode, md5, bcrypt, etc.
In this post, I will show you the encryption of the form data using JavaScript. Also, that I will get that data at the PHP end, and then I will decrypt it.
Prerequisites
Before moving to this post, you should aware of PHP basic and jQuery with Ajax. So, let’s implement it quickly.
Encrypt Form Data in JavaScript
For encrypting and decrypting the form data, I will be using the crypto js package. This is an open-source package and is available on Github. You can download the Crypto js package. This package will be used to encrypt and decrypt form data at the client-side as well as server-side.
After downloading it just extract the folder. You will be having two files named Encryption.js and Encryption.php. The javascript file will be used when you want to send the form data to the server. So, it will encrypt form data before submitting it to the server.
The PHP file will be used at the server end to decrypt the form data.
Create a separate folder inside the xampp/htdocs directory (for windows users). If you are a Linux user then create the folder inside the var/www/html. Here, I have created a directory in my Linux system named encrypt.
Now, inside the directory, let’s paste the downloaded two files –
- Encryption.js
- Encryption.php
Now, we will create two more files here for handling the form. Hence, create two more PHP files inside the same directory.
- form.php and
- result.php
After creating the files the directory will look like this.
CRUD Application in PHP 8 Using Prepared Statement
Create a Form in PHP
We will create a basic form and then we will encrypt that form data for every input. Then we will submit that form using Ajax request. You may submit directly the form to the action. For creating a basic form, I am using bootstrap here.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Encrypt form data in PHP </title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container py-4">
<div class="row">
<div class="col-xl-6 col-lg-8 m-auto">
<form method="POST" id="regForm">
<div class="card shadow">
<div class="card-header">
<h5 class="card-title font-weight-bold"> Encrypt Form Data </h5>
</div>
<div class="card-body">
<div class="form-group">
<input type="text" id="name" name="name" class="form-control" placeholder="Your name" required/>
</div>
<div class="form-group">
<input type="email" id="email" name="email" class="form-control" placeholder="Your Email" required/>
</div>
<div class="form-group">
<input type="password" id="password" name="password" class="form-control" placeholder="Your Password" required/>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-success">Save </button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>After running the above snippet, my form is looking like this.
What is SQL Injection and How to Prevent it in PHP
Encrypt Form Data at Client Side
For encrypting the data at the client-side, you will need to include the Encryption.js and crypto-js file at the bottom. You can use the CDN for crypto-js and jQuery. So, you will have to place the jQuery before the other JS file as showing below.
After then create an object of the Encryption() class and call the encrypt() method. This method will take the raw data or string that is going to encrypt. The second parameter will be a nonce_value.
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Crypto js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<!-- Encryption js -->
<script src="Encryption.js"></script>
let encryption = new Encryption();
var nameEncrypted = encryption.encrypt(name, nonceValue);Now, let’s implement it to our form quickly.
<?php
$nonceValue = 'nonce_value';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Encrypt form data in PHP </title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container py-4">
<div class="row">
<div class="col-xl-6 col-lg-8 m-auto">
<form method="POST" id="regForm">
<div class="card shadow">
<div class="card-header">
<h5 class="card-title font-weight-bold"> Encrypt Form Data </h5>
</div>
<div class="card-body">
<div class="form-group">
<input type="text" id="name" name="name" class="form-control" placeholder="Your name" required/>
</div>
<div class="form-group">
<input type="email" id="email" name="email" class="form-control" placeholder="Your Email" required/>
</div>
<div class="form-group">
<input type="password" id="password" name="password" class="form-control" placeholder="Your Password" required/>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-success">Save </button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Crypto js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<!-- Encryption js -->
<script src="Encryption.js"></script>
<script>
$(document).ready(function() {
// Submit form
$("#regForm").submit(function (event) {
event.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var nonceValue = '<?php echo $nonceValue; ?>';
// Encrypt form data
let encryption = new Encryption();
var nameEncrypted = encryption.encrypt(name, nonceValue);
var emailEncrypted = encryption.encrypt(email, nonceValue);
var passwordEncrypted = encryption.encrypt(password, nonceValue);
// Submit form using Ajax
$.ajax({
url: 'result.php',
method: 'POST',
data: {
name: nameEncrypted,
email: emailEncrypted,
password: passwordEncrypted
},
success:function(res) {
console.log(res);
}
});
});
});
</script>
</body>
</html>I have applied encryption at the client-side for the form data. Also, I have submitted this form using Ajax request to the result.php file. We already created this file too.
Now, let’s check the result for form data encryption.
Check Email Available in PHP MySQL Using jQuery and Ajax
Check Result of Encrypted Form Data
Come back to the browser window and refresh the page. Now, fill the form and open the developer console by doing inspect element. Go to the Network tab and submit the form.
After submitting the form check the Ajax request sent to the result.php file. Stay on the Headers tab and check the Form Data.
In the result, you can see the form data is encrypted. I have passed the name, email, and password in the form data. So, on the client-side, the form data is encrypted properly.
Now, it’s time to get and decrypt this form data at the other end.
How to Implement jQuery Datatable in PHP with MySQL
Decrypt Form Data at the Server Side
For decrypting the encrypted form data at the other end, we will use the same approach. We will extract the submitted data coming through the request. Then we will extract it one by one. If you have more number of inputs data then you may use iteration over there. But, I am creating it by extracting and decrypting one by one. Because, currently, we have only three fields. So, let’s checkout.
<?php
require 'Encryption.php';
$nonceValue = 'nonce_value';
// get encrypted form data
$name = $_REQUEST['name'];
$email = $_REQUEST['email'];
$password = $_REQUEST['password'];
// create object of encryption method
$Encryption = new Encryption();
// decrypt encrypted data
$nameDecrypted = $Encryption->decrypt($name, $nonceValue);
$emailDecrypted = $Encryption->decrypt($email, $nonceValue);
$passwordDecrypted = $Encryption->decrypt($password, $nonceValue);
// display result before decrypting
echo 'encrypted name : <strong>' . $name . '</strong><br><br>';
echo 'encrypted email : <strong>' . $email . '</strong><br><br>';
echo 'encrypted password : <strong>' . $password . '</strong><br><br><br>';
// display result after decrypting
echo 'decrypted name : <strong>' . $nameDecrypted . '</strong><br><br>';
echo 'decrypted email : <strong>' . $emailDecrypted . '</strong><br><br>';
echo 'decrypted password : <strong>' . $passwordDecrypted . '</strong><br><br>';
?>Now, let’s check the result. Go back to the browser and refresh the page.
PHP Import CSV File Data into MySQL Database with Preview
Result of Decrypting Encrypted Form Data
Fill the form again and submit it. Do, the same process, open the network tab, and check the API request. This time you have to check the Preview and Response of the result.
Now, you may see after submitting the form data it was encrypted. Then after the decryption, the form data is again reverted back to the same string that I submitted in the form.
So, that’s it for the form data encryption and decryption. I am wrapping up this post here.
Drag and Drop Multiple File Upload in PHP Using Dropzone js
Conclusion
Finally, we have seen the process of encrypting and decrypting the form data at the client-side and as well as server-side. Using this way, you can achieve your result for submitting the form data in the encrypted format. Also, you can decrypt it before storing it in the database. I hope this post will be very helpful for you all who want to encrypt the data.
You have illustrated example of encrypt-decrypt very well. However, I couldn’t find these two files:-
1-Encryption.js
2-Encryption.php
Could you please help me to locate these which are vital required files to run the demo
I think you haven’t seen the post properly. I already shared the download link for these two files.
https://programmingfields.com/encrypt-form-data-in-javascript-using-crypto-js-before-submit/#Encrypt_Form_Data_in_JavaScript
No, I gave download and search for two files but not there it’s nodejs related code where is the PHP file?
The download link is updated now. Please re-check.
You may find both files here.
Crypto JS
sir it might be a good thing if u just share your
encrypt.js
encrypt.php
files
in github theres no such file with those names
I have uploaded the file. You may download it now here. Download Encrypt JS
My decrypt function returns null. Please help me.
Firstly, please make sure, your encryption is working on the client side. If yes, in the next step, check on the server side whether you included Encryption.js and invoked it.
($this->encryptMethodLength() / 4));
encryption.php file error