[사이드프로젝트][x509Lab] 브라우저에서 CSR 굽고 파싱하기 (OpenSSL 명령어 안 치려고 만듦)

안녕하세요! 낮에는 차량용 임베디드 SW를 개발하고, 밤에는 플러터나 리액트로 웹 툴을 깎고 있는 로켓다람쥐입니다.

최근에 브라우저에서 X.509 인증서 체인을 그리는 x509Lab이라는 툴을 만들어 운영 중인데요. 이번 v1.4.0 업데이트로 꽤 유용한 기능을 하나 붙여서 공유해 봅니다.

바로 CSR(인증서 발급 요청서) 생성 및 파싱 기능입니다.

인프라 세팅하시거나 사내망 인증서 작업하실 때 터미널 띄워놓고 openssl req -new... 명령어 많이 치시잖아요? 속성값 헷갈려서 구글링하고, 만들어진 CSR 확인한다고 또 -text -noout 옵션 넣어서 쳐보는 그 과정이 너무 귀찮아서 UI로 빼버렸습니다.

1. Generate CSR (생성)

모달창에서 CN, O, OU, 국가 코드 같은 Subject 정보부터 SAN(DNS/IP)까지 텍스트박스에 넣고 버튼만 누르면 CSR과 개인키가 쌍으로 떨어집니다. 특히 제가 임베디드 현업에 있다 보니, 단순 웹서버용뿐만 아니라 차량용 ECU 인증서(OTA, V2X용) 테스트에도 쓸 수 있도록 Key Usage와 Extended Key Usage(EKU)를 체크박스로 디테일하게 선택할 수 있게 구현했습니다.

2. Parse CSR (파싱)

반대로 이미 만들어진 CSR 내용이 궁금할 땐, 파싱 탭에 텍스트를 복붙하면 안에 들어있는 Subject DN 정보나 알고리즘, 확장 속성들을 한글화된 깔끔한 UI로 파싱해서 보여줍니다.

모든 과정은 서버 전송 없이 프론트엔드단(Web Crypto API)에서만 돌아가니 실무 테스트용으로 쓰셔도 키 유출 걱정은 안 하셔도 됩니다.

OpenSSL 명령어 치는 거 지겨우셨던 인프라, 보안, 혹은 IoT 개발자분들 계시면 로컬 테스트하실 때 요긴하게 써보시길 바랍니다!

*서비스 링크: https://x509lab.vercel.app

*네이버 블로그 링크 : https://blog.naver.com/hjinha2/224269734430

버그 제보나 '이런 기능도 있으면 좋겠다' 하시는 부분 피드백 주시면 열심히 반영하겠습니다. 감사합니다!