Alexander Solonik Alexander Solonik - 2 months ago 44
CSS Question

How to modify google captcha iframe styles

I have the following page HERE, and basically as you can see there is a google captcha , now I needed the box-shadow and the border gone so I applied the following styles:

.rc-anchor-light { border: none !important;} .rc-anchor { box-shadow: none !important;}


The above doesn't work as the captcha is loaded in an iframe, so after surfing SO for a while I came up with the following solution:

$('.g-recaptcha iframe').load( function() {
$('.g-recaptcha iframe').contents().find("head")
.append($("<style type='text/css'> .rc-anchor-light { border: none !important;} .rc-anchor { box-shadow: none !important;} </style>"));
});


This doesn't work too and I believe is the wrong thing to do in this case because the google iframe already does have some custom styles in the
<head>
style element, so the above I am afraid might override it.

So how exactly do I modify the google captcha styles??

All I want is the border and the shadow gone.

Answer

Overview:

Sorry to be the answerer of bad news, but after research and debugging, it's pretty clear that there is no way to customize the styling of the new reCAPTCHA controls. The controls are wrapped in an iframe, which prevents the use of CSS to style them, and Same-Origin Policy prevents JavaScript from accessing the contents, ruling out even a hacky solution.

Why No Customize API?:

Unlike reCAPTCHA API Version 1.0, there are no customize options in API Version 2.0. If we consider how this new API works, it's no surprise why.

Excerpt from Are you a robot? Introducing “No CAPTCHA reCAPTCHA”:

While the new reCAPTCHA API may sound simple, there is a high degree of sophistication behind that modest checkbox. CAPTCHAs have long relied on the inability of robots to solve distorted text. However, our research recently showed that today’s Artificial Intelligence technology can solve even the most difficult variant of distorted text at 99.8% accuracy. Thus distorted text, on its own, is no longer a dependable test.

To counter this, last year we developed an Advanced Risk Analysis backend for reCAPTCHA that actively considers a user’s entire engagement with the CAPTCHA—before, during, and after—to determine whether that user is a human. This enables us to rely less on typing distorted text and, in turn, offer a better experience for users. We talked about this in our Valentine’s Day post earlier this year.

If you were able to directly manipulate the styling of the control elements, you could easily interfere with the user-profiling logic that makes the new reCAPTCHA possible.

What About a Custom Theme?:

Now the new API does offer a theme option, by which you can choose a preset theme such as light and dark. However there is not presently a way to create a custom theme. If we inspect the iframe, we will find the theme name is passed in the query string of the src attribute. This URL looks something like the following.

https://www.google.com/recaptcha/api2/anchor?...&theme=dark&...

This parameter determines what CSS class name is used on the wrapper element in the iframe and determines the preset theme to use.

element class name

Digging through the minified source, I found that there are actually 4 valid theme values, which is more than the 2 listed in the documentation, but default and standard are the same as light.

object of classes

We can see the code that selects the class name from this object here.

class choosing code

There is no code for a custom theme, and if any other theme value is specified, it will use the standard theme.

In Conclusion:

At present, there is no way to fully style the new reCAPTCHA elements, only the wrapper elements around the iframe can be stylized. This was almost-certainly done intentionally, to prevent users from breaking the user profiling logic that makes the new captcha-free checkbox possible. It is possible that Google could implement a limited custom theme API, perhaps allowing you to choose custom colors for existing elements, but I would not expect Google to implement full CSS styling.

Thanks to user Alexander O'Mara

Comments