Rumah > hujung hadapan web > tutorial js > Membina Penjana Frasa Benih Selamat anda sendiri

Membina Penjana Frasa Benih Selamat anda sendiri

WBOY
Lepaskan: 2024-07-30 11:50:51
asal
935 orang telah melayarinya

Kod yang disebut tersedia dalam Github saya
Dalam catatan sebelum ini saya melakukan NodeJs Vesion of Seed Frasa Generator, di sini - kami akan mencipta versi penyemak imbasnya.

Sebagai pembangun, kami sering menghadapi cabaran yang memerlukan kami berfikir di luar konsep pengaturcaraan asas. Hari ini, saya ingin berkongsi pengalaman saya dalam membina penjana frasa benih yang selamat - alat penting dalam dunia mata wang kripto dan teknologi blockchain. Projek ini mengajar saya pelajaran berharga tentang kriptografi, interaksi pengguna dan kepentingan rawak dalam aplikasi keselamatan.

Kepentingan Rawak Sebenar

Apabila menjana frasa benih, kualiti rawak adalah diutamakan. Lama dahulu, saya menggunakan JavaScript's Math.random(), tetapi saya segera menyedari bahawa ini tidak cukup selamat untuk tujuan kriptografi. Di sinilah saya mendarat:

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;
}
Salin selepas log masuk

Fungsi ini menggabungkan nilai rawak selamat secara kriptografi daripada window.crypto.getRandomValues() dengan entropi yang dijana pengguna daripada pergerakan tetikus. Operasi XOR memastikan kedua-dua sumber menyumbang kepada rawak akhir.

Interaksi Pengguna yang Menarik untuk Keselamatan Ditambah

Saya memutuskan untuk melibatkan pengguna dalam proses penjanaan rawak. Dengan menjejaki pergerakan tetikus, kami bukan sahaja meningkatkan entropi tetapi juga melibatkan pengguna, menjadikan mereka peserta aktif dalam proses keselamatan.

Memberi Maklum Balas Visual

Building your own Secure Seed Phrase Generator

Untuk memastikan pengguna mendapat maklumat dan terlibat, saya melaksanakan bar kemajuan yang mencerminkan pergerakan tetikus sebenar dan bukannya masa berlalu:

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);
    }
}
Salin selepas log masuk

Pendekatan ini memberikan maklum balas masa nyata, menggalakkan pengguna menggerakkan tetikus mereka sehingga entropi yang mencukupi dikumpulkan.

Melindungi Data Sensitif

Satu pengajaran penting ialah kepentingan melindungi data sensitif. Pada mulanya, saya menyimpan data pergerakan tetikus dalam pembolehubah global, yang berpotensi boleh diakses oleh skrip berniat jahat. Saya menyelesaikannya dengan menggunakan penutupan:

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

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

Pendekatan ini mengekalkan data sensitif dalam kapsul dan tidak boleh diakses daripada skop global.

Menjalankan Penjana Frasa Benih dengan Selamat

Salah satu aspek yang paling kritikal dalam menggunakan penjana frasa benih ialah memastikan proses di luar talian dan selamat sepenuhnya. Berikut ialah panduan langkah demi langkah tentang cara menjalankan kod ini dengan selamat:

  1. Buat Fail Teks Baharu: Buka editor teks pilihan anda (seperti Notepad pada Windows atau TextEdit pada Mac).
  2. Salin dan Tampal Kod: Salin keseluruhan kod HTML untuk penjana frasa benih dan tampalkannya ke dalam fail teks baharu ini.
  3. Simpan Fail dengan Sambungan .html: Simpan fail dengan nama seperti "seed_phrase_generator.html". Pastikan anda menukar sambungan fail daripada .txt kepada .html. Dalam kebanyakan editor teks, anda boleh melakukan ini dengan memilih "Semua Fail" dalam menu lungsur "Simpan sebagai jenis" dan kemudian menambahkan .html pada penghujung nama fail.

Putuskan sambungan daripada Internet:

Sebelum meneruskan, putuskan sambungan komputer anda daripada Internet. Ini memastikan tiada data boleh dihantar semasa proses penjanaan frasa benih.
Jalankan Fail dalam Penyemak Imbas Anda:
Klik dua kali fail .html yang disimpan untuk membukanya dalam penyemak imbas web lalai anda. Penjana frasa benih kini sepatutnya berjalan secara setempat pada mesin anda.
Jana Frasa Benih Anda:
Ikut arahan pada skrin untuk menjana frasa benih anda.
Simpan Frasa Benih Anda dengan Selamat:
Setelah dijana, tuliskan frasa benih anda di atas kertas. Jangan sekali-kali menyimpannya secara digital.

Image description

Tutup Pelayar dan Padam Fail:

Selepas anda merakam frasa benih anda dengan selamat, tutup penyemak imbas dan padamkan fail .html.

Mengapa Jalankan Luar Talian?

Menjalankan kod ini di luar talian adalah penting untuk beberapa sebab:

Keselamatan: Ia menghalang sebarang kemungkinan penghantaran frasa benih anda melalui Internet.
Privasi: Ia memastikan tiada skrip atau penjejak pihak ketiga boleh mengganggu proses.
Integriti: Ia menjamin bahawa kod berjalan tepat seperti yang dimaksudkan, tanpa sebarang pengubahsuaian luaran.

Ingat: Frasa benih anda ialah kunci kepada aset digital anda. Sentiasa mengutamakan keselamatan semasa menjana dan menyimpannya. Menjalankan penjana ini di luar talian ialah langkah kritikal dalam melindungi aset anda.

Mengimbangi Keselamatan dan Pengalaman Pengguna

Membina penjana frasa benih yang selamat adalah lebih daripada sekadar menulis kod. Ini tentang memahami prinsip kriptografi, menghargai interaksi pengguna dan sentiasa mengutamakan keselamatan. Sebagai pembangun, projek seperti ini mendorong kami untuk berfikir secara kritis tentang setiap baris kod yang kami tulis dan potensi implikasinya.

Berikut ialah Pautan ke Github - isi percuma untuk mengklon

Atas ialah kandungan terperinci Membina Penjana Frasa Benih Selamat anda sendiri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan