새해에는 프론트엔드 암호화에 대해 알아봅시다!

프론트엔드를 보호하려면 먼저 로그인 비밀번호, 이름, ID 번호, 휴대폰 번호 및 기타 정보를 암호화한 다음 인터페이스를 통해 백엔드로 전달해야 하는 경우가 많으므로 암호화 알고리즘 중 가장 일반적으로 사용되는 RSA(비대칭 암호화 알고리즘) 및 AES(대칭 암호화 알고리즘)를 이해해야 합니다.

설치 종속성

AES 암호화 설치 crypto-js

RSA 암호화는 jsencrypt 또는 node-rsa를 설치합니다.

jsencrypt는 공개 키 암호화->개인 키 복호화만 가능하며, 개인 키 암호화->공개 키 복호화는 불가능합니다. 노드-rsa는 공개 키 암호화->개인 키 복호화만 가능하며, 개인 키 암호화->공개 키 복호화도 가능합니다.

npm install jsencrypt
npm install node-rsa
npm install @types/node-rsa -D

secret.js암호화 방법

import CryptoJS from 'crypto-js/crypto-js'
import { JSEncrypt } from 'jsencrypt'
// const KEY = CryptoJS.enc.Utf8.parse('666666'); // '666666' 백엔드와 일관성 유지
// const IV = CryptoJS.enc.Utf8.parse('888888'); // '888888' 백엔드와 일관성 유지
// AES암호화 : 문자열 키 iv 반환 base64
export function AESEncrypt(str, keyStr, ivStr) {
 // 일반적으로 인터페이스에서 가져오는 문자열 키
 let key = ''
 let iv = ''
 if (keyStr && ivStr) {
 key = CryptoJS.enc.Utf8.parse(keyStr)
 iv = CryptoJS.enc.Utf8.parse(ivStr)
 }
 const srcs = CryptoJS.enc.Utf8.parse(str)
 var encrypted = CryptoJS.AES.encrypt(srcs, key, {
 iv: iv,
 // mode: CryptoJS.mode.ECB,
 mode: CryptoJS.mode.CBC, // mode 백엔드와 일관성 유지
 padding: CryptoJS.pad.Pkcs7,
 })
 return CryptoJS.enc.Base64.stringify(encrypted.ciphertext)
}
// AES 해독 : 문자열 키 iv 반환 base64
export function AESDecrypt(str, keyStr, ivStr) {
 let key = ''
 let iv = ''
 if (keyStr && ivStr) {
 key = CryptoJS.enc.Utf8.parse(keyStr)
 iv = CryptoJS.enc.Utf8.parse(ivStr)
 }
 const base64 = CryptoJS.enc.Base64.parse(str)
 const src = CryptoJS.enc.Base64.stringify(base64)
 var decrypt = CryptoJS.AES.decrypt(src, key, {
 iv: iv,
 // mode: CryptoJS.mode.ECB,
 // mode: CryptoJS.mode.BCB, // 일관성
 mode: CryptoJS.mode.CBC, // 일관성
 padding: CryptoJS.pad.Pkcs7
 })
 var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
 return decryptedStr.toString()
}
// ras 공개 키 암호화
export const RSAEncrypt = (str) => {
 const crypt = new JSEncrypt({ default_key_size: 1024 })
 const publickKey = ' 
 crypt.setPublicKey(publickKey)
 // 백엔드는 공개 키 문자열을 생성하여 프론트엔드 코드에 넣거나 인터페이스에서 반환합니다.
 return crypt.encrypt(str)
}
// ras 개인 키 복호화
export const RSADecrypt = (str) => {
 const crypt = new JSEncrypt({ default_key_size: 1024 })
 const privkey = ' 
 crypt.setPrivateKey(privkey)
 return crypt.decrypt(str)
}
// rsa 개인 키 암호화
export const RSAEncrypt2 = (str) => {
 const privkkey = ' 
 const privkey = `-----BEGIN PRIVATE KEY-----
${privkkey}
-----END PRIVATE KEY-----`
 const NodeRSA = require('node-rsa')
 const key = new NodeRSA(privkey)
 return key.encryptPrivate(str, 'base64') //  
}
// rsa 공개 키 복호화
export const RSADecrypt2 = (str) => {
 const publickKey = ' 
 const publicKey = `-----BEGIN PUBLIC KEY-----
${publickKey}
-----END PUBLIC KEY-----` // 공개키를 캡슐화하고 접두사와 접미사를 추가합니다.
 const NodeRSA = require('node-rsa')
 const key = new NodeRSA(publicKey)
 return key.decryptPublic(str, 'utf8') //  
}

대칭 암호화 알고리즘과 비대칭 암호화 알고리즘, 어떻게 선택하나요?

사용 프로세스

const getStr = async () => {
 try {
 const res = await api1() //  
 if (res.status === 0 && res.data) {
 const resapi2 = await api2({ a1: RSADecrypt(res.data.a1) }) // 인터페이스 2는 rsa로 암호화된 aes 키를 가져옵니다.
 if (resapi2.status === 0 && resapi2.data) {
 const result = AESDecrypt(res.data.str, RSADecrypt(resapi2.data.key), RSADecrypt(resapi2.data.iv))
 alert(result)
 }
 }
 } catch (e) {
 console.log(e)
 }
}

또는 더 간단하게, 백엔드가 인터페이스를 통해 암호화되지 않은 ras 공개 키를 직접 반환한 다음 프론트엔드에서 메시지를 암호화하여 JSEncrypt 공개 키를 사용하여 백엔드로 전달합니다.