我使用 flask-wtf recaptcha 并且当我使用它构建的标准表单 POST 时它工作正常,但是当我尝试转换为 JSON 以使其动态时,我无法从谷歌放入的框架。有谁知道如何查询框架?他们创建的框架没有 ID,所以我不确定如何查询它。
这是我的注册脚本。除了 recaptcha-token 部分外,它工作得很好。
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');
}
}
这是谷歌注入框架的 HTML 。我相信我的窗框代码不起作用,因为没有可查询的 ID。
<iframe title="reCAPTCHA" src="https://www.google.com/recaptcha/api2/anchor?ar=1&k=6LdqkIoeAAAAAMI1MPFkwDvhcKCVORkDEMzsLhG8&co=aHR0cDovLzEyNy4wLjAuMTo1MDAw&hl=en&v=0aeEuuJmrVqDrEL39Fsg5-UJ&size=normal&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>
回答1
const iframe = document.querySelector('iframe')
或者
const iframes = document.querySelectorAll('iframe')
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors