Problem with new reCAPTCHA in a single-page AngularJS app

[Thomas Deater]

We are building a multi-step registration flow as a single-page AngularJS app. There is a reCAPTCHA on step 1. When the user successfully submits that form, we destroy that view (including the reCAPTCHA element and iframe) and render step 2. However, there appear to be various event-bindings related to reCAPTCHA that are left on the page, which results in multiple errors being logged to the console each time the user clicks any element in step 2:

Uncaught SecurityError: Blocked a frame with origin "https://www.google.com" from accessing a frame with origin "https://foo.com". Protocols, domains, and ports must match.

I think the new reCAPTCHA really needs a destroy() method (like the old reCAPTCHA) to clean this up.

[Sergey Coder]

Confirm this. I'm also getting this error. I have an ajax form that submits login, password and recaptcha fields. While I enter login, password, captcha and submit it - everything is ok. But when the new form is loaded from ajax response and I re-render the captcha - Uncaught SecurityError appears when I click "I'm not a robot checkbox".

среда, 10 декабря 2014 г., 0:11:57 UTC+2 пользователь Thomas Deater написал:

[Arif Setiawan]

Hi Thomas, can you share how to implement new recaptcha on angularjs?

because i've struggling for hours with no luck, thanks before :)

[Thomas Deater]

We used this reCAPTCHA directive as a starting point, but have modified it extensively:

https://github.com/mllrsohn/angular-re-captcha

[Dorian Karter]

You guys should try this out:

https://github.com/CodeDistillery/angular-no-captcha

[盛貫銘]

This doesn't solve the problem which original post describes.

Dorian Karter於 2014年12月11日星期四UTC+8上午6時01分37秒寫道：

[盛貫銘]

I can confirm this, too.

My dirty workaround was to manually remove div.pls-container before calling grecaptcha.reset function.

[Thomas Deater]

I'll give your workaround a try. It sounds less dirty than my current workaround of preserving the grecaptcha iframe (moving it offscreen) in the $scope.$on('$destroy') handler.

[Thomas Deater]

It turns out we're also experiencing the multiple "blocked a frame" errors (as the user clicks/interacts with our form) when we call grecaptcha.reset(id) (if, for example, the server returned an error message about invalid form values, and we want to reset the captcha). 

[Dorian Karter]

The angular library I posted early has posted an updated version with recaptcha reset functionality. maybe this would help:

https://github.com/CodeDistillery/angular-no-captcha/issues/4

[Thomas Deater]

That library does look good, but it doesn't appear to do anything different (in regards to destroy or reset) than we're already doing. We think it's Google's code that needs to be fixed.

[Ivan Lovrić]

I want to try your dirty wokraround, but can't find this div anywhere, I searched the code in web deveoper. Where is it?

[Thomas Deater]

We're doing this in our AngularJS app:

if (typeof _id !== 'undefined') {

                    angular.element(document.querySelectorAll('.pls-container')).remove();

                    grecaptcha.reset(_id);

[Mirza Licina]

I have the same problem, I guess we'll just have to wait until their team solves this.

in the mean time, you could use this (angular + coffeescript)

    scope.$on '$destroy', ->

      if widget_id?

        grecaptcha.reset(widget_id)

        # clean dom

        frame_element = angular.element(

          document.querySelectorAll('.pls-container')

          )

        if frame_element.length > 0

          frame_element = frame_element.parent()

        ins_element = frame_element.next()

        if frame_element.css("position") == "absolute"

          frame_element.remove()

        if ins_element.prop("tagName") == "INS"

          ins_element.remove()

[Daniele Tessaro]

Same problem here. 

Is there any plan for fixing it? I don't feel very comfortable with the proposed workaround, since it is not really safe.

Things could break very easily if they change the implementation of the library.

d.

[Meruem]

agreed

[Matúš Lešťan]

Same problem here. I'm using above mentioned https://github.com/CodeDistillery/angular-no-captcha and it hits the same problem 

[Veikko Karsikko]

We have now resolved this in https://github.com/CodeDistillery/angular-no-captcha version 0.4.3 (c2a7e451). Please check it out!