Encrypting Data in SAP UI5 using SHA256

Introduction

After implementing hashing via AES 256 (read here), one can conclude that since we can hash and unhash data, hence the encrypted data can be decrypted anyhow, and our data can be stolen. In a special scenario, where you don’t need decryption and just need hashing of data, we use SHA256 Encryption. It has a very important role in Blockchain. In this article, we will learn Encrypting Data in SAP UI5 using SHA256.

What is SHA 256?

The full form of SHA is the Secure Hash Algorithm, and SHA 256 is part of the series SHA Encryption. SHA256 always give result in the form of 256 characters for any type of input.

Can we decrypt the data of SHA 256?

SHA 256 are one-way of encryption, and the encrypted values cannot be decrypted. In case you find some online portals decrypting your hash, then it would mean that they have saved some hashes in their db and just returning the values that they have saved with it.

How to Implement Encryption in SAP UI5 using SHA256

To implement SHA 256 in SAP UI5, you need to include the given scripts in Index.html

<script src=”https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/core.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/sha256.js”></script>

Index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
        <title>My Project Ideas</title>
         <link rel="icon" type="image/x-icon" href="https://myprojectideas.com/wp-content/uploads/2021/08/cropped-Screenshot-2021-07-26-at-1.39.04-PM-32x32.png">
        <script id="sap-ui-bootstrap"
            src="resources/sap-ui-core.js"
            data-sap-ui-theme="sap_fiori_3"
            data-sap-ui-resourceroots='{"Test.Test": "./"}'
            data-sap-ui-compatVersion="edge"
            data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
            data-sap-ui-async="true"
            data-sap-ui-frameOptions="trusted">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/core.min.js"></script>
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/sha256.js"></script>
    </head>
    <body class="sapUiBody">
        <div data-sap-ui-component data-name="Test.Test" data-id="container" data-settings='{"id" : "Test"}'></div>
    </body>
</html>

View.xml

<mvc:View controllerName="Test.Test.controller.Main" xmlns:ndc="sap.ndc" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"
    xmlns:core="sap.ui.core" xmlns:html="http://www.w3.org/1999/xhtml">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="Encrypting Data in SAP UI5 using SHA256">
                    <content>
                        <VBox>
                            <Text text="Enter your text for SHA Encryption"/>
                            <Input id="idText"/>
                            <Button text="Encrypt" press="onPressEncrypt"/>
                            <Text text="Encrypted Text"/>
                            <Input editable="false" id="idEncrypted"/>
                            <Title text="Verify Hash"/>
                            <Input id="idTextVerify"/>
                            <Button id="idButtonVerify" enabled="false" text="Verify" press="onPressVerify"/>
                            <Input editable="false" id="idNewhHash"/>
                            <Text id="idStatus" text=""/>
                        </VBox>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

 

Controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageBox",
    "sap/m/MessageToast",
    "sap/ui/model/json/JSONModel",
    "sap/ndc/BarcodeScanner"

], function (Controller, MessageBox, MessageToast, JSONModel, BarcodeScanner) {
    "use strict";

    return Controller.extend("Test.Test.controller.Main", {
        onPressEncrypt: function (oEvent) {
            var text = this.byId("idText").getValue();
            var payload = this.encrypt(text);
            this.byId("idButtonVerify").setEnabled(true);
            this.byId("idTextVerify").setEnabled(true);
            this.byId("idEncrypted").setValue(payload);
        },

        onPressVerify: function (oEvent) {
            var text = this.byId("idTextVerify").getValue();
            var payload = this.encrypt(text);
            this.byId("idNewhHash").setValue(payload);
            var oldHash = this.byId("idEncrypted").getValue();
            var newHash = this.byId("idNewhHash").getValue();
            if (newHash === oldHash) {
                this.byId("idStatus").setText("Hash is same!");
            } else {
                this.byId("idStatus").setText("Hash is different!");
            }
        },

        encrypt: function (input) {
            var passhash = CryptoJS.SHA256(input);
            return passhash;
        }

    });
});

 

Output

Success

Encrypting Data in SAP UI5 using SHA256

Error

Encrypting Data in SAP UI5 using SHA256 Mismatch

Author

  • Barry Allen

    A Full Stack Developer with 10+ years of experience in different domain including SAP, Blockchain, AI and Web Development.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.