React

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

limsw 2024. 4. 12. 09:44
반응형

서론

이번 글에서는 오픈소스 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 경로를 통해 접속이 가능하다는 메세지를 확인할 수있다.