Retrieving call frames from inside iframe

I’m trying to retrieve call frames from a script that is embedded inside an iframe. How would I do this? I’m trying to debug hcaptcha on https://www.epicgames.com/id/login/epic

const CDP = require('chrome-remote-interface');

CDP(async (client) => {
    try {
        const {Debugger, Page, Runtime} = client;
        // enable debugger domain
        await Debugger.enable();
        await Runtime.enable();

        Debugger.paused(async({asyncStackTrace, callFrames}) => {
            //console.log(`PAUSED at line ${callFrames[0].location.lineNumber + 1}`); // (zero-based)
            try {
            //console.log(callFrames[0].scopeChain[0].object);
            //var tg = promise
            var frame = callFrames[0];
            var local = await Runtime.getProperties(callFrames[0].scopeChain[0].object);
            var localScope = local["result"];

            localScope.forEach(element => {
                console.log(element)
            });

            var result = {
                "frame": frame,
                "scope": localScope,
            }

            console.log(JSON.stringify(result));

            } catch (e) {
                console.log(e)
            }
        });

    } catch (err) {
        console.error(err);
    }
}).on('error', (err) => {
    console.error(err);
});

If you login once, you should see new scripts get loaded which are hcaptcha, but when I breakpoint it doesn’t output anything. My guess is that it is due to the iframe. Is there any solution? Apologies if this is worded badly, it’s very late.

Component	Version
Operating system	Windows 10
Node.js	14.18.0
Chrome/Chromium/…	Chrome 96.0.4664.45
chrome-remote-interface	0.31.1

Is Chrome running in a container? NO

[cyrus-and]

OK the reason why your scenario doesn’t get handled really escapes me; I cannot reproduce it in a standalone PoC, I tried several things, including creating the frame dynamically, etc. It feels like a Chrome bug honestly…

Anyway, you can try this workaround:

const CDP = require('chrome-remote-interface');

(async () => {
    const client = await CDP();
    const {Page, Target} = client;

    Target.attachedToTarget(async ({targetInfo: {targetId}}) => {
        const client = await CDP({target: `ws://127.0.0.1:9222/devtools/page/${targetId}`});
        const {Debugger} = client;

        Debugger.paused(async ({callFrames}) => {
            console.log('BREAK');

            for (const frame of callFrames) {
                console.log('FRAME', frame);
            }
        });

        await Debugger.enable();
    });

    await Target.setAutoAttach({
        autoAttach: true,
        waitForDebuggerOnStart: false
    });

    await Page.navigate({url: 'https://www.epicgames.com/id/login/epic'});
})();

Basically, for each discovered target creates another instance in which it performs the logic, i.e., dumping the stack frames. This shouldn’t be needed but still…

[cyrus-and]

Awesome! If you ever come up with a minimal PoC that reproduces this issue, feel free to post it here.