Won't fix Invisible captcha styling a bit off

[Ian Hitt]

Affected version

2.1

 

[djbaxter]

I didn't think reCaptcha 3 was supported yet by Xenforo.

 

[Chromaniac]

i noticed this bug. invisible recaptcha has been supported by xenforo for a long time now. the issue occurs when you have turned it on. google adds a rectangular branding box on the registration form if the captcha is invisible. on mobile it extends outside the forum view so a horizontal scrollbar appears. on desktop, it dances around.

reCAPTCHA v3 seems pretty cool. would be nice to see it supported by xenforo in future!

 

[Chris D]

I didn't think reCaptcha 3 was supported yet by Xenforo.

Invisible recaptcha is essentially recaptcha 2.

I don’t actually think we’d be able to support recaptcha 3 as a traditional captcha btw. It goes above and beyond our use case for captchas.

 

[Chris D]

View attachment 194354View attachment 194355

I’m not really convinced this is a bug, per se. There are two significant things here.

Firstly, I assume this is only an issue if you haven’t configured the key so it isn’t displayed like this in normal use.

Secondly, it is positioned there solely by their code, not ours. So it’s mostly not really our responsibility to fix. Even if we did attempt to workaround it, the drawback then is what happens if Google fixes the issues themselves as well. It could well be that our workaround then causes other issues.

 

[Chromaniac]

here is a larger screencast with key configured: https://streamable.com/iqzt6

this is third party theme. trying to replicate it with default xenforo theme.

 

[RobinHood]

I had this banner pop up on a few wordpress websites when updating the contact forms last week, it's really annoying and quite intrusive.

I think originally Google disallowed the hiding or removal of it, they've gone back on that now though and say you can just have much more discrete captcha branding.

How to hide the Google Invisible reCAPTCHA badge

When implementing the new Google Invisible reCATPTCHA, by default you get a little "protected by reCAPTCHA" badge in the bottom right of the screen that pops out when you roll over it. I'd like to...

stackoverflow.com

Frequently Asked Questions | reCAPTCHA | Google for Developers

Get answers to questions about reCAPTCHA Enterprise, versions, limits, customization, and more.

developers.google.com

 

[Chromaniac]

on default theme... the banner appears at the bottom right of the website. where it expands on hover. seems like how google wanted it to appear.

 

[djbaxter]

@RobinHood are you using Contact Form 7? Be aware that they now require reCaptcha 3; reCaptcha 2 is no longer supported.

 

[RobinHood]

Yeah, I'm not 100% sure about V3 yet, doing all it's stuff magically in the background. I had one instance after upgrading when I couldn't submit the form as it thought I was spamming, but I couldn't figure out a way to manually override it as a visitor just wanting to send a message through the contact form. I just got a spam error and that was it.

Then I was worried about hiding the the banner in a non supported manner incase it screwed with the detection, as the last thing I want is potential form fillers to encounter issues, but I also didn't want a big ugly banner on sites that are quite clean and carefully designed.

I had another issue where the pop out banner was in the exact position to cover the chat request box, so every time you try to start a chat the bloody captcha banner popped into focus

 

[Chris D]

I had this banner pop up on a few wordpress websites when updating the contact forms last week, it's really annoying and quite intrusive.

I think originally Google disallowed the hiding or removal of it, they've gone back on that now though and say you can just have much more discrete captcha branding.

How to hide the Google Invisible reCAPTCHA badge

When implementing the new Google Invisible reCATPTCHA, by default you get a little "protected by reCAPTCHA" badge in the bottom right of the screen that pops out when you roll over it. I'd like to...

stackoverflow.com

Frequently Asked Questions | reCAPTCHA | Google for Developers

Get answers to questions about reCAPTCHA Enterprise, versions, limits, customization, and more.

developers.google.com

Thanks for that. We might be able to do this then. We’ll look into it.

 

[Chris D]

Ok, I've ultimately decided not to progress this any further.

As noted before, the only reason this bug exists is if the site isn't configured properly anyway, and ultimately it is reCAPTCHA CSS which is problematic here. Perhaps it is something they will change.

For the general question over whether or not we can just remove the badge. Yes, we could, though the changes are a little more involved than you might expect, especially with the code and template changes required to display some form of text in order to comply with their terms of service.

Either way, I think we should promote the "preferred" way of complying with their TOS by default which is to allow them to render a badge in the corner.

Should you wish to hide the badge you can do so with this CSS:

.grecaptcha-badge
{
    display: none;
}

But then you have to add this text wherever the captcha is rendered:

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

 

[RobinHood]

That expanding badge is such an intrusive and poor design. I can't believe Google have rolled that out as the default implementation. Hopefully they will change it. Thanks for the tweak though Chris so at least we can change it ourselves.

 

[SeToY]

Firstly, I assume this is only an issue if you haven’t configured the key so it isn’t displayed like this in normal use.

I just tried to use invisible reCAPTCHA on my page, too. This does not only happen if the key is not configured but also during normal use. It works on the register page but not on the modal. Simply put, my guess is because Google's css attaches the image to the viewport borders and, in case of the register modal, this is not the entire screen real estate but the size of the modal window instead. Thus, it results in this: https://gyazo.com/6472e963195ac9e37d9f668c04624e64

I assume the first part (the "logo part") is supposed to be the only thing that's visible until you hover it. Then it displays links to privacy and terms pages.

As noted before, the only reason this bug exists is if the site isn't configured properly anyway, and ultimately it is reCAPTCHA CSS which is problematic here. Perhaps it is something they will change.

That's why I think it's not entirely Google's fault. Maybe there's some way to customize the reCAPTCHA css Google is delivering by telling it the view size of the entire page rather than the modal?

 

[Chris D]

You can test the invisible captcha out in the registration overlay here - clearly doesn't do what you demonstrate in your screenshot so there may be some other CSS in your style causing it.

 

[SeToY]

You can test the invisible captcha out in the registration overlay here - clearly doesn't do what you demonstrate in your screenshot so there may be some other CSS in your style causing it.

Hmmm, you are right, sorry. I'm using UI.X 2 (Dark) and created a ticket with ThemeHouse (ref: 14374) who told me it's none of their fault and I should join the discussion here. Seems like I was mistaken, sorry

@Ian Hitt @Dalton Prock