DOMException when submitting a form about ng-recaptcha

[DethAriel]

@Empereol hi, and thanks for submitting this!

First things first - if you are not sending recaptcha value to the server - you're not protecting yourself, just irritating your "good" users. I would strongly recommend you to re-evaluate your usage of Google reCAPTCHA.

In order to debug this error further I would need to know how your form submit code looks like, could you please provide it?

[Empereol]

I should have phrased that better. I'm currently not validating the recaptcha value because my API doesn't support it yet and I'm just trying to mock out the front-end app.

The form submit just emits a portion of the form's values to it's parent component who then dispatches an NGRX action which does a POST to the API.

// register-form.component.ts
...
public onSubmit(evt: Event): void {
	evt.stopPropagation();

	if (this.isFormValid()) {
		this.submit.emit(this.createModel(this.registerForm));
	}
}
...

// applicant-register.component.ts
...
public onSubmit(body: cshp_prams_api.IAuthRegisterBody): void {
	this.store.dispatch(new auth.Register(body));
}
...

// auth.effects.ts
...
@Effect()
register$: Observable<Action> = this.actions$
	.ofType(auth.REGISTER)
	.debounceTime(300)
	.map(toPayload)
	.switchMap((payload: cshp_prams_api.IAuthRegisterBody) => {
		return this.data.register(payload)
			.map(data => {
				this.storage.user_id = data.user.id;

				return new auth.RegisterSuccess(data.user);
			})
			.catch(() => of(new auth.RegisterFailure()));
	});
...

// data.service.ts
...
public register(body: cshp_prams_api.IAuthRegisterBody): Observable<cshp_prams_api.IAuthRegister> {
	return this.api.register(body).map(response => response.data);
}
...

// api.service.ts
...
public register(body: cshp_prams_api.IAuthRegisterBody): Observable<cshp_prams_api.IAuthRegisterResponse> {
	return this.do<cshp_prams_api.IAuthRegisterResponse>(RequestMethod.Post, `/auth/register`, body);
}
...
private do<T>(requestMethod: RequestMethod, resource: string, data?: Object): Observable<T> {
	return this.http.request(`${this.apiURL}${resource}`, {
		method: requestMethod,
		body: data,
		headers: this.getHeaders(),
	})
	.catch(error => this.handleError(error))
	.map(success => this.handleSuccess<T>(success));
}
...

[DethAriel]

Could you also please provide the source of the error? I believe there should be either a stack trace or at least the file name. Plus, could you try and see whether it reproduces with the test reCAPTCHA site key of "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"?

[Empereol]

Console error below...

core.es5.js:2925 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
ApplicantRegisterComponent.html:3 ERROR DOMException: Blocked a frame with origin "http://localhost:4200" from accessing a cross-origin frame.
    at derez (<anonymous>:2:5437)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:5890)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
    at derez (<anonymous>:2:6072)
View_ApplicantRegisterComponent_0 @ ApplicantRegisterComponent.html:3
proxyClass @ compiler.es5.js:14975
webpackJsonp.../../../core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13398
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080
(anonymous) @ core.es5.js:10767
schedulerFn @ core.es5.js:3647
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:185
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55
webpackJsonp.../../../core/@angular/core.es5.js.EventEmitter.emit @ core.es5.js:3621
webpackJsonp.../../../../../src/app/shared/register-form/register-form.component.ts.RegisterFormComponent.onSubmit @ register-form.component.ts:49
(anonymous) @ RegisterFormComponent.html:1
handleEvent @ core.es5.js:11997
callWithDebugContext @ core.es5.js:13458
debugHandleEvent @ core.es5.js:13046
dispatchEvent @ core.es5.js:8601
(anonymous) @ core.es5.js:10763
schedulerFn @ core.es5.js:3647
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:185
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55
webpackJsonp.../../../core/@angular/core.es5.js.EventEmitter.emit @ core.es5.js:3621
webpackJsonp.../../../forms/@angular/forms.es5.js.FormGroupDirective.onSubmit @ forms.es5.js:4801
(anonymous) @ RegisterFormComponent.html:1
handleEvent @ core.es5.js:11997
callWithDebugContext @ core.es5.js:13458
debugHandleEvent @ core.es5.js:13046
dispatchEvent @ core.es5.js:8601
(anonymous) @ core.es5.js:9212
(anonymous) @ platform-browser.es5.js:2651
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
onInvokeTask @ core.es5.js:3881
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1370
globalZoneAwareCallback @ zone.js:1388
ApplicantRegisterComponent.html:3 ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 3, nodeDef: Object, elDef: Object, elView: Object}
View_ApplicantRegisterComponent_0 @ ApplicantRegisterComponent.html:3
proxyClass @ compiler.es5.js:14975
webpackJsonp.../../../core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13398
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1085
(anonymous) @ core.es5.js:10767
schedulerFn @ core.es5.js:3647
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:185
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55
webpackJsonp.../../../core/@angular/core.es5.js.EventEmitter.emit @ core.es5.js:3621
webpackJsonp.../../../../../src/app/shared/register-form/register-form.component.ts.RegisterFormComponent.onSubmit @ register-form.component.ts:49
(anonymous) @ RegisterFormComponent.html:1
handleEvent @ core.es5.js:11997
callWithDebugContext @ core.es5.js:13458
debugHandleEvent @ core.es5.js:13046
dispatchEvent @ core.es5.js:8601
(anonymous) @ core.es5.js:10763
schedulerFn @ core.es5.js:3647
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:185
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55
webpackJsonp.../../../core/@angular/core.es5.js.EventEmitter.emit @ core.es5.js:3621
webpackJsonp.../../../forms/@angular/forms.es5.js.FormGroupDirective.onSubmit @ forms.es5.js:4801
(anonymous) @ RegisterFormComponent.html:1
handleEvent @ core.es5.js:11997
callWithDebugContext @ core.es5.js:13458
debugHandleEvent @ core.es5.js:13046
dispatchEvent @ core.es5.js:8601
(anonymous) @ core.es5.js:9212
(anonymous) @ platform-browser.es5.js:2651
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
onInvokeTask @ core.es5.js:3881
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1370
globalZoneAwareCallback @ zone.js:1388

The provided site key produced the same error.

[DethAriel]

This error generally happens when one is trying to directly access iframe content. This is not what ng-recaptcha does, however. This mechanism is fully controlled by Google reCAPTCHA scripts. I guess you made sure that your code doesn't try to access some iframe (thus resulting in this error).

My suggestion would be to come up with a plunker that will reproduce this issue. I'm afraid there's not much I can do without it at the moment.

[Empereol]

Thanks for the investigation. I'll see if I can come up with a Plunker at some point that reproduces the problem.

AFAIK, my code should not be trying to access any iframes since the only iframe is the one generated from the recaptcha module.

[jpinxten]

@Empereol I had the same issue when i navigated to another lazy loaded feature module. For me it had to do with the webpack-dev-server (see: webpack/webpack-dev-server#1052)
You can test if you have the same issue by deploying your code on a different server.

[DethAriel]

@Empereol were you able to find out what the root cause of this was?

[Empereol]

@DethAriel , Sorry, no, I never found the root cause. I just removed the recaptcha component from my project since it wasn't a strict requirement.

I'll close this out since I'm unable to provide a proper example.

Thanks.