Thursday, 4 June 2020

ionic react AES256 encryption

app opens

change password, input data, press encrypt, data is encrypted

press decrypt, decrypted data is same as before

change password, try encrypt and decrypt, 
encrypted data changes, but decrpted data stays same
//cmd
npm install cordova-plugin-aes256-encryption
npm install @ionic-native/aes-256
ionic cap sync
-------------------------------------

//tab1.tsx

import React, { useState, useEffect } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonBadge, IonList,
  IonItemDivider, IonCheckbox, IonChip, IonAvatar,
  IonGrid, IonRow, IonCol, IonInput, IonToggle,
  IonModal, IonRefresher, IonRefresherContent,
  IonTextarea, IonSelect, IonListHeader,
  IonSelectOption, IonButtons, IonBackButton,
  IonMenuButton, IonSegment, IonSearchbar,
  IonSegmentButton, IonFooter, IonText, IonToast,
  useIonViewDidEnter, useIonViewDidLeave,
  useIonViewWillEnter, useIonViewWillLeave
} from '@ionic/react';
import './Tab1.css';
import {
  person
} from 'ionicons/icons';
import { Plugins } from '@capacitor/core';
import { AES256 } from '@ionic-native/aes-256';

const Tab1: React.FC = () => {
  const [password, setPassword] = useState<string>('12345')
  const [secureKey, setSecureKey] = useState<string>('')
  const [secureIV, setSecuryIV] = useState<string>('')
  const [data, setData] = useState<string>('')
  const [encryptedData, setEncrpytedData] = useState<string>('')
  const [decryptedData, setDecryptedData] = useState<string>('')

  useEffect(() => {
    generateSecureKeyAndIV()
  }, []);

  const generateSecureKeyAndIV = async () => {
    setSecureKey(await AES256.generateSecureKey(password))
    setSecuryIV(await AES256.generateSecureIV(password))
  }

  const encrypt = async () => {

    AES256.encrypt(secureKey, secureIV, data)
      .then(res => {
        setEncrpytedData(res);
      })
      .catch(error => alert(error))
  }

  const decrypt = () => {

    AES256.decrypt(secureKey, secureIV, encryptedData)
      .then(res => setDecryptedData(res))
      .catch(error => alert(error))
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>AES256 Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem>
            <IonLabel>Password:</IonLabel>
            <IonInput placeholder={password}
              onIonChange={e => setPassword(e.detail.value!)}
              onIonBlur={e => generateSecureKeyAndIV()}></IonInput>
          </IonItem>
          <IonItem>
            <IonLabel>Data:</IonLabel>
            <IonInput placeholder={data}
              onIonChange={e => setData(e.detail.value!)}></IonInput>
          </IonItem>
          <IonItem>
            <IonButton expand='block' onClick={() => encrypt()}>Encrypt</IonButton>
          </IonItem>
          <IonItem >
            <IonLabel position='stacked'>Encrypted Data:</IonLabel>
            <IonTextarea>
              {encryptedData}
            </IonTextarea>
          </IonItem>
          <IonItem>
            <IonButton expand='block' onClick={() => decrypt()}>Decrypt</IonButton>
          </IonItem>
          <IonItem>
            <IonLabel position='stacked'>Decrypted Data:</IonLabel>
            <IonTextarea>
              {decryptedData}
            </IonTextarea>
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage>
  );
};

export default Tab1;

reference:

AES256
The design and strength of all key lengths of the AES algorithm (i.e., 128, 192 and 256) are sufficient to protect classified information up to the SECRET level. TOP SECRET information will require use of either the 192 or 256 key lengths. The implementation of AES in products intended to protect national security systems and/or information must be reviewed and certified by NSA prior to their acquisition and use.[12]

No comments:

Post a Comment