AI 스크래핑 무기 경쟁: 동적 웹에서 시각 자산 보호
I’m happy to translate the article for you, but I’ll need the text you’d like translated. Could you please paste the content (or the portion you want translated) here? I’ll keep the source link at the top exactly as you provided and preserve all formatting, markdown, and technical terms.
소개
AI 훈련 모델이 시각 데이터에 더 갈증을 느끼면서, 웹 스크래퍼는 단순 HTML 파서에서 자바스크립트를 실행하고 동적 콘텐츠와 상호작용할 수 있는 완전한 헤드리스 브라우저로 진화했습니다. 이러한 변화는 개발자들이 robots.txt를 넘어 보다 복잡한 난독화 기술을 채택하여 독점 이미지와 미디어를 보호하도록 강요합니다.
짧은 답변
완전히는 아니지만, 스크래핑을 비용이 많이 들게 만들 수 있습니다.
Modern bots
Modern bots (using tools like Puppeteer, Playwright, or Selenium) do not just “download HTML”; they run a full browser engine. If a user’s browser can execute JavaScript to render an image, a bot can do the exact same thing—the client‑side execution environment is identical.
현대적인 봇은 (Puppeteer, Playwright, 또는 Selenium 같은 도구를 사용하여) 단순히 “HTML을 다운로드”하는 것이 아니라 전체 브라우저 엔진을 실행합니다. 사용자의 브라우저가 이미지를 렌더링하기 위해 JavaScript를 실행할 수 있다면, 봇도 정확히 동일하게 수행합니다—클라이언트 측 실행 환경이 동일합니다.
Developers can increase the computational cost for the bot:
- A simple
curlrequest takes milliseconds and negligible CPU.
간단한curl요청은 몇 밀리초에 불과하고 CPU 사용량도 무시할 수준입니다. - Forcing a bot to run a full Chrome instance, execute complex JavaScript decoders, and render Canvas elements dramatically slows down the scraping process, making mass data collection difficult.
봇이 전체 Chrome 인스턴스를 실행하고 복잡한 JavaScript 디코더를 실행하며 Canvas 요소를 렌더링하도록 강제하면 스크래핑 과정이 크게 느려져 대량 데이터 수집이 어려워집니다.
동적 네트워크 트래픽 가로채기
Question: 봇이 image.src = "url"와 같이 트리거된 요청과 같은 동적 네트워크 트래픽을 가로챌 수 있나요?
Answer: 예. 최신 헤드리스 브라우저는 Chrome DevTools Protocol(CDP)을 활용하여 봇이 다음을 수행할 수 있게 합니다:
- 네트워크 레이어 후킹 – HTML이든 JavaScript 이벤트이든 관계없이 브라우저를 떠나는 모든 요청을 청취합니다.
- 유형별 필터링 –
Resource Type: Image또는 특정 확장자(.jpg,.png)에 대해 즉시 필터링합니다. - 페이로드 검사 – 이미지 URL이 JSON 객체 안에 포함되어 있는 경우, 봇은 XHR/Fetch 응답을 가로채 JSON을 파싱하여 이미지가 렌더링되기 전에 URL을 추출할 수 있습니다.
페이로드 검사 예시
{
"profile_pic": "https://example.com/images/user123.jpg"
}봇은 XHR 응답을 캡처하고 URL을 추출한 뒤 DOM에 접근하지 않고 이미지를 다운로드할 수 있습니다.
Source: …
대응책
캔버스 렌더링
표준 <img> 태그(DOM에 src URL을 노출함)를 사용하는 대신, 개발자는 HTML5 <canvas>에 이미지를 그릴 수 있습니다.
기법
- 이미지 데이터를 바이너리 블롭 또는 원시 픽셀 데이터로 가져옵니다.
- JavaScript를 사용해 캔버스에 이미지를 그립니다.
결과 – DOM에는 이미지 파일 경로에 대한 참조가 없는 <canvas> 요소만 표시됩니다.
봇 방해 요소 – 이미지를 “보려면” 봇은 렌더링된 페이지의 스크린샷을 찍고 컴퓨터 비전/OCR을 적용해야 하며, 이는 파일을 단순히 다운로드하는 것보다 훨씬 느리고 오류가 발생하기 쉽습니다.
Emoji‑Codec URL 난독화
맞춤 인코딩 방식을 사용해 스크래퍼로부터 URL을 숨길 수 있습니다. 한 예가 Emoji‑Codec 프로토콜입니다.
기법
- 서버는 일반 텍스트 URL 대신 이모지 문자열을 인코딩해서 전송합니다.
- 인코딩은 표준 Base64 문자들을 무작위로 섞은 64개의 유니코드 이모지 알파벳에 매핑하는 단일 알파벳 치환 암호를 사용합니다.
- 매핑(“키”)은 세션이나 연결마다 변경될 수 있습니다.
예시 페이로드
{
"url": "🚀🍕🌈🍦🦄📚🔑..."
}동작 원리
- 브라우저는 메모리에 저장된 세션 전용 키를 사용해 이모지 문자열을 실제 URL로 디코딩합니다.
- 이모지 스트림만 보는 스크래퍼는 키와 디코딩 로직 없이는 유효한 이미지 URL을 재구성할 수 없습니다.
장점
- ASCII 키워드(예:
SELECT, “)를 필터링하는 웹 애플리케이션 방화벽(WAF)을 우회합니다. - 표준 URL 패턴을 찾는 스크래퍼를 눈멀게 합니다.
단시간 서명된 URL
동적 사이트는 제한된 시간 토큰(예: AWS S3 사전 서명 URL)으로 이미지를 제공할 수 있습니다.
기법
https://bucket.s3.amazonaws.com/image.jpg?token=abc123&expires=60결과 – URL은 짧은 기간(예: 60초) 후에 만료됩니다. 봇이 URL을 캡처하더라도, 별도의 다운로드 요청을 시도할 때는 이미 사용할 수 없게 됩니다.
방어‑심층 전략
단일 방법만으로는 단호한 리버스 엔지니어에게 완벽한 면역을 제공하지 못합니다. 그러나 다음을 결합하면:
- 캔버스 렌더링(시각적 추출 강제),
- Emoji‑Codec와 같은 페이로드 난독화, 그리고
- 단기간 유효한 서명된 URL
계층형 방어가 구축됩니다. 이는 스크래퍼가 효율적인 네트워크 스니핑에서 비효율적인 시각 처리로 전환하도록 강제하여 동적 시각 콘텐츠의 무결성을 유지합니다.
Further reading: emoji-codec on GitHub