Google recaptcha puts elements in frame that I need to query, but the frame has no ID to query by

Question

I use flask-wtf recaptcha and it works fine when I use the standard form POST that it is built for, but when I try to convert to JSON to make it dynamic I can't query the recaptcha-token from the frame that google puts it in. Does anyone know how to query a frame? The frame they create does not have an ID so I am unsure how to query it.

Here is my registration script. It works great except for the recaptcha-token part.

async function register() {
    form=document.getElementById('register')
    const fields = {
        csrf_token: {
            input: document.getElementById('csrf_token'),
            error: document.getElementById('csrf_token-error')
        },
        username: {
            input: document.getElementById('username'),
            error: document.getElementById('username-error')
        },
        password: {
            input: document.getElementById('password'),
            error: document.getElementById('password-error')
        },
        password2: {
            input: document.getElementById('password2'),
            error: document.getElementById('password2-error')
        },
        remember_me: {
            input: document.getElementById('remember_me'),
            error: document.getElementById('remember_me-error')
        },
        recaptcha: {
            //THIS is the broken part
            input: window.frames["reCAPTCHA"].document.getElementById("recaptcha-token"),
            error: document.getElementById('recaptcha-error')
        }
    };
    const response = await fetch('/auth/_register', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            csrf_token: fields.csrf_token.input.value,
            username: fields.username.input.value,
            password: fields.password.input.value,
            password2: fields.password2.input.value,
            remember_me: fields.remember_me.input.value,
            recaptcha: fields.recaptcha.input.value
        })
    });
    data = await response.json();
    if (response.ok) {
        jFlash('Registered.')
    } else {
        const errors = data;
        form.classList.add('was-validated');
        Object.keys(errors).forEach((key) => {
            console.log('key: '+key)
            if (key != 'recaptcha') {
                fields[key].input.classList.add('is-invalid');
                fields[key].error.innerHTML = errors[key][0];
            }

        });
        jFlash('Registration Failed');
    }
}

Here is the HTML that google injects the frame with. I believe my window frame code is not working becayse there is no ID to query with.

<iframe title="reCAPTCHA" src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;k=6LdqkIoeAAAAAMI1MPFkwDvhcKCVORkDEMzsLhG8&amp;co=aHR0cDovLzEyNy4wLjAuMTo1MDAw&amp;hl=en&amp;v=0aeEuuJmrVqDrEL39Fsg5-UJ&amp;size=normal&amp;cb=wdx5gc39rruq" width="304" height="78" role="presentation" name="a-prvm1b7nlvkg" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation"></iframe>

Answer 1

const iframe = document.querySelector('iframe')

or

const iframes = document.querySelectorAll('iframe')

CSS selectors