build 결과물에서 정보를 숨기고 싶을 때

npm library를 만들어서 배포했는데, 빌드 결과물인 index.es.js 파일에 숨기고 싶은 URL이 포함되어 있었다.

빌드 난독화를 해도, env파일에 변수를 넣어도 드러나는 건 당연히 그대로다.

 

(이게 노출된다고 해서 엄청 크리티컬 하진 않지만, 너무 적나라하게 드러나는 것이 불편한 상황)

 

// .env

VITE_SOCKET_URL=https://숨기고싶다.com

// socketInstance.ts

const url = import.meta.env.VITE_SOCKET_URL;

...


class SocketInstance {
  private static instance: SocketInstance;
  public socket: Socket;

  private constructor() {
    // env 파일에 들어있는 url 값을 불러옴
    this.socket = io(url);
  }

  public static getInstance(): SocketInstance {
    if (!SocketInstance.instance) {
      SocketInstance.instance = new SocketInstance();
    }

    return SocketInstance.instance;
  }
}

 

빌드 결과물 파일

 

 

 

 

 

해결방법

우짜까 고민하다가, 암호화 복호화 개념을 활용해보기로 했다.

 

1) 기존 .env에 들어있는 "숨기고싶다.com" 변수를 .env.local 파일로 옮긴다.

 

2) preprocessEnv.js 파일을 새로 만들고, 빌드돌릴 때 이 파일을 거쳐가도록(?) 한다.

이 파일은 "숨기고싶다.com" 값을 가져와 암호화하고, 이걸 해독할 key값을 만들어주는 역할을 한다.

그 후 [.env.local에서 가져온 값을 암호화한 결과물 + key값]을 .env로 넘겨준다.

// preprocessEnv.js

import cryptoUtils from './utils/cryptoUtils.ts';
import fs from 'fs';
import dotenv from 'dotenv';

/* .env.local 파일에있는 오리지널socketURL */
dotenv.config({ path: '.env.local' });
const originalUrl = process.env.VITE_SOCKET_URL || '';

/* 암호화할 키값 생성 + 오리지널socketURL 암호화 */
const key = cryptoUtils.generateKeys().publicKey;
const encryptedUrl = cryptoUtils.encrypt(originalUrl, key);

/* 암호화된 socketURL을 .env파일에 저장 */
fs.writeFileSync('.env', `VITE_SOCKET_ENCRYPTED_URL=${encryptedUrl}\nVITE_SOCKET_KEY=${key}`);

 

3) package.json의 build에서 "tsx ./src/preprocessEnv.js" 부분을 추가한다.

// package.json

  "scripts": {
    ...
    "build": "rm -rf dist && tsc -p ./tsconfig.node.json && tsx ./src/preprocessEnv.js && vite build",
  },

 

 

4) 실제로 "숨기고싶다.com"값을 가져다 사용하는 socketInstance.ts 파일에선 암호화된 값과 키값을 아래와 같이 가져다 쓰도록 한다.

const encryptedSocketUrl = import.meta.env.VITE_SOCKET_ENCRYPTED_URL || '';
const key: string = import.meta.env.VITE_SOCKET_KEY || '';
const decryptedSocketUrl = cryptoUtils.decrypt(encryptedSocketUrl, key);

...

class SocketInstance {
  private static instance: SocketInstance;
  public socket: Socket;

  private constructor() {
    // 복호화된 url값
    this.socket = io(decryptedSocketUrl);
  }

  public static getInstance(): SocketInstance {
    if (!SocketInstance.instance) {
      SocketInstance.instance = new SocketInstance();
    }

    return SocketInstance.instance;
  }
}

 

 

빌드 결과물

 

 

const P1 값이 기존에 "숨기고싶다.com" 이라고 적나라하게 드러나있는 부분이었는데, 이상한 string 값으로 대체되어 보인다.

(key값도 함께 들어있어서 뭐 마음먹으면 복호화할 수는 있겠지만, 난독화된 파일에서 저걸 굳이 까보는 노력을... 하려나?)