Embedded app multiple times into 3rd party website - stores influencing each other

[GeorgeKnap]

Which @ngrx/* package(s) are the source of the bug?

store

Minimal reproduction of the bug/regression with instructions

I have Angular + ngrx app that displays some data for solar power plants

When I embed this apps mltiple time into 3rd party website, an action dispatch in one iframe is processed by ngrx stores in both iframes.
I managed to set up reproducible demo here in stackblitz
https://stackblitz.com/edit/stackblitz-starters-7k9afz?file=src%2Fmain.ts
or here
https://vocavet-git-feature-vercel-georgeknap.vercel.app/

points to notice:
with devtools open this race condition does not happen

Expected behavior

each iframe's store works independently...

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s)

Ngrx: 16.0.1
Angular: 16.2

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[GeorgeKnap]

A good answer I got from stackoverflow is
https://stackoverflow.com/questions/77317663/multiple-embedded-ngrx-store-apps-sharing-the-same-store/77322900?noredirect=1#comment136331143_77322900

Iframes are just pages within a page. So far I remember, in the specs there is nothing that forces a browser to make IFrames memory isolated (sandboxing is different topic). So, in case of Chrome/Chromium/FF you basically open same page (i.e., instantiate same app) multiple times within same memory region (see an update to my answer). Last instantiated app wins and processes dispatched actions.

That said. How about being able to instantiate store with some random id hash that would pair all ngrx communication with the correct store?

[timdeschryver]

AFAIK that shouldn't happen.
It's hard to investigate because we don't see the NgRx store implementation.
It will be easier to investigate if you can create a minimal reproduction.

[GeorgeKnap]

I provide my store with provider functions in ApplicationConfig

    provideStore(reducers, {
      metaReducers,
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true,
        strictStateSerializability: false,
        strictActionSerializability: false,
      },
    }),
    provideState(permissionsFeature),
    provideState(userSettingsFeature),
    provideState(errorsHistoryStateFeature),
    provideState(plantsLibFeature),
    provideState(widgetGridsterFeature),
    provideState(breadcrumbsFeature),
    provideState(sharedFeature),