Použití MSAL v aplikacích v rámci prvku iframe

Ve výchozím nastavení MSAL brání přesměrováním celého rámce na koncový bod ověřování Microsoft Entra ID, když je aplikace vykreslována uvnitř prvku iframe, což znamená, že pro interakci uživatele se zprostředkovatelem identity nemůžete použít rozhraní API pro přesměrování:

  • Toto omezení se ukládá, protože Microsoft Entra ID odmítne vykreslit všechny výzvy, které vyžadují interakci uživatele (např. zadání přihlašovacích údajů, souhlas, odhlášení atd.) v prvku iframe vyvoláním X-FRAME OPTIONS SET TO DENYchyby, opatření přijatých k zabránění útokům clickjacking.
  • Místo toho se budete muset spoléhat na automaticky otevíraná rozhraní API služby MSAL, pokud se vyžaduje interakce uživatele, a/nebo tichá rozhraní API (, ssoSilent()) pokudacquireTokenSilent() se můžete vyhnout interakci uživatele.
  • Podobně budete muset k odhlášení použít API logoutPopup() (:warning: pokud vaše aplikace používá verzi msal-browser starší než v2.13, nezapomeňte provést upgrade a nahradit rozhraní API logout(), protože se pokusí o přesměrování celého rámce na Microsoft Entra ID).
  • Při použití rozhraní API pro vyskakovací okna musíte zohlednit veškerá omezení sandboxování, která stanoví nadřazená aplikace. Konkrétně musí nadřazená aplikace nastavit příznak allow-popups, když je iframe v režimu sandbox.

Azure AD B2C nabízí vložené přihlašovací prostředí, které umožňuje vykreslovat vlastní přihlašovací uživatelské rozhraní v prvku iframe. Vzhledem k tomu, že msAL ve výchozím nastavení brání přesměrování v rámci iframe, budete muset nastavit možnost konfigurace allowRedirectInIframe na hodnotu true , aby bylo možné tuto funkci využít. Upozorňujeme, že povolení této možnosti pro aplikace na Microsoft Entra ID se nedoporučuje kvůli výše uvedenému omezení.

Omezení prohlížeče

Vzhledem k tomu, že soubory cookie relace Microsoft Entra v rámci prvku iframe jsou považovány za soubory cookie třetích stran, některé prohlížeče (například Safari nebo Chrome v anonymním režimu) tyto soubory cookie ve výchozím nastavení blokují nebo vymažou. To ovlivní fungování jednotného přihlašování u aplikací vložených v iframe, protože nebudou mít přístup ke cookie relace poskytovatele identity (IdP) (viz Jednotné přihlašování).

Kromě toho platí, že když jsou soubory cookie třetích stran v Chromu zakázané, nebudou mít aplikace MSAL v rámci iframed přístup k místnímu úložišti ani k úložišti relací. MSAL v tomto případě přejde na úložiště v paměti.

Jednotné přihlášení

Můžete dosáhnout jednotného přihlašování mezi aplikací v iframe a nadřazenou aplikací u aplikací se stejným původemi u aplikací s různým původem, pokud z nadřazené aplikace do aplikace v iframe předáte identifikátor účtu.

Aplikace se stejným původem

Aplikace vložené v rámci iframe a nadřazené aplikace se stejným původem mohou mít přístup ke stejné instanci mezipaměti MSAL.js a umožňovat přihlášení bez výzev, pokud obě aplikace nakonfigurují MSAL tak, aby pro ukládání do mezipaměti používal místní úložiště. Další informace: Jednotné přihlašování pomocí MSAL.js

Aplikace s více zdroji

Rozhraní Iframed a nadřazené aplikace s více zdroji můžou k dosažení jednotného přihlašování využít rozhraní API ssoSilent(). Aby to bylo možné, nadřazená aplikace by měla aplikaci v iframe předat buď účet, loginHint (uživatelské jméno), nebo ID relace (sid).

Aplikace se můžou pokusit použít ssoSilent bez jakýchkoli výše uvedených parametrů. Mějte však na paměti, že při použití ssoSilent existují další okolnosti, aniž byste poskytli jakékoli informace o uživatelské relaci.

Pro komunikaci napříč různými zdroji mezi aplikací vloženou v iframe a rodičovskou aplikací můžete zvážit několik alternativ:

  • Řetězce dotazů můžete přidat do zdroje prvku iframe v nadřazené aplikaci a načíst je později v podřízené aplikaci:
// Create the main myMSALObj instance
// configuration parameters are located at authConfig.js
const myMSALObj = new msal.PublicClientApplication({
    auth: {
        clientId: "ENTER_CLIENT_ID",
        authority: "https://login.microsoftonline.com/ENTER_TENANT_ID",
        redirectUri: "/redirect", // set to a blank page for handling auth code response via popups
    },
    cache: {
        cacheLocation: "localStorage", // set your cache location to local storage
    },
});

window.onload = () => {
    
    const urlParams = new URLSearchParams(window.location.search);
    const sid = urlParams.get("sid");

    // attempt SSO
    myMSALObj.ssoSilent({
        sid: sid
    }).then((response) => {
        // do something with response
    }).catch(error => {
        // handle errors
    });
}
  • V nadřazené aplikaci můžete použít rozhraní POSTMessage() API a naslouchat událostem zpráv v podřízené aplikaci:
// Create the main myMSALObj instance
// configuration parameters are located at authConfig.js
const myMSALObj = new msal.PublicClientApplication({
    auth: {
        clientId: "ENTER_CLIENT_ID",
        authority: "https://login.microsoftonline.com/ENTER_TENANT_ID",
        redirectUri: "/redirect", // set to a blank page for handling auth code response via popups
    },
    cache: {
        cacheLocation: "localStorage", // set your cache location to local storage
    },
});

const parentDomain = "http://localhost:3001";

window.addEventListener("message", (event) => {
    // check the origin of the data
    if (event.origin === parentDomain) {
        const sid = event.data;

        // attempt SSO
        myMSALObj.ssoSilent({
            sid: sid
        }).then((response) => {
            // do something with response
        }).catch(error => {
            // handle errors
        });
    }
});

Zpracování chyb

Pokud dojde k ssoSilent() selhání, měli byste zachytit a zpracovat případné chyby. Zejména jde o toto:

  • InteractionRequiredError: Vyvolá se v případě potřeby souhlasu, uživatel musí provést vícefaktorové ověřování atd. Tuto chybu lze často zpracovat jednoduše inicializováním interaktivního rozhraní API.
  • BrowserAuthError: bude vyvolána, pokud není k dispozici žádný nebo je zadán neplatný account hint, automaticky otevíraná okna jsou blokována apod. Bude nutné zkontrolovat errorCode a tyto situace odpovídajícím způsobem ošetřit.
    myMSALObj.ssoSilent({
        sid: sid
    }).then((response) => {
            // do something with response
        }).catch(error => {
            if (error instanceof msal.InteractionRequiredAuthError) {
                myMSALObj.loginPopup()
                    .then((response) => {
                        // do something with response
                    });
            } else if (error instanceof msal.BrowserAuthError) {
                if (error.errorCode === "silent_sso_error") {
                    // e.g. username is null
                }
                if (error.errorCode === "popup_window_error") {
                    // e.g. popups are blocked
                }
            } else {
                console.log(error);
            }
        });

Interakce uživatele

Pokud chcete minimalizovat komunikaci s poskytovatelem identity (IdP), která vyžaduje zásah uživatele, nebo pokud máte z jakéhokoli důvodu problémy s vyskakovacími okny, můžete zvážit tyto možnosti:

  • Udělení souhlasu správce Tím se zajistí, že aplikace při prvním přihlášení uživatelů nezobrazí žádné výzvy k vyjádření souhlasu s oprávněními vyžadovanými vaší aplikací.

  • Předběžné autorizace klientských aplikací Tím se zajistí, že se při volání klientských aplikací nezobrazí žádné výzvy k vyjádření souhlasu s oprávněními vyžadovanými webovým rozhraním API.

Jednotné odhlašování

Pomocí MSAL.js a URI pro odhlášení front-channel můžete dosáhnout jednotného odhlášení mezi aplikacemi v iframe a rodičovskými aplikacemi. Pokud například chcete, aby se uživatelé při odhlášení z nadřazené aplikace automaticky odhlásili i z aplikací vložených v prvku iframe, měli byste pro tyto aplikace povolit odhlášení přes front-channel. Postup najdete zde: Jak nakonfigurovat identifikátor URI pro odhlášení front-channel.

  • Last updated on