바닐라 JavaScript를 사용한 안전한 텍스트 암호화 및 복호화-JS 튜토리얼-php.cn

바닐라 JavaScript를 사용한 안전한 텍스트 암호화 및 복호화

Linda Hamilton

풀어 주다： 2024-12-08 03:37:10

원래의

1038명이 탐색했습니다.

Secure Text Encryption and Decryption with Vanilla JavaScript

오늘날의 디지털 시대에는 API 키, 비밀번호, 사용자 데이터와 같은 민감한 정보를 보호하는 것이 그 어느 때보다 중요합니다. 강력한 암호화 및 암호 해독 전략을 통해 무단 액세스를 방지하고 데이터 기밀성을 보장할 수 있습니다. 이 블로그 게시물에서는 현대적이고 안전한 접근 방식을 위해 Web Crypto API를 활용하여 바닐라 JavaScript를 사용하여 텍스트를 암호화하고 해독하는 방법을 살펴보겠습니다.

암호화를 사용하는 이유는 무엇입니까?

암호화는 읽을 수 있는 데이터(일반 텍스트)를 올바른 키로 해독해야만 읽을 수 있는 스크램블 형식(암호문)으로 변환합니다. 이렇게 하면 누군가 암호화된 데이터를 가로채더라도 키가 없으면 의미가 없습니다. 견고한 암호화 메커니즘은 다음을 보호합니다.

프런트엔드 코드에 저장된 API 키
민감한 사용자 정보.
안전하지 않은 채널을 통해 전송되는 모든 데이터.

JavaScript에서 이를 안전하게 구현하는 방법을 살펴보겠습니다.

AES-GCM을 사용한 암호화 및 복호화

암호화와 무결성 검증을 모두 제공하는 최신 표준인 AES-GCM(Advanced Encryption Standard - Galois/Counter Mode)을 사용하겠습니다. 단계는 다음과 같습니다.

비밀번호 파생: PBKDF2(비밀번호 기반 키 파생 기능 2)를 사용하여 비밀번호에서 보안 키를 파생합니다.
Salt 및 IV: 각 암호화에 대해 무작위 솔트(비밀번호 파생을 고유하게 만들기 위해) 및 iv(초기화 벡터)를 생성합니다.
암호화: AES-GCM을 사용하여 일반 텍스트를 암호화합니다.
복호화: 동일한 비밀번호와 salt/iv를 사용하여 암호문을 복호화합니다.

코드 구현

전체 JavaScript 구현은 다음과 같습니다.

변환을 위한 유틸리티

손쉬운 데이터 저장 및 검색을 위해 ArrayBuffer와 16진수 간에 변환합니다.

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 < hex.length; i += 2) {
        bytes[i / 2] = parseInt(hex.substr(i, 2), 16);
    }
    return bytes.buffer;
}

로그인 후 복사

비밀번호에서 키 파생

PBKDF2를 사용하여 강력한 암호화 키를 파생하세요.

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

로그인 후 복사

암호화 기능

비밀번호로 텍스트 암호화:

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

로그인 후 복사

복호화 기능

동일한 비밀번호로 텍스트 복호화:

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

로그인 후 복사

사용 예

다음 기능을 사용하는 방법을 살펴보겠습니다.

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 < hex.length; i += 2) {
        bytes[i / 2] = parseInt(hex.substr(i, 2), 16);
    }
    return bytes.buffer;
}

로그인 후 복사