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

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

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

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

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

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

---

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

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

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



<h3>
  
  
  비밀번호에서 키 파생
</h3>

<p>PBKDF2를 사용하여 강력한 암호화 키를 파생하세요.<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']
    );
}

암호화 기능

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

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 




<hr>

<h2>
  
  
  보안 모범 사례
</h2>

<ol>
<li>
<strong>강력한 비밀번호를 사용하세요</strong>: 암호화는 사용하는 비밀번호만큼 안전합니다.</li>
<li>
<strong>소금과 IV를 안전하게 보관</strong>: 항상 암호화된 데이터와 함께 소금과 IV를 저장하세요.</li>
<li>
<strong>비밀 하드코딩 방지</strong>: 코드베이스에 민감한 데이터나 비밀번호를 하드코딩하지 마세요.</li>
<li>
<strong>HTTPS 사용</strong>: 애플리케이션이 HTTPS를 사용하여 전송 중인 데이터를 보호하는지 확인하세요.</li>
</ol>


<hr>

<p>API 키와 같은 민감한 정보를 암호화하는 것은 애플리케이션 보안을 위한 기본 단계입니다.  저는 주로 API 키에 이것을 사용합니다.</p>


          

            
        

위 내용은 바닐라 JavaScript를 사용한 안전한 텍스트 암호화 및 복호화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!