보안 중심 정적 포트폴리오 사이트
공개해서는 안 되는 정보를 빌드 단계에서 자동으로 걸러내고 엄격한 CSP를 적용한 정적 포트폴리오 사이트를 만들어 공개했다.
무엇을 만들었나
보안을 강점으로 내세우는 개발자 포트폴리오인 만큼 사이트 자체도 보안 기준을 지키도록 만들었다. 확정된 디자인 시안과 공개용 데이터를 정적 사이트로 옮기고, 공개 문구에 이메일·IP·내부 주소·로컬 경로 같은 정보가 섞이면 빌드가 멈추게 했다. 데이터 파일만 바꿔 다시 빌드하면 갱신되도록 설계했다.
구현 방식과 보안 설계는 ‘기술 상세’에 있습니다.
구조와 설계
Astro 정적 출력과 TypeScript strict로 만들고, UI 프레임워크 없이 작은 바닐라 TS 스크립트만 썼다. 데이터 스키마를 코드로 정의해 필수 필드 누락이나 타입 오류가 있으면 빌드가 실패한다. prebuild 단계의 공개 데이터 검사기는 모든 공개 문자열을 원본과 NFKC 정규화·서식 문자 제거본 양쪽으로 검사하며, 한국어 조사가 붙은 경우와 유사 도메인 오탐을 모두 표 형태 테스트로 고정했다. 인라인 코드 없는 default-src 'self' 기반 CSP와 보안 헤더를 적용하고, 빌드 산출물의 인라인 코드·외부 참조는 별도 스크립트로 검사한다. 분야 필터와 상세 탭은 점진적 향상으로 구현해 JS가 꺼져도 모든 내용이 보인다.
사용 기술
Astro (static), TypeScript strict, 바닐라 TypeScript, 글자 서브셋 자체 호스팅 글꼴, Node.js 검사 스크립트, Caddy, Cloudflare Web Analytics
보안·안정성 설계
- default-src 'self' 기반 엄격 CSP(인라인 코드 0)와 HSTS·nosniff·Referrer-Policy·Permissions-Policy 헤더를 적용했고, 404 오류 페이지에도 같은 보안 헤더가 붙게 했다.
- 공개 데이터 검사기가 이메일·IP 주소·루프백 주소·자기 도메인·로컬 경로·커밋 해시 형태·금지어를 찾으면 빌드를 멈춘다. 전각·제로폭 문자 우회를 막기 위해 원본과 정규화본을 모두 검사한다.
- 방문자 통계를 허용할 때 와일드카드 없이 스크립트 호스트와 전송 호스트 하나씩만 지시어별로 설정에 추가했다.
- 외부 링크는 새 탭과 noopener noreferrer로 열고, 링크 스킴은 mailto:와 https:만 허용했다.
- 점 파일과 헤더 설정 파일 요청을 차단하고, 글꼴을 자체 호스팅해 빌드 산출물의 외부 참조를 0건으로 유지했다.
- 설정 변경은 운영 서버를 재시작하지 않고, 로그·상태 경로를 분리한 임시 사본에서 실호출로 검증했다.
작업 기록
통계 비콘 최소 허용과 헬스체크 추가
엄격한 CSP를 유지한 채 방문자 통계의 스크립트 호스트와 전송 호스트 두 개만 허용하고, 헬스체크 경로가 200 JSON을 응답하도록 설정했다. 운영 서버는 건드리지 않고 임시 사본으로 헤더와 응답을 확인했으며 테스트 58개가 통과했다. 운영 서버 반영 여부는 이 작업에서 확인하지 못했다.
정적 사이트 구축과 공개 데이터 검사기
디자인 시안과 공개용 데이터를 Astro 정적 사이트 16페이지로 옮기고, 공개해서는 안 되는 정보가 섞이면 빌드를 멈추는 검사기를 붙였다. 독립 검수 두 차례의 지적을 반영하며 테스트가 15개에서 28개로 늘었고, 실데이터 오탐은 0건이었다.
이 페이지는 작업 기록 문서 2건을 바탕으로 정리했습니다. 고객 정보, 접속 주소, 비밀값은 공개 전에 걸러 냅니다.