[React] OpenSSL을 이용한 HTTPS 환경 구축하기

서론

이번 글에서는 오픈소스 OpenSSL 패키지를 이용하여 자체 인증서를 생성하고 해당 인증서를 리액트에 적용하여 HTTPS 환경으로 클라이언트를 실행하는 방법을 알아보고자 한다.

 

OpenSSL 이란?

OpenSSL은 오픈 소스로 개발된 암호 및 보안 라이브러리이다. OpenSSL은 다양한 암호화 알고리즘과 프로토콜을 구현하여 네트워크 통신 간 데이터를 보호하는데 사용된다.

 

다음 내용은 OpenSSL 에서 제공하는 기능 목록이다.

1. 암호화 및 복호화: OpenSSL은 대표적인 대칭 및 비대칭 암호화 알고리즘을 제공하여, 데이터를 암(복)호화할수 있다. 대표적으로는 AES, RSA, DES, Triple DES 등의 알고리즘을 제공한다.
2. 디지털 서명: OpenSSL은 디지털 서명을 생성하고 검증하는 기능을 제공하여, 메시지의 무결성을 보호한다.
3. SSL/TLS 프로토콜 구현: OpenSSL은 SSL (Secure Sockets Layer) 및 TLS (Transport Layer Security) 프로토콜을 제공하여 네트워크 통신 보안성을 향상시킨다.
4. 서버 및 클라이언트 인증: OpenSSL은 X509 인증서를 사용하여 서버 및 클라이언트 간 상호 인증을 지원한다.
5. 암호 해싱: OpenSSL은 다양한 해싱 알고리즘을 지원하여 데이터의 무결성을 보장한다.
   대표적으로 SHA-1, SHA-256, SHA-512 등의 알고리즘이 있습니다.

본론

먼저, 자체 인증서를 생성하기 위한 스크립트를 만들어보자.

#!/bin/bash

# Create RSA Key
openssl genrsa -aes256 -out rootca.key 2048

chmod 600 rootca.key

# Creating a Configuration File to Use for CSR Files
cat > rootca.conf <<EOL
[ req ]
default_bits            = 2048
default_md              = sha1
default_keyfile         = rootca.key
distinguished_name      = req_distinguished_name
extensions              = v3_ca
req_extensions = v3_ca

[ v3_ca ]
basicConstraints       = critical, CA:TRUE, pathlen:0
subjectKeyIdentifier   = hash
keyUsage               = keyCertSign, cRLSign
nsCertType             = sslCA, emailCA, objCA

[ req_distinguished_name ]
countryName                     = Country Name (2 letter code)
countryName_default             = KR
countryName_min                 = 2
countryName_max                 = 2

organizationName                = Organization Name (eg, company)
organizationName_default        = TEST

organizationalUnitName          = Organization Name (eg, company)
organizationalUnitName_default  = TEST

# SSL domain
commonName                     = Common Name (eg, your name or your server's hostname)
commonName_default             = Self Signed CA
commonName_max                 = 64
EOL

# Create CSR file
openssl req -new -key rootca.key -out rootca.csr -config rootca.conf

# Craete self signed certification
openssl x509 -req -days 365 -extensions v3_ca -set_serial 1 -in rootca.csr -signkey rootca.key -out rootca.crt -extfile rootca.conf

# Create Root CA certification
openssl x509 -text -in rootca.crt

# Delete Configure files
rm -rf rootca.conf

# replace key, crt to pem files
openssl rsa -in rootca.key -text > rootca-key.pem
openssl x509 -inform PEM -in rootca.crt > rootca-crt.pem

 

위와 같은 내용을 담고있는 build.sh 파일을 생성해준다.

다음으로는 chmod 777 build.sh 명령어를 통해 쉘스크립트 파일을 실행 가능하도록 만든다.

 

쉘스크립트 파일을 실행하여 rootCA 인증서를 생성한다.

$ ./build.sh

 

 

• pass phrase 문구가 나오는 부분은 인증서를 생성하기 위해 사용자가 사용할 비밀번호를 입력한다.
• Country Name, Organization Name, Common Name은 사용자 소요에 맞게 작성한다. (스크립트 내 Default 설정 되어있음)

인증서 생성이 완료되면 총 5개의 파일이 만들어질 것이다.

• rootca.crt / rootca-crt.pem / rootca.csr / rootca.key / rootca-key.pem
• rootca-crt.pem 및 rootca-key.pem 파일은 rootca.crt 및 rootca.key 파일을 기반으로 생성된 파일이므로 인증서 내 내용은 동일하다.

리액트에 인증서 적용하기

package.json 파일을 열어 아래 내용을 scripts 부분에 추가한다.

• 참고로 2개의 pem 파일은 package.json 파일이 존재하는 경로에서 cert 라는 디렉토리를 만들고, 해당 디렉토리 안에 위치시켰다.

"scripts": {
    "start:windows": "HTTPS=true SSL_CRT_FILE=./cert/rootca-crt.pem SSL_KEY_FILE=./cert/rootca-key.pem react-scripts start",
  },

 

다음 명령어를 통해 리액트 클라이언트를 실행한다.

$  npm run start:windwos

실행 결과

리액트 클라이언트가 정상적으로 실행되면, HTTPS 경로를 통해 접속이 가능하다는 메세지를 확인할 수있다.