react native ) 암호화 키 관리 문제

아침부터 에러나는건 우리 예의가 아니지 

 

리엑트 네이티브로 개발하는 앱에서 결제 기능을 추가하는 것은 꽤나 일반적인 작업 중 하나인데 오늘 진짜 특이한 경험을 했다.

하지마 이 개새끼야 ~!!!!!

 

1. 문제 발견

결제 프로세스를 시작하자 마자 “암호화 키가 일치하지 않는다”라는 에러가 발생했다. 테스트해보니 사용자에게도 노출될 코드였다.

2. 초기분석

처음에는서버측에서 보내는 암호화 키와 클라이언트에서사용하는 암호화 키가 다르다고 생각했다. 서버 코드를 열고 관련 키 값들을 점검했다. 근데,,, 어,,, 둘다 암호화 키가 같다…?

3. 디버깅 시작

결제과정 코드를 꼼꼼히 살펴보았다. 하는 도중에 내가 이래서 js를 좋아한다는 걸 깨달았다. 읽기가 너무 편해

아무튼 암호화 모듈을 살펴보았는데, 네이티브 모듈로 구현되어있었다. js코드와 네이티브 코드간의 통신이 피요했다

4. 문제의 원인을 봤다.

암호화를 담당하는 부분의 로직을 보고 보고 보고 또 봤다. 아니 세상에. 암호화 키를 생성하고 저장하는 로직에 큰 문제점이 있었다. 암호화 키는 앱이 설치될때마다 생성되어야 하는데 이 키가 여러번 생성되어서 중복되는 문제가 있었다. 서버에서는 암호화된 데이터를 복호화할수 없었고, 이러한 문제가 생겨버린 것이다.

실제 코드는 아니지만 재현해보자면 이런 구조였다

import { NativeModules } from 'react-native';

const { EncryptionModule } = NativeModules;

class PaymentService {
  constructor() {
    this.encryptionKey = this.generateEncryptionKey();
  }

  generateEncryptionKey() {
    return EncryptionModule.generateKey();
  }

  makePayment(data) {
    const encryptedData = EncryptionModule.encrypt(data, this.encryptionKey);
    // ... 결제 로직
  }
}

‘PaymentService’클래스가 생성될때마다 ‘generateEncryptionKey’함수가 호출되어 암호화 키가 생성된다. 다른 모듈이나 컴포넌트에서 ‘PaymentService’를 여러번 초기화할 경우, 다양한 키 값들이 생성되었고, 그게 문제였던 것이다 !

ㅇ아ㅏ… 이마 한 번 짚고 다시 달린다.

1. 키 생성 로직 개선 : 암호화 키 생성 로직을 수정해 키가 한번만 생성되도록 만든다
2. 데이터베이스 키 저장 : 생성된 키를 로컬 데이터베이스에 저장하고 앱이 실행될때마다 해당 키를 불러와 사용하도록 로직을 바꿨다.
3. 키 동기화 : 서버와의 통신 시 생성된 키를 함께 전송하여 서버도 동일한 키를 사용하도록 했다.

import { NativeModules } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const { EncryptionModule } = NativeModules;

class PaymentService {
  constructor() {
    this.loadEncryptionKey();
  }

  async loadEncryptionKey() {
    let key = await AsyncStorage.getItem('encryptionKey');
    if (!key) {
      key = EncryptionModule.generateKey();
      await AsyncStorage.setItem('encryptionKey', key);
    }
    this.encryptionKey = key;
  }

  makePayment(data) {
    const encryptedData = EncryptionModule.encrypt(data, this.encryptionKey);
    // ... 결제 로직
  }
}

대충 이런 구조로 수정해주었다

• Singleton Pattern : ‘PaymentService’를 싱글톤 패턴으로 구현하여 인스턴스가 하나만 생성되도록하였다. 이렇게 하면 암호화 키도 한 번만 생성된다
• AsyncStorage : 생성된 암호화 키를 로컬에 저장하여 앱이 재시작될때마다 동일한 키를 사용하도록 했다. 이를 위해 @react-native-async-storage/async-storage 라이브러리를 사용했다
• 초기화 로직 변경 : ‘PaymentService’의 초기화 로직에서 암호화 키를 생성하는 대신, 로컬 데이터베이스에서 불러와 사용하도록 변경해주었다. 키가 없을 경우에만 새로 생성했다.
• 아마도 로컬로 저장하는것도 방법인 것 같다. 생성된 암호화 키는 로컬 데이터베이스, 예를 들면 AsyncStorage

암호화는 데이터 보호를 위해 꼭 필요한 과정이다. 특히 결제나 인증과 같은 중요한 트랜젝션에서는 데이터의 무결성을 보장하기 위해 암호화가 필수이다. 리엑트 네이티브에서도 이러한 암호하 처리가 필요하고, 암호화 키를 안전하게 관리하는 것 또한 중요한데,  진짜 나 정신차리자 .