MsalProvider gives Content Security Policy directive: "script-src 'self'" error

Core Library

@azure/msal-browser

Core Library Version

2.12.1

Wrapper Library

@azure/msal-react

Wrapper Library Version

1.0.0-beta.1

Description

When I add <MsalProvider instance={msalInstance}> I get a “Content Security Policy” error and my app is not loading anymore. Locally it works fine, but after build and serve it on the Nginx docker container in Azure infrastructure I get this error. If I remove this context initialization the app starts to load again.

Error Message

runtime.js:747 Uncaught EvalError: Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “script-src ‘self’”.

Msal Logs

The app is crashing before it is even loaded

MSAL Configuration

{
    auth: {
        clientId: "my-client-id",
        authority: b2cPolicies.authorities.trustFramework.authority,
        knownAuthorities: [b2cPolicies.authorityDomain],
        redirectUri: `${uri}/login`,
    },
    cache: {
        storeAuthStateInCookie: isIE || isEdge || isFirefox
    }
};

Relevant Code Snippets

const msalInstance = new PublicClientApplication(msalConfig);
function App() {

  return (
    <MsalProvider instance={msalInstance}>
      <Provider store={store}>
        <ThemeProvider theme={lightTheme}>
          <AppContainer />
        </ThemeProvider>
      </Provider>
    </MsalProvider>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Reproduction Steps

1. Add <MsalProvider instance={msalInstance}> as shown in examples and the app is not loading

Expected Behavior

It should not crash an app

Identity Provider

Azure B2C Custom Policy

Browsers Affected (Select all that apply)

Chrome, Safari

Regression

No response

Source

External (Customer)

[jasonnutter]

@rvaitkus23 I see, thanks. We’ll put this in the backlog to investigate to see if there is anything we can do in the library to mitigate this issue. cc: @tnorling

[rvaitkus23]

I don’t have much knowledge about regenerator-runtime. I gave a couple of shots adding globalThis.regeneratorRuntime = undefined in index.ts and even index.html. Also I am not sure about the consequences of disabling regeneratorRuntime. I am a bit short in time so for me faster would be use @azure/msal-browser without @azure/msal-react, despite I have to reimplement, some useful stuff you made.