Encrypt And Decrypt Form Data Using PHP Ajax

how to submit encrypted
form data using ajax and decrypt data to the server side using php.

Before start to the tutorial we need some extra file

  • encryption.js
  • encryption.php
  • CryptoJS.js

link to get this file is here Click Here

Once you get this file just follow the bellow code

Index.php

  <?php
    // Start the session
    session_start();
    date_default_timezone_set("Asia/Kolkata");

    $characters = '0123456789abcdefghijklmnopqrstuvwxyz';
    $charactersLength = strlen($characters);
    $randomString = '';
    for ($i = 0; $i < 32; $i++)
    {
      $randomString .= $characters[rand(0, $charactersLength - 1)];
    }
  	//Genrate Random Key
  ?>
<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="description" content="">
      <meta name="author" content="">

      <title>IT INFO-TECH</title>
      <!-- Bootstrap Core CSS -->
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
      <link href="css/style.css" rel="stylesheet">
  </head>

  <body>
  	<form class="form-material" method="post" id="login_form" >
  		<input type="hidden" name="enckey" id="enckey" value="<?php echo $randomString; ?>">
        <div class="login">
          <input type="text" placeholder="Username" id="username" name="username">
          <input type="password" placeholder="password" id="password"  name="password">
          <a href="#" class="forgot">forgot password?</a>
          <input type="submit" value="Sign In">
        <!-- </div> -->
        <div class="shadow"></div>
  	</form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

<script src="js/CryptoJS.js"></script>
  	<script src="js/encryption.js"></script>
  	<script type="text/javascript">
      $(document).ready(function()
      {
    		$("#login_form").submit(function(e) {
    e.preventDefault();
          let encryption = new Encryption();
          var nonceValue=	$('#enckey').val();
          var form_data = $('#login_form').serializeArray().reduce(function(obj, item) {
                if(item.name!="enckey")
                {
                    obj[item.name] = encryption.encrypt(item.value,nonceValue);
                }
                else
                {
                  obj[item.name] =item.value;
                }
                return obj;
            }, {});
          $.ajax({
             type: "POST",
             url: 'post.php',
             data: form_data, // serializes the form's elements.
             success: function(data)
             {
                 alert(data); // show response from the php script.
             }
           });
        });

      });
    </script>
  </body>

</html>

post.php

<?php
require 'encryption.php'; 
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
	// print_r($_POST);exit
	$nonceValue=$_POST['enckey'];
	$Encryption = new Encryption();
	$username = $Encryption->decrypt($_POST['username'], $nonceValue);
	// echo 'decrypted: ' . $mobileNumber . '<br>';
	echo 'decrypted: ' .$username. '<br>';

}
?>

Ok That’s it once you done just test it you can see the encrypted data in browser developer tools (ctrl+shift+i). Output looks like

Any Queries Comment Bellow!

2 Comments

Add a Comment

Your email address will not be published. Required fields are marked *