Authentication failed because the document is sandbox and lack of allow-same-origin

[theogumilang]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

1.5.9

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

None

Public or Confidential Client?

Public

Description

I tried to embed our web app in some iframe this iframe has sandbox property after we embed our web app I can't authenticate, after login, the pop-up will be blank and not be closed.

  export const msalConfig = {
    auth: {
        clientId: clientId,
        authority: `https://login.microsoftonline.com/${tenantId}`,
        redirectUri: "/",
        postLogoutRedirectUri: "/"
    },
    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: {
        windowHashTimeout: 59000, // Applies just to popup calls - In milliseconds
        iframeHashTimeout: 59000, // Applies just to silent calls - In milliseconds
        loadFrameTimeout: 59000 // Applies to both silent and popup calls - In milliseconds
    }
};
   <MsalProvider instance={msalInstance}>
                <AuthenticatedTemplate>
                    <div className="App">
                        <Routes>
                            <Route exact path="/" element={<SideBar />} />
                            <Route path="/Onlydashboard" element={<Dashboard />} />
                            <Route path="/DetailsCreateRequestAttendanceOnly" element={<DetailsCreateRequestAttendance />} />
                            <Route path="/DetailsCreateClaimbenefitOnly" element={<DetailsCreateClaimBenefit />} />
                            <Route path="/DetailsClaimBenefitOnly" element={<DetailsClaimBenefit />} />
                            <Route path="/ApproveRejectAttendanceOnly" element={<ApproveRejectAttendance />} />


                        </Routes>
                        <SideBar></SideBar>
                    </div>
                </AuthenticatedTemplate>
                <UnauthenticatedTemplate>
                    <span>Only unauthenticated users can see me.</span>
                </UnauthenticatedTemplate>
                <MsalAuthenticationTemplate interactionType={InteractionType.Popup}
                    authenticationRequest={request}>

                </MsalAuthenticationTemplate>
            </MsalProvider>

This is the error we got
Uncaught DOMException: Failed to read the 'cookie' property from 'Document': The document is sandboxed and lacks the 'allow-same-origin' flag.

Error Message

Uncaught DOMException: Failed to read the 'cookie' property from 'Document': The document is sandboxed and lacks the 'allow-same-origin' flag.

Msal Logs

No response

MSAL Configuration

export const msalConfig = {
    auth: {
        clientId: clientId,
        authority: `https://login.microsoftonline.com/${tenantId}`,
        redirectUri: "/",
        postLogoutRedirectUri: "/"
    },
    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: {
        windowHashTimeout: 59000, // Applies just to popup calls - In milliseconds
        iframeHashTimeout: 59000, // Applies just to silent calls - In milliseconds
        loadFrameTimeout: 59000 // Applies to both silent and popup calls - In milliseconds
    }
};

Relevant Code Snippets

<MsalProvider instance={msalInstance}>
                <AuthenticatedTemplate>
                    <div className="App">
                        <Routes>
                            <Route exact path="/" element={<SideBar />} />
                            <Route path="/Onlydashboard" element={<Dashboard />} />
                            <Route path="/DetailsCreateRequestAttendanceOnly" element={<DetailsCreateRequestAttendance />} />
                            <Route path="/DetailsCreateClaimbenefitOnly" element={<DetailsCreateClaimBenefit />} />
                            <Route path="/DetailsClaimBenefitOnly" element={<DetailsClaimBenefit />} />
                            <Route path="/ApproveRejectAttendanceOnly" element={<ApproveRejectAttendance />} />


                        </Routes>
                        <SideBar></SideBar>
                    </div>
                </AuthenticatedTemplate>
                <UnauthenticatedTemplate>
                    <span>Only unauthenticated users can see me.</span>
                </UnauthenticatedTemplate>
                <MsalAuthenticationTemplate interactionType={InteractionType.Popup}
                    authenticationRequest={request}>

                </MsalAuthenticationTemplate>
            </MsalProvider>

Reproduction Steps

1. Use Pop up authentication
2. Create Iframe with this property sandbox="allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox"
3. Login.

Expected Behavior

The pop-up will not be closed and blank

Identity Provider

Azure AD / MSA

Browsers Affected (Select all that apply)

Chrome

Regression

No response

Source

External (Customer)

[lalimasharda]

Hey @theogumilang ! I am not very familiar with sandboxing iframes but after reading a bit on this topic, does adding allow-same-origin flag to your sandbox property work for you?

[microsoft-github-policy-service]

@theogumilang This issue has been automatically marked as stale because it is marked as requiring author feedback but has not had any activity for 5 days. If your issue has been resolved please let us know by closing the issue. If your issue has not been resolved please leave a comment to keep this open. It will be closed automatically in 7 days if it remains stale.

[theogumilang]

Hey @theogumilang ! I am not very familiar with sandboxing iframes but after reading a bit on this topic, does adding allow-same-origin flag to your sandbox property work for you?

yes, after adding those properties. It will work properly.

[microsoft-github-policy-service]

This issue requires attention from the MSAL.js team and has not seen activity in 5 days. @lalimasharda please follow up.

[microsoft-github-policy-service]

This issue requires attention from the MSAL.js team and has not seen activity in 5 days. @lalimasharda please follow up.

[lalimasharda]

Hey @theogumilang, is this issue resolved now?