Platform: Devtools cross-origin data

[csutorasr]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Events can be sent from js code of different domains with devtools enabled.

What is the current behavior?

If an event comes from an other domain and the devtools is enabled then I get the following error. (This was thrown with code of google authentication.) If I remove the devtools module, then everything is working.

Error: DOMException: Blocked a frame with origin "http://localhost:4200" from accessing a cross-origin frame.
    at webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (http://localhost:4200/vendor.bundle.js:24751:12)
    at webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (http://localhost:4200/vendor.bundle.js:24694:21)
    at webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (http://localhost:4200/vendor.bundle.js:24634:25)
    at webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (http://localhost:4200/vendor.bundle.js:24598:17)
...
at handlerFn (http://localhost:4200/vendor.bundle.js:25524:32)
    at (anonymous) (https://apis.google.com/js/platform.js:17:347)
    at Ma (https://apis.google.com/js/platform.js:9:466)
    at b (https://apis.google.com/js/platform.js:17:330)
...

What are the steps to reproduce?

I managed it with an effect.

@Effect() authenticateGoogle$ = this.actions$.ofType(AUTHENTICATION_GOOGLE_STARTED)
        .mergeMap(() => {
                return Observable.fromPromise(gauth.signIn({
                    ux_mode: 'redirect'
                }))
                    .map(() => new AuthenticationGoogleCheckAction())
                    .catch(() => Observable.of(new AuthenticationGoogleFailedAction()));
        });

Is there anything else we should know?

I use the latest nightly and angular-cli.

The error is because the code is using data of the other sites. This stackoverflow question can help.

[robwormald]

I don't know there's much we can do about this, as its a browser level restriction. Please do re-open if you've got an idea.

[abdulkareemnalband]

I'm also having same issue but only when I use both router-store and store-devtools

But I'm not sure of real culprit as My Application is running under an Iframe and It is a Office.js addin which it self talks a lot with main window

[abdulkareemnalband]

may be this stacktrace can help

DOMException: Blocked a frame with origin "https://localhost:44349" from accessing a cross-origin frame.
    at derez (<anonymous>:2:5438)
    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: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)
    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)
    at Object.decycle (<anonymous>:2:6109)
    at Object.e.stringify (<anonymous>:1:9197)
    at stringify (<anonymous>:1:18991)
    at toContentScript (<anonymous>:1:20255)
    at Function.sendMessage [as send] (<anonymous>:1:20741)
    at DevtoolsExtension.notify (https://localhost:44349/js/app.js:37517:32)
    at ScanSubscriber.StoreDevtools.applyOperators.state [as accumulator] (https://localhost:44349/js/app.js:37899:31)
    at ScanSubscriber._tryNext (https://localhost:44349/js/vendor.js:44211:27)
    at ScanSubscriber._next (https://localhost:44349/js/vendor.js:44204:25)
    at ScanSubscriber.Subscriber.next (https://localhost:44349/js/vendor.js:15629:18)
    at ScanSubscriber.Subscriber$$1.next (https://localhost:44349/js/vendor.js:102666:29)
    at WithLatestFromSubscriber._next (https://localhost:44349/js/vendor.js:55883:34)
    at WithLatestFromSubscriber.Subscriber.next (https://localhost:44349/js/vendor.js:15629:18)
    at WithLatestFromSubscriber.Subscriber$$1.next (https://localhost:44349/js/vendor.js:102666:29)
    at Notification.observe (https://localhost:44349/js/vendor.js:41396:50)
    at QueueAction.ObserveOnSubscriber.dispatch (https://localhost:44349/js/vendor.js:42467:22)
    at QueueAction.AsyncAction._execute (https://localhost:44349/js/vendor.js:41917:18)
    at QueueAction.execute (https://localhost:44349/js/vendor.js:87862:18)
    at QueueScheduler.AsyncScheduler.flush (https://localhost:44349/js/vendor.js:41990:32)
    at QueueAction.schedule (https://localhost:44349/js/vendor.js:87856:24)
    at QueueScheduler.Scheduler.schedule (https://localhost:44349/js/vendor.js:86822:53)
    at ObserveOnSubscriber.scheduleMessage (https://localhost:44349/js/vendor.js:42471:33)
    at ObserveOnSubscriber._next (https://localhost:44349/js/vendor.js:42474:14)
    at ObserveOnSubscriber.Subscriber.next (https://localhost:44349/js/vendor.js:15629:18)
    at ObserveOnSubscriber.Subscriber$$1.next (https://localhost:44349/js/vendor.js:102666:29)
    at MergeMapSubscriber.notifyNext (https://localhost:44349/js/vendor.js:41286:30)
    at InnerSubscriber._next (https://localhost:44349/js/vendor.js:56563:21)
    at InnerSubscriber.Subscriber.next (https://localhost:44349/js/vendor.js:15629:18)
    at InnerSubscriber.Subscriber$$1.next (https://localhost:44349/js/vendor.js:102666:29)
    at MapSubscriber._next (https://localhost:44349/js/vendor.js:41616:26)
    at MapSubscriber.Subscriber.next (https://localhost:44349/js/vendor.js:15629:18)
    at MapSubscriber.Subscriber$$1.next (https://localhost:44349/js/vendor.js:102666:29)
    at MergeMapSubscriber.notifyNext (https://localhost:44349/js/vendor.js:41286:30)
    at InnerSubscriber._next (https://localhost:44349/js/vendor.js:56563:21)
    at InnerSubscriber.Subscriber.next (https://localhost:44349/js/vendor.js:15629:18)
    at InnerSubscriber.Subscriber$$1.next (https://localhost:44349/js/vendor.js:102666:29)
    at SkipSubscriber._next (https://localhost:44349/js/vendor.js:53470:30)
    at SkipSubscriber.Subscriber.next (https://localhost:44349/js/vendor.js:15629:18)
    at SkipSubscriber.Subscriber$$1.next (https://localhost:44349/js/vendor.js:102666:29)
    at ActionsSubject.Subject.next (https://localhost:44349/js/vendor.js:15865:25)
    at ActionsSubject.BehaviorSubject.next (https://localhost:44349/js/vendor.js:41115:31)
    at ActionsSubject.next (https://localhost:44349/js/app.js:15144:31)
    at Store.dispatch (https://localhost:44349/js/app.js:15420:30)
    at SafeSubscriber._next (https://localhost:44349/js/1.chunk.js:3856:29)
    at SafeSubscriber.__tryOrUnsub (https://localhost:44349/js/vendor.js:15778:16)
    at SafeSubscriber.next (https://localhost:44349/js/vendor.js:15725:22)
    at Subscriber._next (https://localhost:44349/js/vendor.js:15665:26)
    at Subscriber.next (https://localhost:44349/js/vendor.js:15629:18)
    at Subscriber$$1.next (https://localhost:44349/js/vendor.js:102666:29)
    at ForkJoinSubscriber.notifyComplete (https://localhost:44349/js/vendor.js:85070:25)
    at InnerSubscriber._complete (https://localhost:44349/js/vendor.js:56570:21)
    at InnerSubscriber.Subscriber.complete (https://localhost:44349/js/vendor.js:15654:18)
    at ZoneDelegate.419.ZoneDelegate.invoke (https://localhost:44349/js/polyfills.js:7831:26)
    at Object.onInvoke (https://localhost:44349/js/vendor.js:4410:33)
    at ZoneDelegate.419.ZoneDelegate.invoke (https://localhost:44349/js/polyfills.js:7830:32)
    at Zone.419.Zone.run (https://localhost:44349/js/polyfills.js:7581:43)
    at InnerSubscriber.Subscriber$$1.complete (https://localhost:44349/js/vendor.js:102687:41)
    at https://localhost:44349/js/1.chunk.js:3832:34
    at https://appsforoffice.microsoft.com/lib/1/hosted/outlook-web-16.01.js:9:194083
    at Object.e [as callback] (https://appsforoffice.microsoft.com/lib/1/hosted/outlook-web-16.01.js:9:195122)
    at rt (https://appsforoffice.microsoft.com/lib/1/hosted/outlook-web-16.01.js:9:92965)
    at ZoneDelegate.419.ZoneDelegate.invokeTask (https://localhost:44349/js/polyfills.js:7864:31)
    at Zone.419.Zone.runTask (https://localhost:44349/js/polyfills.js:7631:47)
    at ZoneTask.419.ZoneTask.invokeTask [as invoke] (https://localhost:44349/js/polyfills.js:7938:34)
    at invokeTask (https://localhost:44349/js/polyfills.js:8810:14)
    at globalZoneAwareCallback (https://localhost:44349/js/polyfills.js:8836:21)

[csutorasr]

I also tried to disable CORS (btw in ng serve it is disabled) however it did not help.

[amalshehu]

Yes having the same issue when adding @ngrx/router-store. Any workarounds?

[aliszafar1]

+1 with ngx-facebook (Facebook Auth)

[csutorasr]

SOLUTION

Code in this comment can solve the problem: issue.

It sanitizes the objects to remove CORS data.

[jordangotbaum]

@csutorasr Is there any chance you could show how you integrated the effect with the gauth login? Trying to solve the same problem with regards to gauth, though it may not be as pertinent to this thread. I would really appreciate it.