Penyulitan dan Penyahsulitan Teks Selamat dengan JavaScript Vanila

Dalam era digital hari ini, mendapatkan maklumat sensitif seperti kunci API, kata laluan dan data pengguna adalah lebih kritikal berbanding sebelum ini. Strategi penyulitan dan penyahsulitan yang teguh boleh menghalang capaian yang tidak dibenarkan dan memastikan kerahsiaan data. Dalam catatan blog ini, kami akan meneroka cara menyulitkan dan menyahsulit teks menggunakan JavaScript vanila, memanfaatkan API Web Crypto untuk pendekatan moden dan selamat.

Mengapa Menggunakan Penyulitan?

Penyulitan mengubah data yang boleh dibaca (teks biasa) kepada format yang diselitkan (teks sifir) yang hanya boleh dibaca jika dinyahsulit dengan kekunci yang betul. Ini memastikan bahawa walaupun seseorang memintas data yang disulitkan, ia tetap tidak bermakna tanpa kunci. Mekanisme penyulitan yang kukuh melindungi:

• Kunci API disimpan dalam kod bahagian hadapan anda.
• Maklumat pengguna yang sensitif.
• Sebarang data yang dipindahkan melalui saluran yang tidak selamat.

Mari kita mendalami cara anda boleh melaksanakan perkara ini dengan selamat dalam JavaScript.

---

Penyulitan dan Penyahsulitan Menggunakan AES-GCM

Kami akan menggunakan AES-GCM (Standard Penyulitan Lanjutan - Mod Galois/Counter), standard moden yang menyediakan kedua-dua penyulitan dan pengesahan integriti. Langkah-langkahnya melibatkan:

1. Penerbitan Kata Laluan: Gunakan PBKDF2 (Fungsi Terbitan Kunci Berasaskan Kata Laluan 2) untuk mendapatkan kunci selamat daripada kata laluan.
2. Garam dan IV: Hasilkan garam rawak (untuk menjadikan terbitan kata laluan unik) dan iv (Vektor Permulaan) untuk setiap penyulitan.
3. Penyulitan: Sulitkan teks biasa menggunakan AES-GCM.
4. Penyahsulitan: Nyahsulit teks sifir menggunakan kata laluan dan garam/iv yang sama.

---

Pelaksanaan Kod

Berikut ialah pelaksanaan JavaScript yang lengkap.

Utiliti untuk Penukaran

Kami akan menukar antara ArrayBuffer dan perenambelasan untuk penyimpanan dan pengambilan data yang mudah:

function arrayBufferToHex(buffer) {
    return [...new Uint8Array(buffer)]
        .map(byte => byte.toString(16).padStart(2, '0'))
        .join('');
}

function hexToArrayBuffer(hex) {
    const bytes = new Uint8Array(hex.length / 2);
    for (let i = 0; i 



<h3>
  
  
  Terbitan Utama daripada Kata Laluan
</h3>

<p>Gunakan PBKDF2 untuk mendapatkan kunci penyulitan yang kuat:<br>
</p>

<pre class="brush:php;toolbar:false">async function getCryptoKey(password) {
    const encoder = new TextEncoder();
    const keyMaterial = encoder.encode(password);
    return crypto.subtle.importKey(
        'raw',
        keyMaterial,
        { name: 'PBKDF2' },
        false,
        ['deriveKey']
    );
}

async function deriveKey(password, salt) {
    const keyMaterial = await getCryptoKey(password);
    return crypto.subtle.deriveKey(
        {
            name: 'PBKDF2',
            salt: salt,
            iterations: 100000,
            hash: 'SHA-256'
        },
        keyMaterial,
        { name: 'AES-GCM', length: 256 },
        false,
        ['encrypt', 'decrypt']
    );
}

Fungsi Penyulitan

Sulitkan teks dengan kata laluan:

async function encryptText(text, password) {
    const encoder = new TextEncoder();
    const salt = crypto.getRandomValues(new Uint8Array(16));
    const iv = crypto.getRandomValues(new Uint8Array(12));
    const key = await deriveKey(password, salt);

    const encrypted = await crypto.subtle.encrypt(
        { name: 'AES-GCM', iv: iv },
        key,
        encoder.encode(text)
    );

    return {
        cipherText: arrayBufferToHex(encrypted),
        iv: arrayBufferToHex(iv),
        salt: arrayBufferToHex(salt)
    };
}

Fungsi Penyahsulitan

Nyahsulit teks dengan kata laluan yang sama:

async function decryptText(encryptedData, password) {
    const { cipherText, iv, salt } = encryptedData;
    const key = await deriveKey(password, hexToArrayBuffer(salt));

    const decrypted = await crypto.subtle.decrypt(
        { name: 'AES-GCM', iv: hexToArrayBuffer(iv) },
        key,
        hexToArrayBuffer(cipherText)
    );

    const decoder = new TextDecoder();
    return decoder.decode(decrypted);
}

Contoh Penggunaan

Mari lihat cara menggunakan fungsi ini:

function arrayBufferToHex(buffer) {
    return [...new Uint8Array(buffer)]
        .map(byte => byte.toString(16).padStart(2, '0'))
        .join('');
}

function hexToArrayBuffer(hex) {
    const bytes = new Uint8Array(hex.length / 2);
    for (let i = 0; i 




<hr>

<h2>
  
  
  Amalan Terbaik Keselamatan
</h2>

<ol>
<li>
<strong>Gunakan Kata Laluan yang Teguh</strong>: Penyulitan hanya selamat seperti kata laluan yang anda gunakan.</li>
<li>
<strong>Simpan Garam dan IV Dengan Selamat</strong>: Sentiasa simpan garam dan iv bersama data anda yang disulitkan.</li>
<li>
<strong>Elakkan Rahsia Pengekodan Keras</strong>: Jangan sekali-kali kod keras data atau kata laluan sensitif dalam pangkalan kod anda.</li>
<li>
<strong>Gunakan HTTPS</strong>: Pastikan aplikasi anda menggunakan HTTPS untuk melindungi data dalam transit.</li>
</ol>


<hr>

<p>Menyulitkan maklumat sensitif seperti kunci API ialah langkah asas dalam melindungi aplikasi anda.  Saya menggunakan ini untuk kunci API kebanyakannya.</p>


          

            
        

Atas ialah kandungan terperinci Penyulitan dan Penyahsulitan Teks Selamat dengan JavaScript Vanila. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!