웹사이트 캡쳐 방어 

    
인프런 강의 캡쳐 방어

캡쳐 안되길래 신기했음.
웹인데도 
DRM 으로 강의 캡쳐를 막아서 캡쳐 도구를 감지하는게 신기

---


인프런 강의에서 캡쳐 방어가 되어 있는 걸 보면, 보안 수준을 꽤 신경 쓴 것 같네요. 웹 환경에서도 캡쳐를 막는 방법에는 여러 가지가 있는데, 보통 DRM(Digital Rights Management)이나 JavaScript 기반 방어 기법을 조합해서 사용하는 경우가 많아요.

### 📌 **웹에서 캡쳐 방어하는 방법들**

1.  **DRM 적용 (Widevine, PlayReady, FairPlay 등)**

    -   동영상 자체를 암호화하고, 특정 인증을 받은 환경에서만 재생되도록 설정.
    -   이 방식이면 캡쳐 소프트웨어에서도 녹화가 안 될 가능성이 큼.
    -   보통 비디오 스트리밍 서비스에서 사용.
2.  **CSS 및 JavaScript 방어**

    -   `pointer-events: none;`을 이용해 우클릭 및 개발자 도구 방지.
    -   `visibility:hidden` 같은 스타일을 사용하여 특정 조건에서 콘텐츠 숨기기.
    -   `oncontextmenu="return false;"`로 우클릭 방지.
3.  **Canvas Fingerprinting 및 Tamper Detection**

    -   `Canvas API`를 이용해 브라우저의 스크린샷 감지.
    -   DevTools에서 특정 키 입력을 감지하고 강제 종료하거나, `debugger` 키워드로 디버깅 방해.
4.  **Blur 처리 및 Overlay 적용**

    -   `backdrop-filter: blur(10px);` 등을 활용해 비인가 환경에서 흐리게 표시.
    -   화면에 투명한 레이어(Overlay)를 씌워 캡쳐 시 원하는 데이터가 보이지 않도록 함.
5.  **가상 환경 감지 및 종료**

    -   브라우저 내에서 `navigator.plugins`, `navigator.webdriver` 같은 속성을 활용해 가상 환경 탐지.
    -   특정 가상머신(예: Sandboxie, VM)에서 실행되면 콘텐츠 숨김.
6.  **Watermark 삽입**

    -   사용자 ID, IP, 시간 등의 정보를 워터마크로 삽입해서 유출 방지.
    -   영상이 캡쳐되더라도 추적 가능하도록 설계.

### 🧐 **웹인데도 캡쳐 방어가 가능한 이유?**

웹 기반이라도 캡쳐 방어가 되는 건 **DRM이 적용된 플레이어를 사용했을 가능성이 높음**.\
보통 **Widevine (Chrome) / PlayReady (Edge) / FairPlay (Safari)** 같은 DRM 솔루션을 쓰면, OS 레벨에서 캡쳐 및 녹화 기능을 차단할 수 있어요.

아마 **일반적인 F12 개발자 도구나 Chrome 확장 프로그램**으로는 우회하기 힘들도록 설계했을 듯.\
단순한 자바스크립트 방어가 아니라, 영상 자체가 DRM 보호를 받고 있을 가능성이 크네요.

혹시 어떤 방식으로 막혀 있는지 더 확인하고 싶으면, 개발자 도구를 열어서 **영상 스트림 URL**이 어떻게 구성되어 있는지 확인해 보면 힌트를 얻을 수도 있을 듯. 😆

---

웹에서 외부 캡쳐 프로그램을 감지하는 방법은 일반적인 JavaScript 만으로는 어렵지만, 몇 가지 기법을 조합하면 가능할 수도 있어요. 특히 인프런처럼 DRM 보호가 걸려 있는 경우, 브라우저와 OS 레벨에서 캡쳐를 차단하는 방식이 유력할 것 같아요.

* * * * *

🛡 **웹에서 외부 캡쳐 프로그램을 감지하는 방법들**
-------------------------------

### 1️⃣ **DRM 기반 시스템 사용**

✅ **가능성:** ★★★★★\
✅ **원리:** OS 레벨에서 캡쳐 방지\
✅ **우회 가능성:** 낮음

인프런 같은 사이트는 **Widevine (Chrome), PlayReady (Edge), FairPlay (Safari)** 같은 DRM 시스템을 사용했을 가능성이 커요.\
이 DRM 시스템이 활성화되면, Windows나 macOS의 **화면 캡쳐 API를 차단**할 수 있어요.

-   예를 들어, Windows의 `D3D11 Video Overlay`를 사용하면 캡쳐 프로그램이 **검은 화면만 보이게 처리**할 수 있음.
-   MacOS에서는 **FairPlay DRM**을 이용해 스크린샷 및 녹화 방지 가능.

🔍 **테스트 방법:**\
Windows에서 `PrintScreen` 키를 눌러서 화면을 캡쳐했을 때, 검은 화면만 보이면 이 방식일 가능성이 큼.

* * * * *

### 2️⃣ **HW-Accelerated Video Rendering 사용 (GPU 오버레이)**

✅ **가능성:** ★★★★☆\
✅ **원리:** 영상이 **GPU에서 직접 출력**되도록 설정해서 캡쳐 방지\
✅ **우회 가능성:** 중간 (소프트웨어 렌더링으로 변경 시 캡쳐 가능)

일반적인 HTML5 `<video>` 태그가 아니라, **Hardware Accelerated Video Rendering**을 사용하면 캡쳐 프로그램이 영상 데이터를 직접 가져오기 어려워져요.

-   Chrome에서는 `chrome://flags/#disable-accelerated-video-decode` 를 비활성화하면 캡쳐가 안 되는 경우가 많음.
-   일부 사이트는 WebGL이나 WebRTC를 이용해 비디오를 직접 렌더링하여 캡쳐 차단.

🔍 **테스트 방법:**\
Chrome 개발자 도구에서 `chrome://flags/` 설정을 확인하고 **Hardware Accelerated Video Decode**를 꺼보면 캡쳐가 가능한지 테스트 가능.

* * * * *

### 3️⃣ **Browser-Specific 캡쳐 차단 (Media Session API, CSS 스타일)**

✅ **가능성:** ★★★☆☆\
✅ **원리:** 특정 CSS나 JS API를 활용해 캡쳐 차단\
✅ **우회 가능성:** 높음 (수정 가능)

브라우저가 제공하는 기능 중 일부는 캡쳐를 감지하거나 방지할 수 있음.

-   `document.execCommand('copy')` 같은 함수를 훅킹해서 캡쳐 프로그램의 동작을 감지할 수도 있음.
-   CSS `backdrop-filter: blur(10px);` 같은 효과를 특정 환경에서 활성화하면 캡쳐 화면이 흐리게 보일 수도 있음.

🔍 **테스트 방법:**\
개발자 도구(F12)에서 `console.log(document.execCommand('copy'))` 등을 실행해보고 특정 이벤트가 막혀 있는지 확인.

* * * * *

### 4️⃣ **Active Window Monitoring (캡쳐 프로그램 감지)**

✅ **가능성:** ★★★☆☆\
✅ **원리:** 현재 활성화된 프로그램을 감지하여 캡쳐 프로그램이 실행되었는지 확인\
✅ **우회 가능성:** 있음 (우회 프로그램 사용 가능)

웹 페이지가 직접적으로 Windows나 macOS의 실행 중인 프로세스를 확인할 수는 없지만, **WebRTC, WebGL, Canvas API** 등을 활용해 탐지할 수 있음.

💡 **예제:**\
일부 캡쳐 프로그램(OBS, Bandicam, Snagit)은 **WebGL이나 Canvas API를 훅킹하여 영상 데이터를 가로챔**.\
따라서 웹 사이트에서 **WebGL Context를 주기적으로 검사**해서 변조된 흔적이 있으면 차단 가능.

🔍 **테스트 방법:**\
Chrome 개발자 도구에서 아래 코드 실행해서 `WebGL Context`가 정상적인지 확인:

```
const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl");
console.log(gl.getParameter(gl.VENDOR));
console.log(gl.getParameter(gl.RENDERER));

```

만약 이상한 값이 나오거나 `null`이라면 웹에서 `WebGL`을 차단한 것일 수도 있음.

* * * * *

### 5️⃣ **Virtual Machine / Remote Desktop 감지**

✅ **가능성:** ★★☆☆☆\
✅ **원리:** 가상 환경 또는 원격 데스크톱 환경 감지 후 차단\
✅ **우회 가능성:** 있음 (VPN이나 가상 환경 우회 가능)

일부 사이트는 **가상 머신(VM) 또는 원격 데스크톱(RDP)에서 실행되는지 감지**한 후, 컨텐츠 접근을 막기도 해요.

-   브라우저의 `navigator.webdriver` 속성을 확인해서 Selenium 같은 자동화 도구를 감지.
-   Windows 환경에서는 `window.outerWidth`와 `window.innerWidth`의 차이를 검사해 원격 데스크톱 환경 감지.

🔍 **테스트 방법:**\
개발자 도구에서 아래 코드 실행:

```
console.log(navigator.webdriver);
console.log(window.outerWidth - window.innerWidth);

```

만약 `navigator.webdriver === true`이면, 자동화 도구 감지가 활성화된 상태.

* * * * *

🔥 **결론: 웹인데도 캡쳐 프로그램을 감지할 수 있는 이유**
------------------------------------

👉 **가장 유력한 방식은 DRM과 Hardware Accelerated Video Rendering 조합!**

1.  **DRM**(Widevine, PlayReady, FairPlay) → OS 레벨에서 캡쳐 차단
2.  **GPU Video Overlay** → 영상이 GPU에서 직접 렌더링되어 캡쳐 프로그램이 화면을 인식하지 못함
3.  **WebGL / Canvas 감지** → 캡쳐 프로그램이 WebGL을 훅킹하면 탐지 가능
4.  **실행 중인 환경 감지**(Remote Desktop, VM, 자동화 도구) → 특정 환경에서 실행되면 차단

🔍 **우회 방법?**

-   GPU 가속을 비활성화하거나, WebGL을 변경하는 플러그인 사용
-   OBS 같은 캡쳐 프로그램에서 "Windows 10 캡쳐 방식"이 아닌 "디스플레이 캡쳐" 사용
-   개발자 도구에서 특정 속성 (`navigator.webdriver`)을 변조

하지만 이런 DRM 방어는 일반적인 웹 보안보다 훨씬 강력해서, 단순한 우회로는 어렵고 OS 레벨에서 막혀 있을 가능성이 큼. 😎

댓글

댓글 쓰기

이 블로그의 인기 게시물

js 스트링에서 요소 갯수 세기

이상하다 https://stackoverflow.com/questions/881085/count-the-number-of-occurrences-of-a-character-in-a-string-in-javascript If you're looking for the commas: (mainStr. split ( "," ). length - 1 ) //3 If you're looking for the str (mainStr. split ( "str" ). length - 1 ) //4   console . log (( "str1,str2,str3,str4" . match ( /,/g ) || []). length ); //logs 3 console . log (( "str1,str2,str3,str4" . match ( new RegExp ( "str" , "g" )) || []). length ); //logs 4
Read more »

STUDY

@GetMapping("/proxy-download") public ResponseEntity<Resource> proxyDownload() {     String sourceUrl = "https://example.com/file-to-download.bin";     ResponseEntity<byte[]> response = restTemplate.exchange(         sourceUrl,         HttpMethod.GET,         null,         byte[].class     );     byte[] fileBytes = response.getBody();     // 👉 원본 Content-Disposition 헤더에서 파일 이름 추출     String disposition = response.getHeaders().getFirst(HttpHeaders.CONTENT_DISPOSITION);     String filename = "default.bin"; // fallback     if (disposition != null && disposition.contains("filename=")) {         // Content-Disposition: attachment; filename="some_file.bin"         filename = disposition.split("filename=")[1].replace("\"", "").trim();     }     HttpHeaders ...
Read more »

javascript cheatsheet

JavaScript 기능들을 정리한 치트시트를 제공합니다. 이 치트시트는 데이터 구조와 알고리즘을 구현하는 데 필요한 기본적인 구문과 기능을 포함하고 있습니다. ## JavaScript Coding Cheat Sheet ### 1. **기본 문법** #### 변수 선언 ```javascript let variable = value;   // 변수 선언 (변경 가능) const constant = value; // 상수 선언 (변경 불가) ``` #### 함수 선언 ```javascript // 함수 선언식 function functionName(params) {   // 함수 내용 } // 함수 표현식 const functionName = function(params) {   // 함수 내용 }; // 화살표 함수 const functionName = (params) => {   // 함수 내용 }; ``` ### 2. **기본 데이터 구조** #### 배열 (Array) ```javascript let arr = [1, 2, 3]; // 배열 길이 console.log(arr.length); // 배열 요소 접근 console.log(arr[0]); // 배열의 끝에 추가 arr.push(4); // 배열의 끝에서 제거 arr.pop(); // 배열의 앞에 추가 arr.unshift(0); // 배열의 앞에서 제거 arr.shift(); ``` #### 객체 (Object) ```javascript let obj = {   key1: 'value1',   key2: 'value2' }; // 속성 접근 console.log(obj.key1); // 속성 추가 또는 변경 obj.key3 = 'value3'; // 속성 제거 delete obj.key2; ``` ### 3. **반복문 및 조건문** #### 반복문 ```javascript // for 반복문 for (let i = 0; i ...
Read more »