Eidocrypt: Building a Seamless Encryption & Decryption Tool for Desktop and Web

In the age of digital communication, data security is more important than ever. While large-scale encryption solutions exist for enterprises, sometimes all you need is a lightweight, custom-built tool that fits your unique workflow. That’s exactly why I created Eidocrypt — a simple yet powerful encryption and decryption application designed to work seamlessly between my desktop and website.

In this post, I’ll walk you through every step of building Eidocrypt, from setting up the desktop app using Electron.js to integrating the decryption tool on a Ghost.io website. Whether you're a developer looking to build a custom encryption solution or just curious about how this works, this guide will offer a comprehensive breakdown of the technologies, processes, and code involved.

I created this project for a personal story telling blog that I have to add an interactive element both on the blog and a personal app that encrypts/decrypts on the back end to speed up the work flow.

What is Eidocrypt?

Eidocrypt is a lightweight encryption and decryption application that uses AES-128 (Advanced Encryption Standard) in ECB (Electronic Codebook) mode with PKCS#7 padding. The app allows me to encrypt messages on my desktop, send them through newsletters, and have recipients decrypt them via a web interface on my Ghost.io website.

The result? A streamlined, secure, and interactive communication system.

Technologies Used

To build Eidocrypt, I used the following technologies:

Electron.js — For building the desktop application.
CryptoJS — A JavaScript library for performing encryption and decryption.
Ghost.io — A modern publishing platform where the decryption tool is embedded.
HTML/CSS/JavaScript — For styling and front-end interaction.

Step-by-Step: Building the Desktop App with Electron.js

The desktop version of Eidocrypt allows me to quickly encrypt and decrypt messages directly from my machine.

1. Setting Up the Project

First, I created a new directory for the project and initialized it with Node.js:

mkdir eidocrypt
cd eidocrypt
npm init -y

Next, I installed Electron and CryptoJS:

npm install electron crypto-js

2. Structuring the Project

Here’s how the project directory looks:

eidocrypt/
├── main.js            // Main process for Electron
├── index.html         // User interface
├── renderer.js        // Front-end logic
├── package.json       // Node project configuration
└── node_modules/      // Installed dependencies

3. Creating the Electron Main Process (`main.js`)

The main.js file initializes the Electron window:

const { app, BrowserWindow } = require('electron');

function createWindow() {
    const win = new BrowserWindow({
        width: 600,
        height: 400,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        },
    });
    win.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

4. Designing the User Interface (`index.html`)

The user interface is simple and clean, inspired by classic terminal aesthetics:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eidocrypt</title>
    <style>
        body {
            font-family: 'Courier New', monospace;
            background-color: black;
            color: #00ff00;
            text-align: center;
            padding: 20px;
        }
        textarea, button {
            width: 80%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #00ff00;
            background: black;
            color: #00ff00;
            border-radius: 5px;
        }
        button {
            background-color: #00aa00;
            cursor: pointer;
        }
        button:hover {
            background-color: #007700;
        }
        #output {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #00ff00;
            background-color: black;
            border-radius: 5px;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <h2>Eidocrypt Encryption Tool</h2>
    <textarea id="inputMessage" placeholder="Enter your message here"></textarea>
    <button id="encryptButton">Encrypt</button>
    <button id="decryptButton">Decrypt</button>
    <div id="output"></div>

    <script src="renderer.js"></script>
</body>
</html>

5. Adding the Encryption Logic (`renderer.js`)

Now, I integrated the AES-128 encryption logic using CryptoJS in renderer.js:

const CryptoJS = require('crypto-js');

const secretKey = CryptoJS.enc.Utf8.parse('ThisIsASecretKey');  // Shared key
const options = { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 };

function encryptMessage(plainText) {
    const encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(plainText), secretKey, options);
    return encrypted.ciphertext.toString(CryptoJS.enc.Base64);
}

function decryptMessage(encryptedText) {
    try {
        const decrypted = CryptoJS.AES.decrypt(
            { ciphertext: CryptoJS.enc.Base64.parse(encryptedText) },
            secretKey,
            options
        );
        const originalText = decrypted.toString(CryptoJS.enc.Utf8);
        if (!originalText) {
            return 'Error: Invalid encrypted message or key.';
        }
        return originalText;
    } catch (error) {
        return 'Error: Decryption failed.';
    }
}

// Button Event Listeners
document.getElementById('encryptButton').addEventListener('click', () => {
    const message = document.getElementById('inputMessage').value.trim();
    document.getElementById('output').innerText = encryptMessage(message);
});

document.getElementById('decryptButton').addEventListener('click', () => {
    const encryptedMessage = document.getElementById('inputMessage').value.trim();
    document.getElementById('output').innerText = decryptMessage(encryptedMessage);
});

6. Running the Desktop App

To launch the app, I simply ran:

npm start

The desktop app was now ready to encrypt and decrypt messages!

Integrating Eidocrypt with Ghost.io

To complete the workflow, I wanted recipients of my newsletter to be able to decrypt messages on my Ghost.io website.

1. Adding the Decryption Interface to Ghost.io

In Ghost Admin, I navigated to Settings > Code Injection > Header and added the following HTML and CSS:

<div class="eidocrypt-container">
    <h2>Eidocrypt Decryption</h2>
    <input type="text" id="inputMessage" placeholder="Enter your encrypted code here">
    <button id="decryptButton">Decrypt</button>
    <div id="outputBox"></div>
</div>

<style>
    .eidocrypt-container {
        font-family: 'Courier New', monospace;
        background: rgba(0, 0, 0, 0.9);
        padding: 20px;
        border-radius: 10px;
        color: #00ff00;
        text-align: center;
        margin: 50px auto;
        width: 80%;
    }
    .eidocrypt-container input, .eidocrypt-container button, #outputBox {
        padding: 10px;
        margin: 10px 0;
        border: 1px solid #00ff00;
        background: black;
        color: #00ff00;
        border-radius: 5px;
        width: 80%;
    }
    .eidocrypt-container button {
        background-color: #00aa00;
        cursor: pointer;
        font-weight: bold;
    }
    .eidocrypt-container button:hover {
        background-color: #007700;
    }
</style>

2. Adding Decryption Logic to Ghost.io

In the Footer Code Injection, I added the decryption logic:

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<script>
    const secretKey = CryptoJS.enc.Utf8.parse('ThisIsASecretKey');
    const options = { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 };

    function decryptMessage(encryptedText) {
        try {
            const decrypted = CryptoJS.AES.decrypt(
                { ciphertext: CryptoJS.enc.Base64.parse(encryptedText) },
                secretKey,
                options
            );
            const originalText = decrypted.toString(CryptoJS.enc.Utf8);
            return originalText || 'Error: Invalid encrypted message or key.';
        } catch (error) {
            return 'Error: Decryption failed.';
        }
    }

    document.getElementById('decryptButton').addEventListener('click', () => {
        const inputMessage = document.getElementById('inputMessage').value.trim();
        const decryptedOutput = decryptMessage(inputMessage);
        document.getElementById('outputBox').innerText = decryptedOutput;
    });
</script>

Final Thoughts: How Eidocrypt Works Seamlessly

With Eidocrypt, I can now encrypt messages on my desktop, distribute them via newsletters, and let readers decrypt them on my website. Both systems use the same AES-128 ECB encryption with a shared secret key, ensuring perfect interoperability.

Whether you’re building a secure communication system for personal use or looking to engage your audience with cryptographic puzzles, Eidocrypt is a simple yet effective solution.