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

[rvaitkus23]

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 Can you please confirm that you have deployed a production build (as opposed to development build) of your app? That is the only thing that comes to mind as to why you would get this error.

[rvaitkus23]

@jasonnutter yes. The process of deployment is to make a build, move it to the Nginx docker and serve as static files. Using Ejected CRA. React version 17.0.1.

Does that make a difference?

[jasonnutter]

@rvaitkus23 The MSAL React library does not use eval anywhere, so it must be in a dev dependency. Do you have a live url you can share where I can see this error? Email is in my profile, thanks!

[jasonnutter]

@rvaitkus23 Thanks for sharing. It looks like this is being triggered by regenerator-runtime. Please see this issue for a potential work around.

@AndrewCraswell Did you end up figuring out how to disable strict mode with CRA?

cc @tnorling

[rvaitkus23]

Thank you @jasonnutter . the issue is triggered in regenerator-runtime. However, the described workaround does not look acceptable. For now, I am implementing my own simple wrapper and will not use '@azure/msal-browser' till it will be solved.
I liked how it works, but can't use it as it is now.
You can close or leave this issue for tracking.
Thanks

[jasonnutter]

However, the described workaround does not look acceptable

Out of curiosity, did you try the workaround, it worked, but not find it acceptable from a code perspective, or did the workaround not fix the issue?

[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.

[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