In previous post we did the NodeJs Vesion of Seed Phrase Generator, here - we will create the browser version of it.

Taking Control: Be Your Own Entropy Master

Today, I want to share my experience in building a secure seed phrase generator - a crucial tool in the world of cryptocurrencies and blockchain technology. This project taught me valuable lessons about cryptography, user interaction, and the importance of randomness in security applications.

The NodeJs Vesion of our Seed Phrase Generator was based on BIP39 library.. Let's try a different approach by implementing the core functionality ourselves without relying on an external library. This will ensure the code works independently.

The Importance of True Randomness

When generating seed phrases, the quality of randomness is paramount. Long time ago, I used JavaScript's Math.random(), but I quickly realized this wasn't secure enough for cryptographic purposes. Here's where I landed:

function generateCustomRandomBytes(byteLength, mouseMoves) {
    const customBytes = new Uint8Array(byteLength);
    window.crypto.getRandomValues(customBytes);

    const mouseHash = new Uint32Array(mouseMoves);
    for (let i = 0; i < byteLength; i++) {
        customBytes[i] ^= mouseHash[i % mouseHash.length] & 0xFF;
    }

    return customBytes;
}

This function combines cryptographically secure random values from window.crypto.getRandomValues() with user-generated entropy from mouse movements. The XOR operation ensures that both sources contribute to the final randomness.

Engaging User Interaction for Added Security

I decided to involve the user in the randomness generation process. By tracking mouse movements, we not only increase entropy but also engage the user, making them an active participant in the security process.

Providing Visual Feedback

To keep users informed and engaged, I implemented a progress bar that reflects actual mouse movement rather than just elapsed time:

function updateProgressBar() {
    const progress = Math.min((mouseMoves.length / 3) / requiredMoves * 100, 100);
    document.getElementById('progressBar').style.width = progress + '%';

    if (progress >= 100 && collecting) {
        stopRandomCollection();
    } else if (collecting) {
        requestAnimationFrame(updateProgressBar);
    }
}

This approach provides real-time feedback, encouraging users to move their mouse until sufficient entropy is collected.

Protecting Sensitive Data

One crucial lesson was the importance of protecting sensitive data. Initially, I stored the mouse movement data in a global variable, which could potentially be accessed by malicious scripts. I resolved this by using closure:


(function() {
    let mouseMoves = [];
    // ... other variables and functions ...

    function stopRandomCollection() {
        // ... other code ...
        generateSeedPhrase(mouseMoves);
        mouseMoves = []; // Clear sensitive data after use
    }
    // ... rest of the code ...
})();

This approach keeps the sensitive data encapsulated and inaccessible from the global scope.

Running the Seed Phrase Generator Securely

One of the most critical aspects of using a seed phrase generator is ensuring that the process is completely offline and secure. Here's a step-by-step guide on how to run this code safely:

Create a New Text File: Open your preferred text editor (like Notepad on Windows or TextEdit on Mac).
Copy and Paste the Code: Copy the entire HTML code for the seed phrase generator and paste it into this new text file.
Save the File with .html Extension: Save the file with a name like "seed_phrase_generator.html". Make sure to change the file extension from .txt to .html. In most text editors, you can do this by selecting "All Files" in the "Save as type" dropdown and then adding .html to the end of the file name.

Disconnect from the Internet:

Before proceeding, disconnect your computer from the internet. This ensures that no data can be transmitted during the seed phrase generation process.
Run the File in Your Browser:
Double-click the saved .html file to open it in your default web browser. The seed phrase generator should now be running locally on your machine.
Generate Your Seed Phrase:
Follow the on-screen instructions to generate your seed phrase.
Securely Store Your Seed Phrase:
Once generated, write down your seed phrase on paper. Never store it digitally.

Close the Browser and Delete the File:

After you've securely recorded your seed phrase, close the browser and delete the .html file.

Why Run Offline?

Running this code offline is crucial for several reasons:

Security: It prevents any potential transmission of your seed phrase over the internet.
Privacy: It ensures that no third-party scripts or trackers can interfere with the process.
Integrity: It guarantees that the code runs exactly as intended, without any external modifications.

Remember: Your seed phrase is the key to your digital assets. Always prioritize security when generating and storing it. Running this generator offline is a critical step in protecting your assets.

Balancing Security and User Experience

Building a secure seed phrase generator is more than just writing code. It's about understanding cryptographic principles, valuing user interaction, and always prioritizing security. As developers, projects like these push us to think critically about every line of code we write and its potential implications.

Source code link https://buymeacoffee.com/techmobilebox/e/291196

"Your donation keeps the lights on! (The ones in my brain, mostly.)"

And here is the next step - From Mnemonic to Bitcoin Addresses in JavaScript

Building your own Secure Seed Phrase Generator