Hello, I implemented Google's reCAPTCHA v3 in my web page like this:
I have a process to retrieve my Google key. (application item EA_RECAPTCHAV3_SITE_KEY).
On my page I put the following instructions
JavaScript
File URLs
https://www.google.com/recaptcha/api.js?render=&EA_RECAPTCHAV3_SITE_KEY.
Execute When page load
grecaptcha.ready(function() {
grecaptcha.execute("&EA_RECAPTCHAV3_SITE_KEY.", {
action: 'ponderation'
}).then(function(token) {
// Add your logic to submit to your backend server here.
//
console.log("set token recapcha load");
apex.item("P2_TOKEN_CAPTCHA").setValue(token);
});
});
CSS inline to position it correctly.
.grecaptcha-badge {
bottom:140px !important;
}
HTML Header
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
On my page I have 3 items which are popup-lov.
When I run my page everything is ok, the reCAPTCHA is there.
The problem starts when I click on my popup-lov element, it doesn't display correctly and causes a javascript error.
Cause of the problem:
In the file widget.popup.js?v=19.2.0.00.18, the _create function for the "binding" dialog$.on there is this instruction
bodies$ = $( document.body ).add( $("iframe").map(function() { return this.contentDocument.documentElement; } ) );
The $("iframe") selector retrieves that of the reCAPTCHA and the contentDocument.documentElement is null because its content comes from a different domain from my application and the browser blocks it.
I don't know if I can add headers option on Google's side to authorize the browser to let it fill the contentDocument or if on your side you could not adjust the code to avoid returning a null. Unless you suggest an alternative ?
Version Application Express 19.2.0.00.18