불법 웹툰 사이드(불법 광고 차단)에 대한 고찰

LEE KAYOUNG / KATIE·2024년 9월 14일
개발
1
post-thumbnail

웹툰 불법 사이트는 정당한 권리자나 창작자의 동의 없이 웹툰 콘텐츠를 무단으로 배포하여 수익을 창출하는 불법 사이트를 말한다. 나는 툰코 텔레그램에 수많은 사람들이 이용하는 것을 보고 이 웹툰 사이트를 막지 못하는 이유가 궁금해져 이 글을 작성하게 되었다.

1️⃣ 웹툰 불법 사이트의 원리

⓵ 웹툰 콘텐츠의 불법 복제 및 업로드

웹툰 불법 사이트는 웹툰 콘텐츠를 불법으로 복제하여 자신의 서버에 업로드한다.

  • 스크린샷: 웹툰 플랫폼에서 화면 캡처 도구를 이용해 각 회차를 이미지 파일로 저장.
  • 다운로드 프로그램: 웹툰 콘텐츠를 자동으로 다운로드하는 프로그램을 이용해 다량의 콘텐츠를 빠르게 확보.
  • 피싱 및 해킹: 웹툰 플랫폼의 보안 취약점을 공격하여 내부 자료를 빼내는 방식.

⓶ 웹사이트 운영 및 수익 창출

불법으로 확보한 웹툰 콘텐츠는 불법 웹사이트에 업로드되며, 다음과 같은 방식으로 수익을 창출한다 :

  • 광고 수익: 불법 웹사이트는 팝업 광고, 배너 광고 등을 통해 방문자로부터 수익을 얻는다. 일부는 악성 광고를 통해 더 많은 수익을 창출

  • 프리미엄 서비스: 일부 불법 사이트는 무료로 일부 콘텐츠를 제공하는 동시에, 더 많은 콘텐츠를 제공하기 위해 프리미엄 회원제를 운영

  • 데이터 판매: 방문자의 개인정보나 브라우징 데이터를 수집하여 제3자에게 판매하는 방식.

    • 쿠키와 로컬스토리지 보완 이슈

      XSS (Cross-site Scripting)

      XSS(교차 사이트 스크립팅)는 공격자가 웹 사이트에 악의적인 코드를 주입하는 기법이다. XSS 관련 공격의 종류는 셀 수 없이 많지만 일반적으로 세션과 토큰과 같이 개인 정보를 탈취해 공격자에게 전송하거나, 공격자가 조작하고 있는 웹사이트로 리다이렉트 시키는 등의 방식을 사용한다.

      https://www.youtube.com/watch?v=bSGqBoZd8WM

      CSRF (Cross-site Request Forgery)

      CSRF(교차 사이트 요청 위조)는 공격자가 신뢰할 수 있는 사용자를 사칭하고 웹 사이트에 원치 않는 명령을 보내는 공격이다. 즉, 특정 웹서버가 사용자의 웹브라우저를 신용하는 상태를 노리는 것.

      예를 들어, 공격자가 아래와 같이 악의적인 URL 파라미터를 가진 요소를 삽입했다고 하자.

      <img src="https://www.example.com/index.php?action=delete&id=123" />

      수정 권한이 있는 사용자의 경우, <img> 요소는 화면에 보이지 않더라도 사용자도 모르는 사이 HTML이 로드되면서 실행된다.

    • 쿠키와 로컬스토리지 분석

  • 브라우저 핑거프린팅 : 사용자의 브라우저와 기기에 대한 고유한 식별자를 생성하는 기술.

    • 브라우저의 설정, 플러그인, 화면 해상도, 운영 체제 등 다양한 정보를 조합하여 고유한 '핑거프린트'를 만듭니다.
    • 웹사이트는 자바스크립트와 같은 기술을 사용하여 사용자의 브라우저 특성 데이터를 수집합니다.
    • 이 데이터를 조합하여 특정 사용자를 식별하고 추적할 수 있는 고유한 핑거프린트를 생성합니다.

⓷ 사이트의 지속 운영을 위한 기술적 조치

불법 사이트 운영자들은 사이트가 차단되거나 법적 제재를 받을 경우를 대비해 다양한 기술적 조치를 취한다 :

  • 프록시 서버: 접속 차단을 피하기 위해 프록시 서버를 사용하여 IP 우회를 시도.
  • 클라우드 서비스 이용: 콘텐츠를 클라우드 서버에 분산 저장하여 추적을 어렵게 만듦.
  • 도메인 변경: 사이트가 차단되면 새로운 도메인으로 변경하여 운영을 지속.

    차단 : 정부나 ISP(인터넷 서비스 제공자)에 의해 "toonkor423.com" 도메인이 차단된다
    사이트 운영자는 새로운 도메인 "toonkor424.com"을 등록하고 사용자들에게 이를 안내
    궁금점 : 사이트가 비슷한 도메인으로 바뀌는데 이를 다 차단 때리면 되는거 아닌가?

단순히 유사한 도메인을 차단하는 것만으로는 해결되지 않는 몇 가지 이유 :

1. 운영자들은 도메인 패턴을 다양하게 변경하여 차단을 회피

예를 들어, 숫자를 변경하거나, 알파벳을 추가하거나, 도메인 확장자를 바꾸는 등의 방식으로 도메인을 변경할 수 있습니다.

예: "toonkor423.com" → "toonkor424.com" → "toonkor425.net" → "toonkor426.xyz"

2. DNS 변경 및 CDN 사용

운영자들은 DNS(도메인 네임 시스템) 서버를 자주 변경하거나, CDN(콘텐츠 전송 네트워크)를 사용하여 사이트 접속을 분산시킨다. 이를 통해 접속 차단을 피할 수 있다.

예: Cloudflare와 같은 CDN 서비스를 이용하면, 실제 서버의 IP 주소를 감추고, 전 세계에 분산된 서버를 통해 접속을 우회할 수 있다.

`사용자 -> DNS 서버 변경 -> CDN 서비스 (Cloudflare 등) -> 불법 웹툰 사이트`

3. 프록시 및 VPN 사용

사용자들이 프록시 서버나 VPN(가상 사설망)을 사용하여 접속하면, IP 차단을 우회할 수 있다. 이는 ISP나 정부의 차단을 피하는 데 효과적이다.

예: 사용자들이 VPN을 통해 해외 서버로 접속하여 차단된 사이트에 접속할 수 있다.

`사용자 -> VPN 서버 -> 불법 웹툰 사이트`

2️⃣ 웹툰 다운로더 크롬 익스텐션

⓵ (불법) 광고는 어떻게 차단 할 수 있는 걸까?

참고한 토끼 다운로더글을 보다가 토끼다운로더에는 불법 사이트의 광고들을 토글버튼 하나로 노출되지 않게 설정해두는 기능을 보았다.
어떻게 이 광고 차단기능을 구현한건지 궁금해 찾아보게 되었다.


출처 : 토끼 다운로더

처음 아티클을 쓸 때 아래와 같이 검색하여 나오는 키워드들을 검색하여 이런 원리로 구현되지 않았을까 하는 마음에 글을 썼다.

하지만 토끼 다운로더 개발자 분의 답변에서 힌트를 얻어 이에 대해 더 깊게 공부할 수 있었다.

⓶ 현재 페이지의 광고 HTML 요소 삭제

  • 작동 방식:
    - 웹 페이지가 로드되면, 확장 프로그램이나 스크립트가 페이지를 스캔하여 광고 요소를 식별한다.
    광고 요소는 특정 클래스나 ID, 또는 태그에 의해 식별될 수 있다.
    - 이 요소를 찾아내면, 자바스크립트와 같은 스크립트를 사용해 해당 요소를 DOM(Document Object Model)에서 삭제하거나 숨긴다.
    - 사용자는 광고가 사라진 페이지를 보게 된다.

    한계:
    광고 요소가 동적으로 생성되거나 페이지가 로드된 후에 추가될 경우, 이 방식은 모든 광고를 제거하지 못할 수도 있다. + 광고주가 광고의 HTML 구조를 변경하면 이 방식이 제대로 작동하지 않을 수 있다.

⓷ 브라우저 규칙 수정 권한을 사용해 광고 이미지 요청을 사전에 차단

  • 작동 방식:

    • 브라우저 확장 프로그램은 네트워크 요청을 모니터링할 수 있는 권한을 가진다. 이를 통해 웹 페이지가 특정 리소스를 요청할 때 이를 사전에 탐지할 수 있다.
    • 확장 프로그램은 광고 리소스가 있는 URL 패턴을 미리 정의된 목록(필터 리스트)과 비교한다.
    • 광고로 판단된 리소스 요청은 즉시 차단된다. 이 과정에서 광고 이미지는 사용자의 브라우저로 로드되지 않으며, 따라서 페이지에 광고가 나타나지 않는다.

  • 장점: 이 방법은 광고가 아예 로드되지 않도록 막기 때문에, 페이지 로딩 시간 단축과 데이터 사용량 절감에도 효과적이다. 또한, 광고 요소가 동적으로 생성되는 경우에도 효과적으로 차단할 수 있다.

  • 한계:
    광고주들이 URL을 자주 변경하거나 우회하는 방법을 사용할 경우, 필터 리스트를 지속적으로 업데이트해야 합니다.

  • 필터링 방식이란,

    광고 차단의 대표적인 방법 3가지

    1. 플래시·자바스크립트 차단, 2. 광고 도메인 차단, 3. 필터링

      필터링 방식의 핵심은 웹 페이지가 광고 콘텐츠를 요청하기 전에 이를 탐지하고 차단하는 것.
      웹사이트 화면을 구성하는 요소 중 광고로 판단되는 것을 골라 차단하는 방법이다. 필터링 방식은 광고 서버들의 정보가 담긴 '필터'를 사용하는데, 방문하려는 웹 사이트에 필터에 걸리는 데이터가 있다면 이를 광고로 판단하여 차단한다.
      필터 내용에 따라서는 광고뿐만 아니라 악성코드나 사용자 추적도 막을 수 있다. 단, 수시로 새로운 광고 방식과 서버가 만들어지기 때문에 필터를 주기적으로 업데이트해야 한다.

      https://github.com/List-KR/List-KR

      필터링 방식의 핵심 요소는 필터 :
      많은 광고 차단 프로그램이 필터를 활용한 광고 차단 서비스를 제공하고 있다. 필터에는 수많은 광고 서버와 관련 도메인이 저장되어있으며, 이들 서버와 도메인을 통해 제공되는 콘텐츠를 광고로 판단하는 역할을 한다.
      이외에도 광고 차단 프로그램들이 사용하는 필터가 수없이 많으므로, (filterList, easyList, yourList, 애드블록)
      거주 국가나 주로 접속하는 사이트의 국적에 따라 적합한 필터를 골라 적용하면 된다. 하지만 필터를 너무 많이 활성화하면 인터넷 속도가 눈에 띄게 저하된다는 단점이 있다.

      3️⃣ 코드 구현

구글 익스텐션 기본 세팅은 아래 글을 참고하길 바란다.

현생이슈로 직접 구현해보진 못했지만, 하고있는 두 플젝 끝나면 하고 싶다(아 휴학 더 하고싶다)~~
https://developer.chrome.com/docs/extensions/get-started?hl=ko

ad-blocker-extension-fe-ninjas/
│
├── src/
│   ├── background.ts
│   ├── contentScript.ts
│   └── manifest.json
│
├── dist/
│
└── tsconfig.json

⓵ Manifest 만들기

extension은 manifest파일로부터 시작된다. manifest.json은 Chrome 확장의 설정 파일이다. 여기서 확장의 기본 정보와 스크립트를 지정한다.

  /** content_scripts는 js 파일이 matches에 있는 url이라면, 항상 실행되도록 하는것이다.
  *   만약 네이버 Naver Sports 영상의 광고를 자동으로 넘기는 시스템을 제작하고 싶다면
  *   "matches" : [ "https://sports.news.naver.com/* /vod"],   
  */ 
{
  "manifest_version": 3,
  "name": "Ad Blocker",
  "version": "1.0",
  "description": "A simple ad blocker that removes specific HTML elements.",
  "permissions": ["activeTab", "scripting"],
  "background": {
    "service_worker": "background.js"
  },           
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentScript.js"]
    }
  ],
  "host_permissions": ["<all_urls>"]
}

⓶ 광고 요소 제거 로직

// 광고 요소의 클래스, ID 또는 태그를 지정
// 지금은 간단히 이 정도로 추려봤는데 광고 요소를 식별하는 방법 다양한 방식이 있다. 
// ⓵ 웹 페이지 분석 ⓶ 동적 요소 식별 ③ 패턴 분석
const adSelectors = [
  ".ad-banner",   // 예시 클래스
  "#ad-container", // 예시 ID
  "iframe[src*='ads']", // 특정 src를 가진 iframe
  "img[src*='ads']" // 특정 src를 가진 이미지 태그
];

// 광고 요소를 찾아 삭제하는 함수
function removeAds() {
  adSelectors.forEach(selector => {
    const ads = document.querySelectorAll(selector);
    ads.forEach(ad => ad.remove());
  });
}

// DOM이 로드된 후 광고 요소를 제거
document.addEventListener("DOMContentLoaded", removeAds);

// 광고 요소가 동적으로 추가될 경우에도 제거
const observer = new MutationObserver(removeAds);
observer.observe(document.body, { childList: true, subtree: true });

③ Background Script

//확장 프로그램이 활성화될 때 콘텐츠 스크립트를 실행하도록 설정
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === "complete" && tab.url) {
    chrome.scripting.executeScript({
      target: { tabId: tabId },
      files: ["contentScript.js"],
    });
  }
});

*이 글은 프론트 테크 톡에서 다뤘던 내용 벨로그 이전글입니다. 해당 원본은 링크를 참고해주세요.

profile
LEE KAYOUNG / KATIE
[궁금한 것들 이리저리..쿵]
이전 포스트

Context API 의존성 주입에 대한 고찰

다음 포스트

소동 웹페이지 성능 개선 (1)

0개의 댓글