Encrypt - Encrypt Payload Using Angular 11 And ASP.NET Core

Step 4: Configure interceptor in app.module.ts file

First, import the inceptor that we created (encrypt-decrypt-interceptor.ts) and configure Interceptor into provider.

See the below sample app.module.ts:

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser';
import { EncryptDecryptAuthInterceptor } from './encrypt-decrypt-interceptor';
@NgModule({
    imports: [],
    declarations: [
        AppComponent,
    ],
    providers: [{
            provide: 'BASE_URL',
            useFactory: getBaseUrl
        }, {
            provide: ErrorHandler,
            useClass: AppErrorHandler
        }, {
            provide: HTTP_INTERCEPTORS,
            useClass: EncryptDecryptAuthInterceptor,
            multi: true
        },
        CommonService,
    ],
    bootstrap: [AppComponent],
    entryComponents: [],
    exports: [],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
export function getBaseUrl() {
    return document.getElementsByTagName('base')[0].href;
}

Add Interceptor into providers as shown in the above code.

Now, the front-end Angular side code is done using all the above steps to encrypt the payload and parameter so that no one can see the original payload or parameter.

See the above image to understand encryption. It shows a fully encrypted payload/parameter, so no one can see the original payload/parameter value.

ASP.NET Core Code

In Asp.Net core, we must use the same algorithm to decrypt the payload before passing to Action method.

So for that, I have created one middleware helper to decrypt the payload before calling the Controller Action method. The main benefit to this is that we have not written much code for everything. Just use middleware and call the middleware from the Startup.cs file to call middleware on every request of ASP.NET CORE.

We can set exclude list same as in Angular in ASP.Net Core.

First, we need to create a middleware helper to encrypt-decrypt the payload and parameter, which is passing from angular.

Create a middleware helper name EncryptionMiddleware.cs and copy and paste the below code.

using FC_API.Data.Access;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Options;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Security.Cryptography;
using System.Text;
using System.Threading.Tasks;
namespace Rajesh_API.Helpers {
    public class EncryptionMiddleware {
        private readonly RequestDelegate _next;
        private readonly AppSettings _appSettings;
        public EncryptionMiddleware(RequestDelegate next, IOptions < AppSettings > appSettings) {
            _next = next;
            _appSettings = appSettings.Value;
        }
        // Whenever we call any action method then call this before call the action method
        public async Task Invoke(HttpContext httpContext) {
            List < string > excludeURL = GetExcludeURLList();
            if (!excludeURL.Contains(httpContext.Request.Path.Value)) {
                httpContext.Request.Body = DecryptStream(httpContext.Request.Body);
                if (httpContext.Request.QueryString.HasValue) {
                    string decryptedString = DecryptString(httpContext.Request.QueryString.Value.Substring(1));
                    httpContext.Request.QueryString = new QueryString($ "?{decryptedString}");
                }
            }
            await _next(httpContext);
        }
        // This function is not needed but if we want anything to encrypt then we can use 
        private CryptoStream EncryptStream(Stream responseStream) {
            Aes aes = GetEncryptionAlgorithm();
            ToBase64Transform base64Transform = new ToBase64Transform();
            CryptoStream base64EncodedStream = new CryptoStream(responseStream, base64Transform, CryptoStreamMode.Write);
            ICryptoTransform encryptor = aes.CreateEncryptor(aes.Key, aes.IV);
            CryptoStream cryptoStream = new CryptoStream(base64EncodedStream, encryptor, CryptoStreamMode.Write);
            return cryptoStream;
        }
        static byte[] Encrypt(string plainText) {
            byte[] encrypted;
            using(AesManaged aes = new AesManaged()) {
                ICryptoTransform encryptor = aes.CreateEncryptor(aes.Key, aes.IV);
                using(MemoryStream ms = new MemoryStream()) {
                    using(CryptoStream cs = new CryptoStream(ms, encryptor, CryptoStreamMode.Write)) {
                        using(StreamWriter sw = new StreamWriter(cs))
                        sw.Write(plainText);
                        encrypted = ms.ToArray();
                    }
                }
            }
            return encrypted;
        }
        // This are main functions that we decrypt the payload and  parameter which we pass from the angular service.
        private Stream DecryptStream(Stream cipherStream) {
            Aes aes = GetEncryptionAlgorithm();
            FromBase64Transform base64Transform = new FromBase64Transform(FromBase64TransformMode.IgnoreWhiteSpaces);
            CryptoStream base64DecodedStream = new CryptoStream(cipherStream, base64Transform, CryptoStreamMode.Read);
            ICryptoTransform decryptor = aes.CreateDecryptor(aes.Key, aes.IV);
            CryptoStream decryptedStream = new CryptoStream(base64DecodedStream, decryptor, CryptoStreamMode.Read);
            return decryptedStream;
        }
        private string DecryptString(string cipherText) {
            Aes aes = GetEncryptionAlgorithm();
            byte[] buffer = Convert.FromBase64String(cipherText);
            MemoryStream memoryStream = new MemoryStream(buffer);
            ICryptoTransform decryptor = aes.CreateDecryptor(aes.Key, aes.IV);
            CryptoStream cryptoStream = new CryptoStream(memoryStream, decryptor, CryptoStreamMode.Read);
            StreamReader streamReader = new StreamReader(cryptoStream);
            return streamReader.ReadToEnd();
        }
        // We have to use same KEY and IV as we use for encryption in angular side.
        // _appSettings.EncryptKey= 1203199320052021
        // _appSettings.EncryptIV = 1203199320052021
        private Aes GetEncryptionAlgorithm() {
            Aes aes = Aes.Create();
            var secret_key = Encoding.UTF8.GetBytes(_appSettings.EncryptKey);
            var initialization_vector = Encoding.UTF8.GetBytes(_appSettings.EncryptIV);
            aes.Key = secret_key;
            aes.IV = initialization_vector;
            return aes;
        }
        // This are excluded URL from encrypt- decrypt that already we added in angular side and as well as in ASP.NET CORE side.
        private List < string > GetExcludeURLList() {
            List < string > excludeURL = new List < string > ();
            excludeURL.Add("/api/Common/commonFileuploaddata");
            excludeURL.Add("/api/Users/UploadProfilePicture");
            excludeURL.Add("/api/Common/downloadattachedfile");
            return excludeURL;
        }
    }
}

Now we need this middleware call from Startup.cs file. See the below screenshot:

Here, all the code is complete. Now you can run the project and see the result. Make sure to use the same 16-digit code for both encryption and decryption. If you want to add a long digit unique code then you can, but make sure its basis is of the AES256 algorithm rule. This means 128 bit(16 digits), 192 bit (24 digits), or 256 bit(32 digits) encryption, Here I have used 128-bit encryption.

If you have any doubts or anything else, please let me know in a comment.