Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enable CORS by including credentials when fetching Remotes on other Domains #589

Open
pganster opened this issue Mar 26, 2024 · 0 comments
Open

Enable CORS by including credentials when fetching Remotes on other Domains #589

pganster opened this issue Mar 26, 2024 · 0 comments

Comments

@pganster
Copy link

Is your feature request related to a problem? Please describe.

Currently, it is impossible to fetch a remoteEntry.js from a remote that is hosted on a different authenticated domain than the host as the Cookie of the different domain is not included.

Generally in Javascript, one can use the credentials: 'include' option, to fetch a file from a different authenticated domain via the Fetch API, see here. Similarly, a script from another authenticated domain can be included, by setting crossorigin="use-credentials" to a <script /> tag, see here.

Describe the solution you'd like

I'd love to see a property added to Remote that enables that script to be fetched from a different domain with credentials. For example

federation({
      name: 'my-app',
      remotes: {
        'remote-app': {
          external: 'https://my-remote-host.test/remoteEntry.js',
          credentials: 'include' // or cors: true ?
        },
      }
// (...)
)

Describe alternatives you've considered

As soon as you include a <script /> tag with crossorigin="use-credentials" in the <head />, all subsequent imports will also include the credentials when fetching that script, no matter if they have crossorigin set or not.

By building upon this behavior, we've built the following workaround, which includes a script tag, and afterwards resolves the promise, so that the federation plugin can do it's work by importing the URL, where that request in turn will then include the credentials.

federation({
      name: 'my-app',
      remotes: {
        'remote-app': {
          external: `new Promise(${loadRemoteEntry.toString()})`,
          externalType: 'promise',
        },
     }
// (...)
);

function loadRemoteEntry(resolve: (url: string) => void) {
  const url = 'https://my-remote-host.test/remoteEntry.js';
  const script = document.createElement('script')
  const onFinish = () => {
    resolve(url);
    document.head.removeChild(script);
  }
  script.src = url;
  script.type = 'module';
  script.crossOrigin = 'use-credentials';
  script.onload = onFinish;
  script.onerror = onFinish;
  document.head.appendChild(script);
}

But of course, this should be the job of the federation plugin, so I'm hoping a feature like this will be included.
@pganster pganster changed the title Add CORS setting for remotes Enable CORS by including credentials when fetching Remotes on other Domains Mar 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@pganster