Content Security Policy Issue

[alanlong9278]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.17.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

2.0.19

Public or Confidential Client?

Public

Description

When call instance.loginPopup it throw these errors:

• FetchClient.mjs:59 Refused to connect to 'https://login.microsoftonline.com/xxxxxxxxx/oauth2/v2.0/token' because it violates the following Content Security Policy directive: "connect-src 'self' https://accounts.google.com metabase.us10.list-manage.com www.google-analytics.com http://localhost:9090 :8080 ws://:8080 ws://*:9630".
• FetchClient.mjs:59 Refused to connect to 'https://login.microsoftonline.com/xxxxxx/oauth2/v2.0/token' because it violates the document's Content Security Policy.
• BrowserAuthError: post_request_failed: Network request failed: If the browser threw a CORS error, check that the redirectUri is registered in the Azure App Portal as type 'SPA'
  The last one error is catched by

 msalIns
      .loginPopup(loginRequest)
      .then(res => {
        msalInstance.setActiveAccount(res.account);
      })
      .catch(e => {
        console.error(e);  // here
      });

and the 3 errors in the console log

Error Message

• FetchClient.mjs:59 Refused to connect to 'https://login.microsoftonline.com/xxxxxxxxx/oauth2/v2.0/token' because it violates the following Content Security Policy directive: "connect-src 'self' https://accounts.google.com metabase.us10.list-manage.com www.google-analytics.com http://localhost:9090 :8080 ws://:8080 ws://*:9630".
• FetchClient.mjs:59 Refused to connect to 'https://login.microsoftonline.com/xxxxxx/oauth2/v2.0/token' because it violates the document's Content Security Policy.
• BrowserAuthError: post_request_failed: Network request failed: If the browser threw a CORS error, check that the redirectUri is registered in the Azure App Portal as type 'SPA'

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

{
  auth: {
    clientId: 'b7284c77-5d56-4b47-a073-2ec5390624b',
    authority: `https://login.microsoftonline.com/05d75c05-fa1a-42e7-9cf1-eb416c396f2d`,
    // Full redirect URL, in form of http://localhost:3000
    redirectUri: "http://localhost:3000/unauthorized",
  },
  cache: {
    cacheLocation: "localStorage", // This configures where your cache will be stored
    storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
  },
  system: {
    allowNativeBroker: false, // Disables WAM Broker
    loggerOptions: {
      loggerCallback: (level, message, containsPii) => {
        if (containsPii) {
          return;
        }
        if (!window.showMsalLog) {
          return;
        }
        switch (level) {
          case LogLevel.Error:
            console.error(message);
            return;
          case LogLevel.Info:
            return;
          case LogLevel.Verbose:
            return;
          case LogLevel.Warning:
            console.warn(message);
            return;
          default:
            return;
        }
      },
    },
  },
}

Relevant Code Snippets

import { useMsal } from "@azure/msal-react";
import { useMemo } from "react";
import { t } from "ttag";
import * as Yup from "yup";

import FormCheckBox from "metabase/core/components/FormCheckBox";
import FormErrorMessage from "metabase/core/components/FormErrorMessage";
import FormInput from "metabase/core/components/FormInput";
import FormSubmitButton from "metabase/core/components/FormSubmitButton";
import { Form, FormProvider } from "metabase/forms";
import * as Errors from "metabase/lib/errors";
import { loginRequest, msalInstance } from "metabase/msal-auth";
import { Button } from "metabase/ui";

import type { LoginData } from "../../types";

const LOGIN_SCHEMA = Yup.object().shape({
  username: Yup.string()
    .required(Errors.required)
    .when("$isLdapEnabled", {
      is: false,
      then: schema => schema.email(Errors.email),
    }),
  password: Yup.string().required(Errors.required),
  remember: Yup.boolean(),
});

interface LoginFormProps {
  isLdapEnabled: boolean;
  hasSessionCookies: boolean;
  onSubmit: (data: LoginData) => void;
}

export const LoginForm = ({
  isLdapEnabled,
  hasSessionCookies,
  onSubmit,
}: LoginFormProps): JSX.Element => {
  const initialValues = useMemo(
    () => ({
      username: "",
      password: "",
      remember: !hasSessionCookies,
    }),
    [hasSessionCookies],
  );

  const validationContext = useMemo(
    () => ({
      isLdapEnabled,
    }),
    [isLdapEnabled],
  );

  const { instance: msalIns } = useMsal();
  const onLogin = () => {
    msalIns
      .loginPopup(loginRequest)
      .then(res => {
        msalInstance.setActiveAccount(res.account);
      })
      .catch(e => {
        console.error(e);
      });
  };

  return (
    
        
        <Button style={{ margin: "1rem 1rem" }} onClick={onLogin}>
          Sign in with SSO
        </Button>
        
   
  );
};

Reproduction Steps

1. Click Sign in with SSO button
2. input azure account and password
3. popup the err
4. Click again, the popup will be closed automatically

Expected Behavior

authorized successfully and dont throw error msg

Identity Provider

Azure B2C Basic Policy

Browsers Affected (Select all that apply)

Chrome

Regression

No response

Source

External (Customer)

[tnorling]

You will need to allow connection to login.microsoftonline.com in your CSP and this should resolve itself.