{"id":6772,"date":"2021-07-15T04:24:11","date_gmt":"2021-07-15T04:24:11","guid":{"rendered":"https:\/\/programmingfields.com\/?p=6772"},"modified":"2026-05-02T06:29:32","modified_gmt":"2026-05-02T06:29:32","slug":"encrypt-form-data-in-javascript-using-crypto-js-before-submit","status":"publish","type":"post","link":"https:\/\/programmingfields.com\/encrypt-form-data-in-javascript-using-crypto-js-before-submit\/","title":{"rendered":"Encrypt Form Data in JavaScript Before Sending to Server"},"content":{"rendered":"\n<p>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&#8217;t <strong>encrypt form data<\/strong>? 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 <strong>open_ssl_encrypt<\/strong>, <strong>base64_encode<\/strong>, <strong>md5<\/strong>, <strong>bcrypt<\/strong>, etc.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/programmingfields.com\/encrypt-form-data-in-javascript-using-crypto-js-before-submit\/#Prerequisites\" >Prerequisites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/programmingfields.com\/encrypt-form-data-in-javascript-using-crypto-js-before-submit\/#Encrypt_Form_Data_in_JavaScript\" >Encrypt Form Data in JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/programmingfields.com\/encrypt-form-data-in-javascript-using-crypto-js-before-submit\/#Create_a_Form_in_PHP\" >Create a Form in PHP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/programmingfields.com\/encrypt-form-data-in-javascript-using-crypto-js-before-submit\/#Encrypt_Form_Data_at_Client_Side\" >Encrypt Form Data at Client Side<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/programmingfields.com\/encrypt-form-data-in-javascript-using-crypto-js-before-submit\/#Check_Result_of_Encrypted_Form_Data\" >Check Result of Encrypted Form Data<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/programmingfields.com\/encrypt-form-data-in-javascript-using-crypto-js-before-submit\/#Decrypt_Form_Data_at_the_Server_Side\" >Decrypt Form Data at the Server Side<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/programmingfields.com\/encrypt-form-data-in-javascript-using-crypto-js-before-submit\/#Result_of_Decrypting_Encrypted_Form_Data\" >Result of Decrypting Encrypted Form Data<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/programmingfields.com\/encrypt-form-data-in-javascript-using-crypto-js-before-submit\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span><strong>Prerequisites<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before moving to this post, you should aware of PHP basic and jQuery with Ajax. So, let&#8217;s implement it quickly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Encrypt_Form_Data_in_JavaScript\"><\/span><strong>Encrypt Form Data in JavaScript<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>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 <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/brainfoolong\/cryptojs-aes-php\" target=\"_blank\">Crypto js package<\/a>. This package will be used to encrypt and decrypt form data at the client-side as well as server-side.<\/p>\n\n\n\n<p>After downloading it just extract the folder. You will be having two files named <strong>Encryption.js <\/strong>and <strong>Encryption.php<\/strong>. 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. <\/p>\n\n\n\n<p>The PHP file will be used at the server end to decrypt the form data.<\/p>\n\n\n\n<p>Create a separate folder inside the<strong> xampp\/htdocs <\/strong>directory (for<strong> <\/strong>windows users). If you are a Linux user then create the folder inside the <strong>var\/www\/html<\/strong>. Here, I have created a directory in my Linux system named <strong>encrypt<\/strong>.<\/p>\n\n\n\n<p>Now, inside the directory, let&#8217;s paste the downloaded two files &#8211;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Encryption.js<\/strong><\/li>\n\n\n\n<li><strong>Encryption.php<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Now, we will create two more files here for handling the form. Hence, create two more PHP files inside the same directory.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>form.php and<\/strong><\/li>\n\n\n\n<li><strong>result.php<\/strong><\/li>\n<\/ul>\n\n\n\n<p>After creating the files the directory will look like this.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"356\" height=\"250\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-08-30-23.png?resize=356%2C250&#038;ssl=1\" alt=\"Directory Structure of Project\" class=\"wp-image-6779\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-08-30-23.png?w=356&amp;ssl=1 356w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-08-30-23.png?resize=300%2C211&amp;ssl=1 300w\" sizes=\"auto, (max-width: 356px) 100vw, 356px\" \/><figcaption class=\"wp-element-caption\"><strong>Directory Structure of Project<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/crud-application-in-php-8-using-prepared-statement\/\" target=\"_blank\" rel=\"noreferrer noopener\">CRUD Application in PHP 8 Using Prepared Statement<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_Form_in_PHP\"><\/span><strong>Create a Form in PHP<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<pre title=\"form.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;meta charset=\"utf-8\"&gt;\n        &lt;title&gt; Encrypt form data in PHP &lt;\/title&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"&gt;\n        &lt;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\"&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;div class=\"container py-4\"&gt;\n            &lt;div class=\"row\"&gt;\n                &lt;div class=\"col-xl-6 col-lg-8 m-auto\"&gt;\n                    &lt;form method=\"POST\" id=\"regForm\"&gt;\n                        &lt;div class=\"card shadow\"&gt;\n                            &lt;div class=\"card-header\"&gt;\n                                &lt;h5 class=\"card-title font-weight-bold\"&gt; Encrypt Form Data &lt;\/h5&gt;\n                            &lt;\/div&gt;\n                            &lt;div class=\"card-body\"&gt;\n                                &lt;div class=\"form-group\"&gt;\n                                    &lt;input type=\"text\" id=\"name\" name=\"name\" class=\"form-control\" placeholder=\"Your name\" required\/&gt;\n                                &lt;\/div&gt;\n\n                                &lt;div class=\"form-group\"&gt;\n                                    &lt;input type=\"email\" id=\"email\" name=\"email\" class=\"form-control\" placeholder=\"Your Email\" required\/&gt;\n                                &lt;\/div&gt;\n\n                                &lt;div class=\"form-group\"&gt;\n                                    &lt;input type=\"password\" id=\"password\" name=\"password\" class=\"form-control\" placeholder=\"Your Password\" required\/&gt;\n                                &lt;\/div&gt;\n                            &lt;\/div&gt;\n\n                            &lt;div class=\"card-footer\"&gt;\n                                &lt;button type=\"submit\" class=\"btn btn-success\"&gt;Save &lt;\/button&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                    &lt;\/form&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>After running the above snippet, my form is looking like this.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"459\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-08-40-24.png?resize=1024%2C459&#038;ssl=1\" alt=\"Basic Form For Encrypting Form Data\" class=\"wp-image-6782\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-08-40-24.png?resize=1024%2C459&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-08-40-24.png?resize=300%2C135&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-08-40-24.png?resize=768%2C345&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-08-40-24.png?w=1130&amp;ssl=1 1130w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\"><strong>Basic Form For Encrypting Form Data<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/what-is-sql-injection-and-how-to-prevent-it-in-php\/\" target=\"_blank\" rel=\"noreferrer noopener\">What is SQL Injection and How to Prevent it in PHP<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Encrypt_Form_Data_at_Client_Side\"><\/span><strong>Encrypt Form Data at Client Side<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For encrypting the data at the client-side, you will need to include the <strong>Encryption.js<\/strong> and <strong>crypto-js<\/strong> file at the bottom. You can use the <strong>CDN<\/strong> for crypto-js and jQuery. So, you will have to place the jQuery before the other JS file as showing below. <\/p>\n\n\n\n<p>After then create an object of the <strong>Encryption()<\/strong> class and call the <strong>encrypt()<\/strong> method. This method will take the raw data or string that is going to encrypt. The second parameter will be a <strong>nonce_value<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;!-- jQuery --&gt;\n&lt;script src=\"https:\/\/code.jquery.com\/jquery-3.3.1.min.js\"&gt;&lt;\/script&gt;\n\n&lt;!-- Crypto js --&gt;\n&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/crypto-js\/4.0.0\/crypto-js.min.js\"&gt;&lt;\/script&gt;\n\n&lt;!-- Encryption js --&gt;\n&lt;script src=\"Encryption.js\"&gt;&lt;\/script&gt;\n\nlet encryption = new Encryption();\nvar nameEncrypted = encryption.encrypt(name, nonceValue);<\/code><\/pre>\n\n\n\n<p>Now, let&#8217;s implement it to our form quickly.<\/p>\n\n\n\n<pre title=\"form.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n    $nonceValue = 'nonce_value';\n?&gt;\n\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;meta charset=\"utf-8\"&gt;\n        &lt;title&gt; Encrypt form data in PHP &lt;\/title&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"&gt;\n        &lt;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\"&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;div class=\"container py-4\"&gt;\n            &lt;div class=\"row\"&gt;\n                &lt;div class=\"col-xl-6 col-lg-8 m-auto\"&gt;\n                    &lt;form method=\"POST\" id=\"regForm\"&gt;\n                        &lt;div class=\"card shadow\"&gt;\n                            &lt;div class=\"card-header\"&gt;\n                                &lt;h5 class=\"card-title font-weight-bold\"&gt; Encrypt Form Data &lt;\/h5&gt;\n                            &lt;\/div&gt;\n                            &lt;div class=\"card-body\"&gt;\n                                &lt;div class=\"form-group\"&gt;\n                                    &lt;input type=\"text\" id=\"name\" name=\"name\" class=\"form-control\" placeholder=\"Your name\" required\/&gt;\n                                &lt;\/div&gt;\n\n                                &lt;div class=\"form-group\"&gt;\n                                    &lt;input type=\"email\" id=\"email\" name=\"email\" class=\"form-control\" placeholder=\"Your Email\" required\/&gt;\n                                &lt;\/div&gt;\n\n                                &lt;div class=\"form-group\"&gt;\n                                    &lt;input type=\"password\" id=\"password\" name=\"password\" class=\"form-control\" placeholder=\"Your Password\" required\/&gt;\n                                &lt;\/div&gt;\n                            &lt;\/div&gt;\n\n                            &lt;div class=\"card-footer\"&gt;\n                                &lt;button type=\"submit\" class=\"btn btn-success\"&gt;Save &lt;\/button&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                    &lt;\/form&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n\n        &lt;!-- jQuery --&gt;\n        &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.3.1.min.js\"&gt;&lt;\/script&gt;\n\n        &lt;!-- Crypto js --&gt;\n        &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/crypto-js\/4.0.0\/crypto-js.min.js\"&gt;&lt;\/script&gt;\n        \n        &lt;!-- Encryption js --&gt;\n        &lt;script src=\"Encryption.js\"&gt;&lt;\/script&gt;\n\n        &lt;script&gt;\n            $(document).ready(function() {\n                \n                \/\/ Submit form\n                $(\"#regForm\").submit(function (event) {\n                    event.preventDefault();\n\n                    var name = $(\"#name\").val();\n                    var email = $(\"#email\").val();\n                    var password = $(\"#password\").val();\n\n                    var nonceValue = '&lt;?php echo $nonceValue; ?&gt;';\n                    \n                    \/\/ Encrypt form data\n                    let encryption = new Encryption();\n                    var nameEncrypted = encryption.encrypt(name, nonceValue);\n                    var emailEncrypted = encryption.encrypt(email, nonceValue);\n                    var passwordEncrypted = encryption.encrypt(password, nonceValue);\n\n                    \/\/ Submit form using Ajax\n                    $.ajax({\n                        url: 'result.php',\n                        method: 'POST',\n                        data: {\n                            name: nameEncrypted,\n                            email: emailEncrypted,\n                            password: passwordEncrypted\n                        },\n                        success:function(res) {\n                            console.log(res);\n                        }\n                    });\n\n                });\n            });\n        &lt;\/script&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>I have applied encryption at the client-side for the form data. Also, I have submitted this form using Ajax request to the <strong>result.php<\/strong> file. We already created this file too.<\/p>\n\n\n\n<p>Now, let&#8217;s check the result for form data encryption.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/check-if-email-available-in-php-using-ajax\/\" target=\"_blank\" rel=\"noreferrer noopener\">Check Email Available in PHP MySQL Using jQuery and Ajax<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Check_Result_of_Encrypted_Form_Data\"><\/span><strong>Check Result of Encrypted Form Data<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>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 <strong>Network<\/strong> tab and submit the form.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"984\" height=\"446\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-09-05-46.png?resize=984%2C446&#038;ssl=1\" alt=\"Submit Form Using Ajax for encrypting data\" class=\"wp-image-6785\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-09-05-46.png?w=984&amp;ssl=1 984w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-09-05-46.png?resize=300%2C136&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-09-05-46.png?resize=768%2C348&amp;ssl=1 768w\" sizes=\"auto, (max-width: 984px) 100vw, 984px\" \/><figcaption class=\"wp-element-caption\"><strong>Submit Form Using Ajax<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>After submitting the form check the Ajax request sent to the<strong> result.php<\/strong> file. Stay on the <strong>Headers<\/strong> tab and check the <strong>Form Data<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"565\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-09-07-53.png?resize=1024%2C565&#038;ssl=1\" alt=\"Form Data Encrypted at Client Side\" class=\"wp-image-6786\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-09-07-53.png?resize=1024%2C565&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-09-07-53.png?resize=300%2C166&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-09-07-53.png?resize=768%2C424&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-09-07-53.png?w=1267&amp;ssl=1 1267w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\"><strong>Form Data Encrypted at Client Side<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>In the result, you can see the form data is encrypted. I have passed the <strong>name<\/strong>, <strong>email<\/strong>, and <strong>password<\/strong> in the form data. So, on the client-side, the form data is encrypted properly.<\/p>\n\n\n\n<p>Now, it&#8217;s time to get and decrypt this form data at the other end.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/datatable-in-php-with-mysql-database\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Implement jQuery Datatable in PHP with MySQL<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Decrypt_Form_Data_at_the_Server_Side\"><\/span><strong>Decrypt Form Data at the Server Side<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>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&#8217;s checkout.<\/p>\n\n\n\n<pre title=\"result.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n    require 'Encryption.php';\n    $nonceValue = 'nonce_value';\n\n    \/\/ get encrypted form data\n    $name = $_REQUEST['name'];\n    $email = $_REQUEST['email'];\n    $password = $_REQUEST['password'];\n\n    \/\/ create object of encryption method\n    $Encryption = new Encryption();\n\n    \/\/ decrypt encrypted data\n    $nameDecrypted = $Encryption-&gt;decrypt($name, $nonceValue);\n    $emailDecrypted = $Encryption-&gt;decrypt($email, $nonceValue);\n    $passwordDecrypted = $Encryption-&gt;decrypt($password, $nonceValue);\n\n    \/\/ display result before decrypting\n    echo 'encrypted name : &lt;strong&gt;' . $name . '&lt;\/strong&gt;&lt;br&gt;&lt;br&gt;';\n    echo 'encrypted email : &lt;strong&gt;' . $email . '&lt;\/strong&gt;&lt;br&gt;&lt;br&gt;';\n    echo 'encrypted password : &lt;strong&gt;' . $password . '&lt;\/strong&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;';\n\n    \/\/ display result after decrypting\n    echo 'decrypted name : &lt;strong&gt;' . $nameDecrypted . '&lt;\/strong&gt;&lt;br&gt;&lt;br&gt;';\n    echo 'decrypted email : &lt;strong&gt;' . $emailDecrypted . '&lt;\/strong&gt;&lt;br&gt;&lt;br&gt;';\n    echo 'decrypted password : &lt;strong&gt;' . $passwordDecrypted . '&lt;\/strong&gt;&lt;br&gt;&lt;br&gt;';\n?&gt;<\/code><\/pre>\n\n\n\n<p>Now, let&#8217;s check the result. Go back to the browser and refresh the page.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/php-import-csv-file-with-preview\/\" target=\"_blank\" rel=\"noreferrer noopener\">PHP Import CSV File Data into MySQL Database with Preview<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Result_of_Decrypting_Encrypted_Form_Data\"><\/span><strong>Result of Decrypting Encrypted Form Data<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>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 <strong>Preview<\/strong> and <strong>Response<\/strong> of the result.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"481\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-09-23-23.png?resize=1024%2C481&#038;ssl=1\" alt=\"Result of Encrypted and Decrypted Form Data\" class=\"wp-image-6788\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-09-23-23.png?resize=1024%2C481&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-09-23-23.png?resize=300%2C141&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-09-23-23.png?resize=768%2C360&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-15-09-23-23.png?w=1289&amp;ssl=1 1289w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\"><strong>Result of Encrypted and Decrypted Form Data<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>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.<\/p>\n\n\n\n<p>So, that&#8217;s it for the <strong>form data<\/strong> encryption and decryption. I am wrapping up this post here.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/jquery-file-upload-in-php\/\" target=\"_blank\" rel=\"noreferrer noopener\">Drag and Drop Multiple File Upload in PHP Using Dropzone js<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":6789,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[12,13,4],"tags":[2168,2163,2166],"yst_prominent_words":[281],"class_list":{"0":"post-6772","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-ajax-tutorial","8":"category-jquery","9":"category-php","10":"tag-encrypt-and-decrypt-form-data","11":"tag-encrypt-form-data","12":"tag-submit-encrypted-form-data","13":"entry"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Encrypt-form-data-before-submit.png?fit=560%2C315&ssl=1","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/6772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/comments?post=6772"}],"version-history":[{"count":2,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/6772\/revisions"}],"predecessor-version":[{"id":8944,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/6772\/revisions\/8944"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media\/6789"}],"wp:attachment":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media?parent=6772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/categories?post=6772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/tags?post=6772"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/yst_prominent_words?post=6772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}