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 then why you 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.

Contents

• 1 Prerequisites
• 2 Encrypt Form Data in JavaScript
• 3 Create a Form in PHP
• 4 Encrypt Form Data at Client Side
• 5 Check Result of Encrypted Form Data
• 6 Decrypt Form Data at the Server Side
• 7 Result of Decrypting Encrypted Form Data
• 8 Conclusion
• 8.1 Share this:
• 8.2 Like this:
• 8.3 Related

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 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 (forwindows 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

#ajax #jquery #php