Problem with new reCAPTCHA in a single-page AngularJS app

5,717 views
Skip to first unread message

Thomas Deater

unread,
Dec 9, 2014, 5:11:57 PM12/9/14
to reca...@googlegroups.com
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

unread,
Dec 10, 2014, 7:34:17 AM12/10/14
to reca...@googlegroups.com
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

unread,
Dec 10, 2014, 8:35:49 AM12/10/14
to reca...@googlegroups.com
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

unread,
Dec 10, 2014, 9:34:48 AM12/10/14
to reca...@googlegroups.com
We used this reCAPTCHA directive as a starting point, but have modified it extensively:

Dorian Karter

unread,
Dec 10, 2014, 5:01:37 PM12/10/14
to reca...@googlegroups.com

盛貫銘

unread,
Dec 11, 2014, 5:33:55 AM12/11/14
to reca...@googlegroups.com
This doesn't solve the problem which original post describes.

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

盛貫銘

unread,
Dec 11, 2014, 5:37:13 AM12/11/14
to reca...@googlegroups.com
I can confirm this, too.
My dirty workaround was to manually remove div.pls-container before calling grecaptcha.reset function.

Thomas Deater

unread,
Dec 11, 2014, 11:28:01 AM12/11/14
to reca...@googlegroups.com
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

unread,
Dec 16, 2014, 10:25:25 AM12/16/14
to reca...@googlegroups.com
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

unread,
Dec 17, 2014, 1:20:06 PM12/17/14
to reca...@googlegroups.com
The angular library I posted early has posted an updated version with recaptcha reset functionality. maybe this would help:

Thomas Deater

unread,
Dec 18, 2014, 2:31:21 PM12/18/14
to reca...@googlegroups.com
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ć

unread,
Dec 24, 2014, 10:40:10 AM12/24/14
to reca...@googlegroups.com
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

unread,
Jan 5, 2015, 11:58:57 AM1/5/15
to reca...@googlegroups.com
We're doing this in our AngularJS app:

if (typeof _id !== 'undefined') {
                    angular.element(document.querySelectorAll('.pls-container')).remove();
                    grecaptcha.reset(_id);

Mirza Licina

unread,
Jan 11, 2015, 3:53:34 PM1/11/15
to reca...@googlegroups.com
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

unread,
Feb 3, 2015, 7:16:59 PM2/3/15
to reca...@googlegroups.com
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

unread,
Feb 13, 2015, 6:58:27 PM2/13/15
to reca...@googlegroups.com
agreed

Matúš Lešťan

unread,
Mar 8, 2015, 12:32:02 PM3/8/15
to reca...@googlegroups.com
Same problem here. I'm using above mentioned https://github.com/CodeDistillery/angular-no-captcha and it hits the same problem 

Veikko Karsikko

unread,
May 7, 2015, 5:04:52 AM5/7/15
to reca...@googlegroups.com
We have now resolved this in https://github.com/CodeDistillery/angular-no-captcha version 0.4.3 (c2a7e451). Please check it out!
Reply all
Reply to author
Forward
0 new messages