보안 문서 뷰어 삽입: 프론트엔드 개발자가 놓치기 쉬운 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 | 모든 “Download” UI를 숨기고 Ctrl+S 단축키를 비활성화합니다. |
disablePrint: true | Ctrl+P가 임베드에 대한 인쇄 대화 상자를 열지 못하도록 방지합니다. |
preventContextMenu: true | 뷰어 영역 위에서 기본 컨텍스트 메뉴를 차단합니다. |
이러한 설정을 iframe 샌드박스와 결합하면 호스트 페이지가 JavaScript를 통해 이를 우회할 수 없습니다.
7. 감사 로깅 및 이벤트 훅
가시성의 가치
가장 견고하게 하드닝된 뷰어조차도 오용될 수 있습니다. 누가 언제 어떤 문서를 열었는지, 어떤 행동을 수행했는지를 기록하면 포렌식 추적을 만들 수 있습니다.
실시간 로그를 통해 몇 초 안에 단일 사용자가 수십 개의 기밀 PDF를 열는 등 이상 패턴을 감지하고 경고나 권한 취소를 트리거할 수 있습니다.
결론
문서 뷰어를 임베드하는 것은 단순히 UI 문제만이 아니라 보안 책임입니다. 엔드‑투‑엔드 암호화, 엄격한 Content‑Security‑Policy, 격리된 iframe 샌드박스, 토큰 기반 접근, 동적 워터마크, 다운로드/인쇄 제한, 그리고 포괄적인 감사 로깅을 도입함으로써 간단한 임베드를 견고하고 침해에 강한 구성 요소로 바꿀 수 있습니다.
다음 앱을 보안할 준비가 되셨나요?
- 무료 SDK를 https://doconut.com 에서 다운로드하세요 – 플러그인이나 추가 의존성이 없습니다.
- 일곱 가지 체크리스트를 풀 리퀘스트 템플릿에 복사하여 보안을 습관화하세요.
- 오늘 첫 번째 기능을 구현하고 댓글에 진행 상황을 공유하세요—커뮤니티 책임감이 모두를 안전하게 합니다.
보안을 유지하고, 빠르게 작업하며, 즐거운 코딩 되세요!