blog
로컬 HTTPS 개발 서버의 인증서 경고 해결하기
Front-end / Tooling#HTTPS#mkcert#Chrome#인증서
로컬 개발 서버를 HTTPS로 띄우면 자체 서명 인증서 때문에 NET::ERR_CERT_AUTHORITY_INVALID 경고가 뜬다. 경고를 무시하는 것보다 브라우저가 신뢰하는 로컬 인증서를 만드는 것이 가장 깔끔하다.
권장: mkcert로 신뢰할 수 있는 로컬 인증서 만들기
mkcert는 로컬 CA를 만들어 OS·브라우저 신뢰 저장소에 등록하고, 그 CA로 인증서를 발급한다.
# macOS
brew install mkcert
mkcert -install
# localhost와 모바일 테스트용 내부 IP를 함께 발급
mkcert localhost 127.0.0.1 192.168.0.10
생성된 *.pem, *-key.pem을 개발 서버 설정에 지정하면 경고 없이 접속된다. 모바일 기기에서도 경고를 없애려면 mkcert -CAROOT 위치의 rootCA.pem을 기기에 설치하고 신뢰 설정을 해야 한다.
임시 방법: 경고 무시
경고 화면에서 진행
경고 화면의 "고급 → localhost(으)로 이동(안전하지 않음)"을 누르면 해당 세션 동안 진행할 수 있다.
인증서 오류를 무시하는 별도 Chrome 프로필
# macOS
open -na "Google Chrome" --args --ignore-certificate-errors --user-data-dir=/tmp/chrome-dev
# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --ignore-certificate-errors --user-data-dir="%TEMP%\chrome-dev"
--user-data-dir로 평소 프로필과 분리해서 띄우고, 이 창으로는 개발 서버만 연다. 인증서와 무관한 --disable-web-security(CORS·동일 출처 정책 해제)는 함께 쓰지 않는다. 이 플래그를 켠 창으로 다른 사이트를 열면 보안 보호가 사라진다.
예전에 쓰던 chrome://flags/#allow-insecure-localhost 플래그는 최신 Chrome에서 제거되었다.