How To sent json data into query string in encripted form and get back in normal json format in angular

How To sent json data into query string in encripted form and get back in normal json format in angular

for encripted query string paramter json data i have follow steps 

1).first i have json data belongs to perticular page

like :-

    {

      module: 'tradefast',

      page: 'iot',

      userId: this.userId,

      TradeID: this.TradeID,

      CounterPartyID: this.CounterPartyID,

      Status: this.Status,

      contractFromEnumID: 'Online'

    }

2).convert json data into string data 

    var rowData = JSON.stringify({

      module: 'tradefast',

      page: 'iot',

      userId: this.userId,

      TradeID: this.TradeID,

      CounterPartyID: this.CounterPartyID,

      Status: this.Status,

      contractFromEnumID: 'Online'

       });

3).then Convert JSON string to Encripted data 

     const encriptedData =this.encService.setEnc(rowData);

4).Then Convert encripted data into "btoa" formated string

    const btoaData=btoa(encriptedData);

5).Append query string with url

    const url='http://localhost:4200/#/mail-page?data='+btoaData;

6).Now Add link with perticular mail or in webpage

    <a href=""+url+"">Click Here</a>

7).Now When press click here anchor or link to redirect link page and get data query string

import { Component, OnInit } from '@angular/core';

import { Router, ActivatedRoute } from '@angular/router';

import * as CryptoJS from 'crypto-js';

import { EncrDecrService } from '../../services/EncrDecrService';

@Component({

  selector: 'app-mail-page',

  templateUrl: './mail-page.component.html',

  styleUrls: ['./mail-page.component.scss']

})

export class MailRedirectionComponent implements OnInit {

public urlData='';

 constructor(private router: Router, private route: ActivatedRoute,

 private encService: EncrDecrService) {

 this.urlData = this.route.snapshot.queryParamMap.get('data');

  const data = JSON.parse(this.encService.getDec(atob(this.urlData)));

//print json data

console.log(data);

}

}

this is the component where we can get querystring and convert back into a proper json data with secure way there are first we convert url data into "atob" and then convert from "atob" to encripted form and then encripted form to decript into a json string and then finaly json string parse and get proper json data

and 

the security algorith that you used is used

import { Injectable } from '@angular/core';

import * as CryptoJS from 'crypto-js';

import { environment } from '../../environments/environment';

@Injectable({

    providedIn: 'root'

})

export class EncrDecrService {

    saltKeys = 'yoursaltKey';

    constructor() { }

    // The set method is use for encrypt the value.

    set(value) {

            return this.setEnc(value);

    }

    // The get method is use for decrypt the value.

    get(value) {       

            return this.getDec(value);        

    }

    setEnc(value) {

        const key = CryptoJS.enc.Utf8.parse(this.saltKeys);

        const iv = CryptoJS.enc.Utf8.parse(this.saltKeys);

        const encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(value.toString()), key,

            {

                keySize: 128 / 8,

                iv: iv,

                mode: CryptoJS.mode.CBC,

                padding: CryptoJS.pad.Pkcs7

            });

        return encrypted.toString();

    }

    // The get method is use for decrypt the value.

    getDec(value) {

        const key = CryptoJS.enc.Utf8.parse(this.saltKeys);

        const iv = CryptoJS.enc.Utf8.parse(this.saltKeys);

        const decrypted = CryptoJS.AES.decrypt(value, key, {

            keySize: 128 / 8,

            iv: iv,

            mode: CryptoJS.mode.CBC,

            padding: CryptoJS.pad.Pkcs7

        });

        return decrypted.toString(CryptoJS.enc.Utf8);

    }