보안 문서 뷰어 삽입: 프론트엔드 개발자들이 자주 놓치는 7가지 필수 기능
PDF, PPT, 청구서 등을 표시하는 세련된 UI를 배포할 때 보통 디자인, 반응성, 로드 시간에 집중합니다. 그러나 간과되는 부분은 문서가 서버에서 사용자의 브라우저로 어떻게 전달되는가입니다. 한 번의 실수만으로도 견고한 애플리케이션이 데이터 유출 경로가 될 수 있습니다.
이 가이드에서는 프라이버시 우선 문서 뷰어를 통합할 때 바로 사용할 수 있는 7가지 보안 중심 기능을 살펴봅니다. 이 체크리스트는 불필요한 복잡성을 추가하지 않고 임베드를 강화하고자 하는 프론트엔드 엔지니어를 위해 작성되었습니다.
1. 문서 스트림의 종단 간 암호화
왜 중요한가
HTTPS를 통해 파일을 제공하더라도, 손상된 브라우저 확장 프로그램이나 응답을 뷰어에 전달하기 전에 읽는 악성 스크립트에 의해 원시 문서가 가로채질 수 있습니다.
구현 방법
| 단계 | 작업 |
|---|---|
| 서버 측 암호화 | 파일을 저장하거나 스트리밍하기 전에 암호화합니다(AES‑256‑GCM이 좋은 선택입니다). |
| 전송 보안 | TLS 1.3을 통해 암호화된 블롭을 전송합니다. |
| 클라이언트 측 복호화 | 암호화된 스트림을 받아 메모리에서 복호화하고 평문을 바로 뷰어 캔버스에 전달하는 Web Worker를 실행합니다. |
| 키를 절대 노출하지 않기 | 복호화 키를 짧은 수명의 서버 생성 토큰에 보관합니다(기능 #4 참조). |
뷰어가 렌더링될 때까지 문서는 네트워크나 메인 스레드에서 평문으로 노출된 적이 없습니다.
2. Content‑Security‑Policy (CSP) 화이트리스트
위험
느슨한 CSP는 공격자가 악성 스크립트를 삽입하거나 뷰어 캔버스 데이터를 읽을 수 있는 위험한 리소스를 로드하도록 허용합니다.
핵심 포인트
- ‘unsafe‑inline’ 및 ‘unsafe‑eval’ 스크립트가 금지됩니다.
- 뷰어의 CDN(또는 자체 호스팅 번들)만 JavaScript를 제공하도록 허용합니다.
- 프레임은 신뢰된 뷰어 도메인으로 제한됩니다.
엄격한 CSP는 임베드를 호스팅하는 페이지의 공격 표면을 크게 줄여줍니다.
3. iframe 샌드박스를 통한 Same‑Origin 격리
샌드박스가 필요한 이유
CSP가 적용돼도 손상된 페이지가 뷰어의 DOM에 접근하려 할 수 있습니다. 격리된 <iframe>은 호스트 페이지가 명시적인 허가 없이 깨뜨릴 수 없는 보안 케이지를 만듭니다.
피해야 할 샌드박스 플래그
allow-top-navigation– 뷰어가 최상위 창을 탈취하는 것을 방지합니다.allow-popups– 피싱에 사용될 수 있는 예상치 못한 팝업을 차단합니다.
뷰어가 부모 페이지와 통신해야 할 경우(예: UI 동기화), 명시적인 출처 검사를 포함한 postMessage를 사용합니다.
4. 토큰 기반 접근 제어
직접 URL의 문제점
공개된 정적 URL은 링크를 가진 누구나 파일을 영구적으로 다운로드할 수 있게 합니다.
토큰은 서버 측에서 서명되므로 조작이 발생하면 요청이 무효화되고 뷰어는 로드를 거부합니다.
5. 워터마킹 및 동적 오버레이
목적
동적인 클라이언트 측 워터마크는 원본 파일을 변경하지 않고 책임 추적 레이어를 추가합니다.
구현 팁
- PDF 페이지 위에 위치하는 canvas 오버레이에 워터마크를 렌더링합니다.
- 세션의 이메일이나 무작위 UUID를 사용해 각 뷰어 인스턴스를 고유하게 만듭니다.
- 간단한 플래그로 오버레이를 토글하여 성능 오버헤드를 최소화합니다.
유출된 문서가 발견되면, 삽입된 식별자가 직접 원본을 가리킵니다.
6. 다운로드 및 인쇄 제한
브라우저 기본 동작
대부분의 브라우저는 캔버스를 이미지로 저장할 수 있는 오른쪽 클릭 컨텍스트 메뉴를 제공하여 사실상 문서를 내보낼 수 있게 합니다.
방어 플래그
| 뷰어 옵션 | 효과 |
|---|---|
disableDownload: true | 모든 “다운로드” UI를 숨기고 Ctrl+S 단축키를 비활성화합니다. |
disablePrint: true | 임베드에 대해 Ctrl+P가 인쇄 대화 상자를 열지 못하도록 합니다. |
preventContextMenu: true | 뷰어 영역 위의 기본 컨텍스트 메뉴를 차단합니다. |
이 옵션들을 iframe 샌드박스와 결합하면 호스트 페이지가 JavaScript를 통해 이를 우회할 수 없습니다.
7. 감사 로그 및 이벤트 훅
가시성의 가치
가장 견고한 뷰어라도 오용될 수 있습니다. 누가 언제 어떤 문서를 열었고 어떤 행동을 했는지 로그를 남기면 포렌식 추적이 가능합니다.
실시간 로그를 통해 단일 사용자가 몇 초 안에 수십 개의 기밀 PDF를 열는 등 이상 패턴을 감지하고 경고나 권한 회수를 트리거할 수 있습니다.
결론
문서 뷰어를 삽입하는 것은 단순히 UI 문제만이 아니라 보안 책임입니다. 종단 간 암호화, 엄격한 Content‑Security‑Policy, 격리된 iframe 샌드박스, 토큰 기반 접근, 동적 워터마크, 다운로드/인쇄 제한, 그리고 포괄적인 감사 로그를 도입하면 단순한 임베드를 견고하고 침해에 강한 컴포넌트로 만들 수 있습니다.
다음 앱을 안전하게 보호할 준비가 되셨나요?
- 무료 SDK를 https://doconut.com에서 다운로드 – 플러그인이나 추가 종속성이 없습니다.
- 7가지 체크리스트를 풀 리퀘스트 템플릿에 복사하여 보안을 습관화하세요.
- 첫 번째 기능을 오늘 구현하고 댓글에 진행 상황을 공유하세요—커뮤니티 책임감이 모두를 안전하게 합니다.
보안을 유지하고, 빠르게 작업하며, 즐거운 코딩 되세요!