링크 관리 기능 구현 실패

Question

링크 관리 기능 구현하기에서, 수업과 같이 네이버 추가하기를 했는데 오류가 났습니다. 아래 메시지가 떠서, 이 메시지를 클로드에게 제시하고 수정해달라고 했더니 최종 아래와 같이 답을 했습니다. #오류 대상 페이지를 불러오지 못했습니다. (fetch failed (self-signed certificate in certificate chain)) #수정에 대한 클로드 회신 아래와 같은 메시지로 회신 받았습니다. 그 에러는 앱 버그가 아니라 네이버 요청이 회사/보안 프록시(또는 백신의 HTTPS 검사)를 거치기 때문입니다. 왜 브라우저는 되고 서버는 안 되나 이런 프록시는 모든 HTTPS 사이트의 인증서를 회사 전용 루트 CA로 다시 서명합니다. Windows·Chrome은 그 CA를 신뢰하도록 IT가 설치해 놨지만, Next.js 서버(Node.js)는 OS 신뢰 저장소를 안 쓰고 자체 CA 목록만 사용합니다. 그래서 서버에서 fetch할 때만 인증서 체인이 "self-signed"로 보여 거부됩니다. 해결 방법 (택1) A. 회사 루트 CA를 Node에 알려주기 (권장, 안전) 1. 루트 CA를 .pem으로 확보: - IT에 요청하거나, - Chrome에서 https://www.naver.com 접속 → 주소창 자물쇠 → "인증서가 유효함" → 세부정보 탭 → 목록 맨 위(루트) 선택 → 내보내기 → Base64 X.509 (.pem)으로 저장 (예: C:\certs\corp-ca.pem) 2. dev 서버를 이 환경변수와 함께 실행: $env:NODE_EXTRA_CA_CERTS="C:\certs\corp-ca.pem"; npm run dev (NODE_EXTRA_CA_CERTS는 Node 시작 시점에 읽혀서 .env.local로는 안 됩니다. 셸에서 지정하거나 Windows 사용자 환경변수로 등록하세요.) B. 빠르게, 로컬 개발용으로만 (검증 끄기) $env:NODE_TLS_REJECT_UNAUTHORIZED="0"; npm run dev 즉시 해결되지만 dev 프로세스 전체의 TLS 검증이 꺼집니다. 커밋·배포에는 절대 사용하지 마세요. C. 회사 프록시가 아니라면 백신(Kaspersky/ESET/Avast 등)의 "HTTPS 검사/SSL 스캔" 기능이 원인일 수 있습니다. 그 기능을 끄면 됩니다. --- 원하시면 package.json에 "dev:cacert": "cross-env NODE_EXTRA_CA_CERTS=... next dev" 같은 스크립트를 추가해 드릴게요 (경로가 PC마다 달라서 기본 dev는 안 건드리는 게 좋습니다). 참고로 방금 라우트에 실제 Chrome User-Agent + Accept-Language: ko 헤더와 EUC-KR 디코딩도 넣어놔서, 위 방법으로 연결만 뚫리면 네이버의 봇 차단·한글 깨짐 없이 제목/설명/썸네일이 수집됩니다. ------------------------------ 최종 질문: 제가 회사에서 수업을 듣다보니 발생하는 문제 같은데, 회사에 뭔가 허가를 받아야 해결되는 문제라면 이 부분은 해결이 어려울 것 같습니다. 건너뛰어도 될지 모르겠습니다.

winterlood · Answer

안녕하세요 서주희님 이정환입니다. 말씀주신 내용을 보니 코드 문제는 아니고 회사 네트워크 때문에 생기는 현상이 명백한 것 같습니다. 링크 추가 기능 에는 사용자가 입력한 링크의 제목이나 썸네일을 불러오기 위해서, 해당 링크 주소로 요청을 보내 HTML 파일을 받아오는 과정이 있습니다. 그런데 회사 네트워크 망을 이용하는 특수한 상황에서는 이런 외부 서비스로 향하는 요청이 보안상의 이유로 거절되는 것 같습니다. 해결 방법은 여러가지가 있는데요 아래 제시드리는 방법 중 가장 주희님의 상황에 맞는 방법을 골라 이용하시면 되겠습니다 (혹시 다 마음에 안드시면 꼭 답글 부탁드려요! 어떻게든 더 나은 방법 계속 찾아볼게요) 방법 1 - 핫스팟 이용하기 (위험하지만 간단한 방법) 만약 이용하시는 PC가 와이파이를 사용할 수 있는 상황이라면 (노트북이라던가, 와이파이 연결 기능이 탑재된 데스크탑) 핸드폰 핫스팟을 이용해 잠깐 기능이 정상 작동하는지 테스트 해 보실 수 있습니다. 단 해당 방법은 회사 PC를 망 밖으로 빼내어 사용하는 것으로 회사 내 보안 규칙을 위반하는 행위가 될 수 있으니 확실히 괜찮은지 먼저 체크 해 보시는 걸 추천드립니다. 조금이라도 불확실하다면 아래의 방법을 이용해주세요 방법 2 - 링크 관리 기능은 집에서 테스트 해 보기 이 기능이 정상 작동하는지 확인만 하고 싶으시다면, 집에 있는 개인 PC나 개인 노트북에서 잠깐 실행해 보시면 됩니다. 회사 망을 안 거치기 때문에 코드를 하나도 고치지 않아도 그대로 동작합니다. 강의에서 안내드린 GitHub를 이용하시면 집에있는 다른 PC에도 동일한 코드와 버전 기록을 내려받으실 수 있으니 시도해보세요 😀 집에서 테스트 했을때 정상 작동한다면 이어서 배포까지 진행하시면 됩니다. 서비스를 배포하고 나면 이 문제는 자연스럽게 사라집니다. 배포 이후에는 링크의 HTML을 받아오는 요청이 주희님의 PC가 아니라 인터넷상에 올라간 서버에서 나가기 때문에, 회사 네트워크를 전혀 거치지 않게 되거든요. 그래서 배포된 주소로 접속하시면 회사에서도 링크 추가 기능이 문제없이 동작할 겁니다.