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

link to get this file is here Click Here

Once you get this file just follow the bellow code


    // Start the session

    $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">
      <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">

  	<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>
    <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">
    		$("#login_form").submit(function(e) {
          let encryption = new Encryption();
          var nonceValue=	$('#enckey').val();
          var form_data = $('#login_form').serializeArray().reduce(function(obj, item) {
                    obj[item.name] = encryption.encrypt(item.value,nonceValue);
                  obj[item.name] =item.value;
                return obj;
            }, {});
             type: "POST",
             url: 'post.php',
             data: form_data, // serializes the form's elements.
             success: function(data)
                 alert(data); // show response from the php script.




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


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

Any Queries Comment Bellow!


Add a Comment

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