🐛 Bug Report: Front-end config is available to unauthorized users

[AhrazA]

📜 Description

The backend injects the front-end config into the bundle upon initialization here.

The issue is that this configuration is available to users before authentication. It can reveal details about various integrations enabled in Backstage and other internal data with that should not be shared to unauthorized users. For example the Backstage demo configuration contains cost metrics that, in an ideal case, should not be shared with unauthorized parties.

👍 Expected behavior

The front-end app config is not available to users prior to authorization.

👎 Actual Behavior with Screenshots

When navigating to the sign in page as an unauthorized user of a Backstage instance with auth providers configured, the entire front-end app config is available.

👟 Reproduction steps

1. Create a Backstage start by running npx @backstage/create-app@latest
2. Run yarn build:all
3. Run yarn start-backend
4. Navigate to http://localhost:7007
5. View the script tag in index.html with type="backstage.io/config"

📃 Provide the context for the Bug.

No response

🖥️ Your Environment

No response

👀 Have you spent some time to check if this bug has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

Are you willing to submit PR?

No, I don't have time to work on this right now

[awanlin]

Hi @AhrazA, perhaps this could help? https://backstage.io/docs/tutorials/enable-public-entry

[AhrazA]

Hey @awanlin, thanks for your input. This looks like exactly what we are after. Unfortunately, the instructions provided did not work for me and there are no working examples I can find that demonstrate how to get it working.

We are on Backstage version 1.31.1. I followed the steps on how to get this working for the new frontend system and ended up with this:

packages/app/src/index-public-experimental.tsx:

import React from 'react';

import ReactDOM from 'react-dom/client';

import { SignInPage } from "@backstage/core-components";
import { microsoftAuthApiRef } from '@backstage/core-plugin-api';
import { SignInPageBlueprint, createFrontendModule } from '@backstage/frontend-plugin-api';
import { createPublicSignInApp } from '@backstage/frontend-defaults';

const microsoftSignInPage = SignInPageBlueprint.make({
  name: 'microsoft',
  params: {
    loader: async () => props => {
      return (
        <SignInPage
          {...props}
          auto
          provider={{
            id: 'microsoft-auth-provider',
            title: 'Microsoft Entra ID',
            message: 'Sign in using your account',
            apiRef: microsoftAuthApiRef,
          }}
        />
      )
    }
  }
});

const signInPageModule = createFrontendModule({
  pluginId: 'app',
  extensions: [microsoftSignInPage]
});

const app = createPublicSignInApp({
  features: [signInPageModule],
});

ReactDOM.createRoot(document.getElementById('root')!).render(app.createRoot());

This results in the following error when trying to load the page:

Navigated to http://localhost:7007/
react-dom.production.min.js:188 Error: Failed to instantiate extension 'app/root', expected at most one 'signInPage' input but received multiple: 'sign-in-page:app', 'sign-in-page:app/microsoft'
    at $p (instantiateAppNodeTree.esm.js:204:11)
    at n (instantiateAppNodeTree.esm.js:238:21)
    at instantiateAppNodeTree.esm.js:228:31
    at Array.flatMap (<anonymous>)
    at n (instantiateAppNodeTree.esm.js:227:45)
    at instantiateAppNodeTree.esm.js:228:31
    at Array.flatMap (<anonymous>)
    at n (instantiateAppNodeTree.esm.js:227:45)
    at Ua (instantiateAppNodeTree.esm.js:245:3)
    at zp (createSpecializedApp.esm.js:141:3)
Ti @ react-dom.production.min.js:188
(anonymous) @ react-dom.production.min.js:188
$o @ react-dom.production.min.js:156
Ws @ react-dom.production.min.js:261
Qs @ react-dom.production.min.js:259
Yc @ react-dom.production.min.js:258
qc @ react-dom.production.min.js:282
kn @ react-dom.production.min.js:280
Ys @ react-dom.production.min.js:268
C @ scheduler.production.min.js:13
Ve @ scheduler.production.min.js:14
react-dom.production.min.js:282 Uncaught Error: Failed to instantiate extension 'app/root', expected at most one 'signInPage' input but received multiple: 'sign-in-page:app', 'sign-in-page:app/microsoft'
    at $p (instantiateAppNodeTree.esm.js:204:11)
    at n (instantiateAppNodeTree.esm.js:238:21)
    at instantiateAppNodeTree.esm.js:228:31
    at Array.flatMap (<anonymous>)
    at n (instantiateAppNodeTree.esm.js:227:45)
    at instantiateAppNodeTree.esm.js:228:31
    at Array.flatMap (<anonymous>)
    at n (instantiateAppNodeTree.esm.js:227:45)
    at Ua (instantiateAppNodeTree.esm.js:245:3)
    at zp (createSpecializedApp.esm.js:141:3)
$p @ instantiateAppNodeTree.esm.js:204
n @ instantiateAppNodeTree.esm.js:238
(anonymous) @ instantiateAppNodeTree.esm.js:228
n @ instantiateAppNodeTree.esm.js:227
(anonymous) @ instantiateAppNodeTree.esm.js:228
n @ instantiateAppNodeTree.esm.js:227
Ua @ instantiateAppNodeTree.esm.js:245
zp @ createSpecializedApp.esm.js:141
n @ createApp.esm.js:37

Seems like createPublicSignInApp registers its own front-end module for sign-in with the guest provider enabled. Changing the name of the pluginId from app to something else prevents the error, but it renders the guest provider sign in page and not the sign in page I have configured.

[AhrazA]

I have also tried this with the default starter (@backstage/create-app) and the same issue occurs there.

[AhrazA]

Checking in here, any input?

I see the bug tag was removed from this issue, so is it something that we are doing wrong? It appears to me that any provider other than the guest authentication provider is not compatible with the public entry-point, which does not seem like intended functionality to me.

[freben]

The error says that there are two pages registered into an input that can only accept one. When you instantiated your blueprint you gave it a name property, which made it so that its full ID was sign-in-page:app/microsoft instead of just sign-in-page:app.

You want to remove the name so that it replaces the out-of-the-box page. Or alternatively, keep the name property, but explicitly disable the builtin one (e.g. in config). The former probably makes the most sense.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tommy04062019]

I have same problem that cause leaking some informations in our organization. [enable-public-entry](https://backstage.io/docs/tutorials/enable-public-entry) not work or lack of document :(