보안 문서 뷰어 삽입: 프론트엔드 개발자들이 자주 놓치는 7가지 필수 기능
2026. 3. 6.

보안 문서 뷰어 삽입: 프론트엔드 개발자들이 자주 놓치는 7가지 필수 기능

안전한 문서 뷰어 삽입을 위해 반드시 갖추어야 할 7가지 보안 기능—암호화, CSP, 샌드박스 iframe, 토큰 인증, 워터마크, 감사 로그 등—을 배웁니다.

PDF, PPT 또는 인보이스와 같은 파일을 보여주는 세련된 UI를 출시할 때는 보통 디자인, 반응성, 로드 시간에 집중합니다. 하지만 간과하기 쉬운 부분은 문서가 서버에서 사용자의 브라우저로 어떻게 전달되는가 입니다. 한 번의 실수만으로도 견고해 보이던 애플리케이션이 데이터 유출 경로가 될 수 있습니다.

이 가이드에서는 프라이버시‑우선 문서 뷰어를 통합할 때 바로 적용할 수 있는 일곱 가지 보안‑중심 기능을 살펴봅니다. 이 체크리스트는 불필요한 복잡성을 추가하지 않으면서 임베드를 강화하고자 하는 프론트엔드 엔지니어를 위해 작성되었습니다.


1. 문서 스트림의 종단 간 암호화

왜 중요한가

HTTPS로 파일을 제공하더라도, 원시 문서는 손상된 브라우저 확장 프로그램이나 응답을 뷰어에 전달하기 전에 읽어들이는 악성 스크립트에 의해 가로채질 수 있습니다.

구현 방법

단계작업
Server‑side encryption파일을 저장하거나 스트리밍하기 전에 암호화합니다 (AES‑256‑GCM이 좋은 선택입니다).
Transport security암호화된 블롭을 TLS 1.3으로 전달합니다.
Client‑side decryption암호화된 스트림을 수신하고 메모리에서 복호화한 뒤 평문을 바로 뷰어의 캔버스로 전달하는 Web Worker를 실행합니다.
Never expose the key복호화 키를 짧은 수명의 서버‑생성 토큰에 보관합니다 (Feature #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. 다운로드 및 인쇄 제한

브라우저 기본 동작

대부분의 브라우저는 오른쪽 클릭 컨텍스트 메뉴를 제공하여 캔버스를 이미지로 저장할 수 있게 하며, 이는 사실상 페이지를 내보내는 행위가 됩니다.

뷰어가 할 수 있는 것과 할 수 없는 것

문서 뷰어 SDK는 툴바에서 내보내기 동작을 숨길 수 있으며, Doconut 기능 카탈로그는 브라우저 인쇄와 PDF 내보내기를 제공 여부에 따라 선택할 수 있는 기능으로 나열합니다. 옵션 이름은 설치한 빌드의 문서와 비교해 확인해야 하며, 기사(이 문서 포함)와는 다를 수 있습니다. 구성 키는 버전마다 변경됩니다.

더 중요한 점은 툴바 설정으로는 해결되지 않는 부분입니다. 버튼을 숨기는 것은 워크플로우 선택일 뿐 접근 제어가 아닙니다. 서버는 페이지, 썸네일, 내보내기, 다운로드 및 인쇄 요청을 각각 별도로 인증해야 합니다. 화면에 픽셀이 표시되면 스크린샷, 카메라, 접근성 도구 등을 통해 복제될 수 있기 때문에, 이를 완전히 차단한다는 주장은 실현 불가능한 약속입니다.


7. 감사 로그 및 이벤트 훅

가시성의 가치

가장 견고한 뷰어라도 오용될 수 있습니다. 누가 언제 어떤 문서를 열었고 어떤 행동을 수행했는지 기록하면 포렌식 추적이 가능합니다.

실시간 로그를 통해 몇 초 안에 수십 개의 기밀 PDF를 열어보는 등 이상 패턴을 감지하고, 알림이나 권한 회수를 트리거할 수 있습니다.


결론

문서 뷰어를 임베드하는 것은 UI뿐 아니라 보안 책임도 포함합니다. 문서 스트림 암호화, 엄격한 Content‑Security‑Policy, 격리된 iframe sandbox, 토큰 기반 접근, 동적 워터마크, 보호가 아닌 UX로 다루는 내보내기 제한, 그리고 감사 로그가 방어 가능한 임베드와 그렇지 않은 임베드를 구분합니다.

이 일곱 가지 중 두 가지는 어떤 뷰어를 선택하든 반드시 직접 관리해야 합니다: 권한 부여와 감사. 어떤 컴포넌트도 귀하의 테넌시를 대신해 결정을 내려줄 수 없습니다.

구현을 시작할 준비가 되었나요?

  1. 설치한 버전에 대한 공급업체 공식 문서부터 시작하십시오. Doconut의 경우 doconut.com — 패키지, 설정 가이드 및 샘플이 제공됩니다. 문서가 아닌 기사에서 구성 키를 복사하면 업그레이드 시 통합이 깨지는 원인이 됩니다.
  2. 보안 검토가 병합 전이 아니라 사고 후가 되지 않도록 7점 체크리스트를 풀 리퀘스트 템플릿에 포함하십시오.
  3. 먼저 부정적인 경우를 테스트하십시오: 다른 테넌트의 문서 식별자, 만료된 세션, 페이지 또는 내보내기 엔드포인트에 대한 직접 요청. 이러한 테스트가 실제 취약점을 찾아냅니다.