In this article I will explain with an example, how to encrypt on Client-Side and decrypt on Server-Side in ASP.Net Core.
This article makes use of CryptoJS AES library to perform encryption using JavaScript.
Note: For beginners in ASP.Net Core 7, please refer my article ASP.Net Core 7: Hello World Tutorial with Sample Program example.
 
 

CryptoJS AES JavaScript library

CryptoJS AES JavaScript library is a JavaScript based encryption library used to perform encryption on Client Side. For complete documentation, please refer the following link.
https://cryptojs.gitbook.io/docs
 
 

Namespaces

You will need to import the following namespaces.
C#
using System.Text;
using System.Security.Cryptography;
 
VB.Net
Imports System.Text
Imports System.Security.Cryptography
 
 

Controller

The Controller consists of following Action methods.

Action method for handling GET operation

Inside this Action method, simply the View is returned.
 

Action method for handling POST operation

Inside this Action method, the encrypted text is decrypted using Decrypt method and set into a ViewBag object.
Note: For details on Decryption method, please refer my article ASP.Net Core: AES Encryption Decryption (Cryptography) Tutorial with example.
 
public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public IActionResult Index(string encrypted)
    {
        ViewBag.DecryptedValue = this.Decrypt(encrypted);
        return View();
    }
 
    private string Decrypt(string encryptedText)
    {
        //Secret Key.
        string secretKey = "$ASPcAwSNIgcPPEoTSa0ODw#";
 
        //Secret Bytes.
        byte[] secretBytes = Encoding.UTF8.GetBytes(secretKey);
 
        //Encrypted Bytes.
        byte[] encryptedBytes = Convert.FromBase64String(encryptedText);
 
        //Decrypt with AES Alogorithm using Secret Key.
        using (Aes aes = Aes.Create())
        {
            aes.Key = secretBytes;
            aes.Mode = CipherMode.ECB;
            aes.Padding = PaddingMode.PKCS7;
 
            byte[] decryptedBytes = null;
            using (ICryptoTransform decryptor = aes.CreateDecryptor())
            {
                decryptedBytes = decryptor.TransformFinalBlock(encryptedBytes, 0, encryptedBytes.Length);
            }
 
            return Encoding.UTF8.GetString(decryptedBytes);
        }
    }
}
 
 

View

HTML Markup

The View consists of HTML Form which has been created using the ASP.Net TagHelpers with the following attributes.
asp-action – Name of the Action. In this case the name is Index.
asp-controller – Name of the Controller. In this case the name is Home.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The Form consists of a TextBox, a Submit Button and an HTML SPAN element.
 

Encryption

Below the HTML Form, the following JS file is inherited.
1.crypto-js.min.js
Note: For Encryption and Decryption, AES encryption algorithm will be used, where a Symmetric (Same) key will be used for encryption and decryption process.
 
Then, the secret key is defined for the encryption and decryption and converted into a BYTE array using parse method of the CryptoJS JavaScript library.
When the Submit button is clicked the Encrypt JavaScript is executed and the plain text is captured from the TextBox and passed as parameter to encrypt method of CryptoJS JavaScript library where the following properties are set.
Mode – It defines the mode of the operation. Here it is CryptoJS.mode.ECB (Electronic Codebook).
Padding – It specifies padding mode.
Finally, the encrypted text is set in the TextBox and its value is sent to the Controller's Action method.
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <form method="post" asp-controller="Home" asp-action="Index">
        <input id="txtPlain" type="text" name="encrypted" />
        <input type="submit" value="Submit" onclick="Encrypt()" />
        <hr />
        <span>@ViewBag.DecryptedValue</span>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js" integrity="sha512-a+SUDuwNzXDvz4XrIcXHuCf089/iJAoN4lmrXJg18XnduKK6YlDHNRalv4yd1N40OKI80tFidF+rqTFKGPoWFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text/javascript">
        //Secret Key.
        var secretKey = "$ASPcAwSNIgcPPEoTSa0ODw#";
 
        //Secret Bytes.
        var secretBytes = CryptoJS.enc.Utf8.parse(secretKey);
 
        function Encrypt() {
            //Read the Plain text.
            var txtPlain = document.getElementById("txtPlain");
 
            //Encrypt with AES Alogorithm using Secret Key.
            var encrypted = CryptoJS.AES.encrypt(txtPlain.value, secretBytes, {
                mode: CryptoJS.mode.ECB,
                padding: CryptoJS.pad.Pkcs7
            });
 
            //Set the encrypted Text in TextBox.
            txtPlain.value = encrypted;
        }
    </script>
</body>
</html>
 
 

Screenshot

ASP.Net Core: Encrypt Client-Side and Decrypt Server-Side
 
 

Demo

View Demo
 
 

Downloads

Download Code