How to include Gibberish-aes in ionic 3?


#1

Friends,
I installed Gibberisg-aes for encryption/decryption in ionic 3. I installed using command

npm i gibberish-aes

But when I try to run it in browser i got error as

Error: ./src/pages/home/home.ts
Module not found: Error: Can't resolve 'GibberishAES' in '/home/user/Lmgov-master/src/pages/home'
resolve 'GibberishAES' in '/home/user/Lmgov-master/src/pages/home'
  Parsed request is a module
  using description file: /home/user/Lmgov-master/package.json (relative path: ./src/pages/home)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /home/user/Lmgov-master/package.json (relative path: ./src/pages/home)
    resolve as module
      looking for modules in /home/user/Lmgov-master/node_modules
        using description file: /home/user/Lmgov-master/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /home/user/Lmgov-master/package.json (relative path: ./node_modules)
          using description file: /home/user/Lmgov-master/package.json (relative path: ./node_modules/GibberishAES)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/user/Lmgov-master/node_modules/GibberishAES doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /home/user/Lmgov-master/node_modules/GibberishAES.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/user/Lmgov-master/node_modules/GibberishAES.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /home/user/Lmgov-master/node_modules/GibberishAES.json doesn't exist
            as directory
              /home/user/Lmgov-master/node_modules/GibberishAES doesn't exist
[/home/user/Lmgov-master/node_modules/GibberishAES]
[/home/user/Lmgov-master/node_modules/GibberishAES.ts]
[/home/user/Lmgov-master/node_modules/GibberishAES.js]
[/home/user/Lmgov-master/node_modules/GibberishAES.json]
[/home/user/Lmgov-master/node_modules/GibberishAES]
 @ ./src/pages/home/home.ts 64:27-50
 @ ./src/app/app.module.ts
 @ ./src/app/main.ts
    at new BuildError (/home/user/Lmgov-master/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
    at callback (/home/user/Lmgov-master/node_modules/@ionic/app-scripts/dist/webpack.js:121:28)
    at emitRecords.err (/home/user/Lmgov-master/node_modules/@ionic/app-scripts/node_modules/webpack/lib/Compiler.js:269:13)
    at Compiler.emitRecords (/home/user/Lmgov-master/node_modules/@ionic/app-scripts/node_modules/webpack/lib/Compiler.js:375:38)
    at emitAssets.err (/home/user/Lmgov-master/node_modules/@ionic/app-scripts/node_modules/webpack/lib/Compiler.js:262:10)
    at applyPluginsAsyncSeries1.err (/home/user/Lmgov-master/node_modules/@ionic/app-scripts/node_modules/webpack/lib/Compiler.js:368:12)
    at next (/home/user/Lmgov-master/node_modules/@ionic/app-scripts/node_modules/tapable/lib/Tapable.js:218:11)
    at Compiler.compiler.plugin (/home/user/Lmgov-master/node_modules/@ionic/app-scripts/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (/home/user/Lmgov-master/node_modules/@ionic/app-scripts/node_modules/tapable/lib/Tapable.js:222:13)
    at Compiler.afterEmit (/home/user/Lmgov-master/node_modules/@ionic/app-scripts/node_modules/webpack/lib/Compiler.js:365:9)

My code is

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
/**
 * Generated class for the HomePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {
  key: any;
  iv: any;
  plain_text: string;
  encrypted_text: string;
  payment_var: string;
  decrypted_text: string;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.key = "0123456789abcdef0123456789abcdef";
    this.iv  = "abcdef9876543210abcdef9876543210";
    this.plain_text = '';
    this.payment_var = '';
    this.encrypted_text = '';
    this.decrypted_text = '';
  }

  encrypt() {
  var gibberishAes = require("GibberishAES");
  var enc = gibberishAes.enc("This sentence is super secret", "ultra-strong-password");
    alert(enc);
   let jj =  gibberishAes.dec(enc, "ultra-strong-password");
   alert("decrypted:"+jj);
}

  ionViewDidLoad() {
    console.log('ionViewDidLoad HomePage');
    this.plain_text = 'parvez.alam';
    this.encrypt();
  }

}

Please advise how it can resolve .

Thanks

Anes


#2

Please, please, stop doing this. Leave all cryptography to tested protocols like HTTPS. If you are representing to users that this provides any security whatsoever, I would consider that fraud, so this could open you up to legal liability.