Maison >interface Web >js tutoriel >Construire votre propre générateur de phrases de départ sécurisé

Construire votre propre générateur de phrases de départ sécurisé

WBOY
WBOYoriginal
2024-07-30 11:50:51938parcourir

Les codes mentionnés sont disponibles dans mon Github
Dans l'article précédent, j'ai créé la version NodeJs du générateur de phrases de départ, ici - nous allons en créer la version navigateur.

En tant que développeurs, nous sommes souvent confrontés à des défis qui nous obligent à penser au-delà des concepts de programmation de base. Aujourd'hui, je souhaite partager mon expérience dans la création d'un générateur de phrases de départ sécurisé - un outil crucial dans le monde des crypto-monnaies et de la technologie blockchain. Ce projet m'a appris de précieuses leçons sur la cryptographie, l'interaction des utilisateurs et l'importance du caractère aléatoire dans les applications de sécurité.

L’importance du véritable hasard

Lors de la génération de phrases de départ, la qualité du caractère aléatoire est primordiale. Il y a longtemps, j'utilisais Math.random() de JavaScript, mais j'ai vite réalisé que ce n'était pas assez sécurisé à des fins cryptographiques. Voici où j'ai atterri :

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;
}

Cette fonction combine des valeurs aléatoires cryptographiquement sécurisées de window.crypto.getRandomValues() avec l'entropie générée par l'utilisateur à partir des mouvements de la souris. L'opération XOR garantit que les deux sources contribuent au caractère aléatoire final.

Interaction utilisateur engageante pour une sécurité accrue

J'ai décidé d'impliquer l'utilisateur dans le processus de génération aléatoire. En suivant les mouvements de la souris, nous augmentons non seulement l'entropie, mais engageons également l'utilisateur, ce qui en fait un participant actif dans le processus de sécurité.

Fournir des commentaires visuels

Building your own Secure Seed Phrase Generator

Pour garder les utilisateurs informés et engagés, j'ai implémenté une barre de progression qui reflète le mouvement réel de la souris plutôt que simplement le temps écoulé :

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);
    }
}

Cette approche fournit un retour en temps réel, encourageant les utilisateurs à déplacer leur souris jusqu'à ce qu'une entropie suffisante soit collectée.

Protection des données sensibles

Une leçon cruciale était l’importance de protéger les données sensibles. Initialement, j'ai stocké les données de mouvement de la souris dans une variable globale, potentiellement accessible par des scripts malveillants. J'ai résolu ce problème en utilisant la fermeture :

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

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

Cette approche maintient les données sensibles encapsulées et inaccessibles à l'échelle mondiale.

Exécuter le générateur de phrases de départ en toute sécurité

L'un des aspects les plus critiques de l'utilisation d'un générateur de phrases de départ est de garantir que le processus est complètement hors ligne et sécurisé. Voici un guide étape par étape sur la façon d'exécuter ce code en toute sécurité :

  1. Créer un nouveau fichier texte : Ouvrez votre éditeur de texte préféré (comme le Bloc-notes sous Windows ou TextEdit sur Mac).
  2. Copiez et collez le code : Copiez l'intégralité du code HTML du générateur de phrases de départ et collez-le dans ce nouveau fichier texte.
  3. Enregistrez le fichier avec l'extension .html : Enregistrez le fichier sous un nom tel que "seed_phrase_generator.html". Assurez-vous de changer l'extension du fichier de .txt à .html. Dans la plupart des éditeurs de texte, vous pouvez le faire en sélectionnant « Tous les fichiers » dans la liste déroulante « Enregistrer sous le type », puis en ajoutant .html à la fin du nom du fichier.

Déconnectez-vous d'Internet :

Avant de continuer, déconnectez votre ordinateur d'Internet. Cela garantit qu'aucune donnée ne peut être transmise pendant le processus de génération de la phrase de départ.
Exécutez le fichier dans votre navigateur :
Double-cliquez sur le fichier .html enregistré pour l'ouvrir dans votre navigateur Web par défaut. Le générateur de phrases de départ devrait maintenant fonctionner localement sur votre ordinateur.
Générez votre phrase de départ :
Suivez les instructions à l'écran pour générer votre phrase de départ.
Stockez en toute sécurité votre phrase de départ :
Une fois généré, écrivez votre phrase de départ sur papier. Ne le stockez jamais sous forme numérique.

Image description

Fermez le navigateur et supprimez le fichier :

Après avoir enregistré en toute sécurité votre phrase de départ, fermez le navigateur et supprimez le fichier .html.

Pourquoi fonctionner hors ligne ?

L'exécution de ce code hors ligne est cruciale pour plusieurs raisons :

Sécurité : elle empêche toute transmission potentielle de votre phrase de départ sur Internet.
Confidentialité : cela garantit qu'aucun script ou tracker tiers ne peut interférer avec le processus.
Intégrité : Elle garantit que le code s'exécute exactement comme prévu, sans aucune modification externe.

Rappelez-vous : votre phrase de départ est la clé de vos actifs numériques. Donnez toujours la priorité à la sécurité lors de sa génération et de son stockage. L'exécution de ce générateur hors ligne est une étape critique dans la protection de vos actifs.

Équilibrer la sécurité et l’expérience utilisateur

Construire un générateur de phrases de départ sécurisé ne se limite pas à écrire du code. Il s'agit de comprendre les principes cryptographiques, de valoriser l'interaction des utilisateurs et de toujours donner la priorité à la sécurité. En tant que développeurs, des projets comme ceux-ci nous poussent à réfléchir de manière critique à chaque ligne de code que nous écrivons et à ses implications potentielles.

Voici le lien vers Github - remplissez gratuitement pour cloner

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn