oidc-spa 6.14.2 → 6.15.1

package/src/core/OidcInitializationError.ts

@@ -110,26 +110,30 @@ export async function createIframeTimeoutInitializationError(params: {
     callbackUri: string;
     issuerUri: string;
     clientId: string;
+    noIframe: boolean;
 }): Promise<OidcInitializationError> {
-    const { callbackUri, issuerUri, clientId } = params;
+    const { callbackUri, issuerUri, clientId, noIframe } = params;
 
-    frame_ancestors_none: {
-        if (!/^https?:\/\//.test(callbackUri)) {
-            break frame_ancestors_none;
+    iframe_blocked: {
+        if (noIframe) {
+            break iframe_blocked;
         }
 
-        const cspOrError = await fetch(callbackUri).then(
+        const headersOrError = await fetch(callbackUri).then(
             response => {
                 if (!response.ok) {
                     return new Error(`${callbackUri} responded with a ${response.status} status code.`);
                 }
 
-                return response.headers.get("Content-Security-Policy");
+                return {
+                    "Content-Security-Policy": response.headers.get("Content-Security-Policy"),
+                    "X-Frame-Options": response.headers.get("X-Frame-Options")
+                };
             },
-            error => error
+            (error: Error) => error
         );
 
-        if (cspOrError instanceof Error) {
+        if (headersOrError instanceof Error) {
             return new OidcInitializationError({
                 isAuthServerLikelyDown: false,
                 messageOrCause: new Error(
@@ -140,41 +144,62 @@ export async function createIframeTimeoutInitializationError(params: {
             });
         }
 
-        const csp = cspOrError;
+        const headers = headersOrError;
 
-        if (csp === null) {
-            break frame_ancestors_none;
-        }
+        let key_problem = (() => {
+            block: {
+                const key = "Content-Security-Policy" as const;
+
+                const header = headers[key];
+
+                if (header === null) {
+                    break block;
+                }
+
+                const hasFrameAncestorsNone = header
+                    .replace(/["']/g, "")
+                    .replace(/\s+/g, " ")
+                    .toLowerCase()
+                    .includes("frame-ancestors none");
+
+                if (!hasFrameAncestorsNone) {
+                    break block;
+                }
+
+                return key;
+            }
+
+            block: {
+                const key = "X-Frame-Options" as const;
+
+                const header = headers[key];
+
+                if (header === null) {
+                    break block;
+                }
+
+                const hasFrameAncestorsNone = header.toLowerCase().includes("deny");
+
+                if (!hasFrameAncestorsNone) {
+                    break block;
+                }
+
+                return key;
+            }
 
-        const hasFrameAncestorsNone = csp
-            .replace(/["']/g, "")
-            .replace(/\s+/g, " ")
-            .toLowerCase()
-            .includes("frame-ancestors none");
+            return undefined;
+        })();
 
-        if (!hasFrameAncestorsNone) {
-            break frame_ancestors_none;
+        if (key_problem === undefined) {
+            break iframe_blocked;
         }
 
         return new OidcInitializationError({
             isAuthServerLikelyDown: false,
             messageOrCause: [
-                `${callbackUri} is currently served by your web server with the HTTP header \`Content-Security-Policy: frame-ancestors none\`.\n`,
+                `${callbackUri} is currently served by your web server with the HTTP header \`${key_problem}: ${headers[key_problem]}\`.\n`,
                 "This header prevents the silent sign-in process from working.\n",
-                "To fix this issue, you need to allow your application's homepage to be iframed during the silent login flow. ",
-                "For example, replacing `frame-ancestors 'none'` with `frame-ancestors 'self'` ensures your app can be embedded in an iframe on the same domain.\n",
-                "However, if you are concerned about allowing the entire SPA to be iframed, you can selectively loosen the `frame-ancestors` policy only when the `state` parameter is present on the URL.\n",
-                "If you're using Nginx, a possible configuration might look like:\n",
-                "ngnix.conf:\n",
-                "```\n",
-                "map $query_string $add_content_security_policy {\n",
-                '    "~*state=" "frame-ancestors \'self\'";\n',
-                "    default      \"frame-ancestors 'none'\";\n",
-                "}\n",
-                "add_header Content-Security-Policy $add_content_security_policy;\n",
-                "```\n",
-                "This way, the homepage is only iframed when the `state` parameter is present, and remains protected in all other scenarios.\n",
-                `The URL in question is: ${callbackUri}`
+                "Refer to this documentation page to fix this issue: https://docs.oidc-spa.dev/v/v6/resources/iframe-related-issues"
             ].join(" ")
         });
     }

package/src/core/createOidc.ts

@@ -156,6 +156,14 @@ export type ParamsOfCreateOidc<
 
     autoLogoutParams?: Parameters<Oidc.LoggedIn<any>["logout"]>[0];
     autoLogin?: AutoLogin;
+
+    /**
+     * Default: false
+     *
+     * See: https://docs.oidc-spa.dev/v/v6/resources/iframe-related-issues
+     */
+    noIframe?: boolean;
+
     debugLogs?: boolean;
 
     __unsafe_clientSecret?: string;
@@ -302,7 +310,8 @@ export async function createOidc_nonMemoized<
         postLoginRedirectUrl: postLoginRedirectUrl_default,
         __unsafe_clientSecret,
         __unsafe_useIdTokenAsAccessToken = false,
-        __metadata
+        __metadata,
+        noIframe = false
     } = params;
 
     const { issuerUri, clientId, scopes, configId, log } = preProcessedParams;
@@ -368,28 +377,54 @@ export async function createOidc_nonMemoized<
 
     const stateQueryParamValue_instance = generateStateQueryParamValue();
 
-    let isOidcServerThirdPartyRelativeToApp: boolean;
-    {
-        const url1 = window.location.origin;
-        const url2 = issuerUri;
+    const canUseIframe = (() => {
+        if (noIframe) {
+            return false;
+        }
+
+        // NOTE: Electron
+        if (!/https?:\/\//.test(callbackUri)) {
+            log?.("We won't use iframe, callbackUri uses a custom protocol.");
+            return false;
+        }
 
-        isOidcServerThirdPartyRelativeToApp =
-            getHaveSharedParentDomain({
-                url1,
-                url2
-            }) === false;
+        third_party_cookies: {
+            const isOidcServerThirdPartyRelativeToApp =
+                getHaveSharedParentDomain({
+                    url1: window.location.origin,
+                    url2: issuerUri
+                }) === false;
+
+            if (!isOidcServerThirdPartyRelativeToApp) {
+                break third_party_cookies;
+            }
+
+            const isGoogleChrome = (() => {
+                const ua = navigator.userAgent;
+                const vendor = navigator.vendor;
+
+                return (
+                    /Chrome/.test(ua) && /Google Inc/.test(vendor) && !/Edg/.test(ua) && !/OPR/.test(ua)
+                );
+            })();
+
+            if (window.location.origin.startsWith("http://localhost") && isGoogleChrome) {
+                break third_party_cookies;
+            }
 
-        if (isOidcServerThirdPartyRelativeToApp) {
             log?.(
                 [
-                    `${url1} and ${url2} don't have shared parent domain, silent signin in iframe (unless in chrome in dev mode) is not possible.`,
-                    "oidc-spa will have to fully reload the app to restore the auth state."
+                    "Can't use iframe because your auth server is on a third party domain relative",
+                    "to the domain of your app and third party cookies are blocked by navigators."
                 ].join(" ")
             );
-        } else {
-            log?.(`${url1} and ${url2} have shared parent domain silent signin in iframe is possible`);
+
+            return false;
         }
-    }
+
+        // NOTE: Maybe not, it depend if the app can iframe itself.
+        return true;
+    })();
 
     let isUserStoreInMemoryOnly: boolean;
 
@@ -405,7 +440,7 @@ export async function createOidc_nonMemoized<
         automaticSilentRenew: false,
         userStore: new WebStorageStateStore({
             store: (() => {
-                if (!isOidcServerThirdPartyRelativeToApp) {
+                if (canUseIframe) {
                     isUserStoreInMemoryOnly = true;
                     return new InMemoryWebStorage();
                 }
@@ -568,7 +603,6 @@ export async function createOidc_nonMemoized<
 
                         notifyOtherTabsOfLogout({
                             configId,
-                            redirectUrl: stateData.redirectUrl,
                             sessionId: stateData.sessionId
                         });
 
@@ -629,19 +663,8 @@ export async function createOidc_nonMemoized<
                     break actual_silent_signin;
                 }
 
-                if (isOidcServerThirdPartyRelativeToApp) {
-                    // NOTE: Electron
-                    if (!/https?:\/\//.test(callbackUri)) {
-                        log?.("Skipping silent signin with iframe, custom protocol");
-                        break actual_silent_signin;
-                    }
-
-                    if (!homeUrl.startsWith("http://localhost")) {
-                        log?.(
-                            "Skipping silent signin with iframe, third party cookies are are not allowed so we know this won't work"
-                        );
-                        break actual_silent_signin;
-                    }
+                if (!canUseIframe) {
+                    break actual_silent_signin;
                 }
 
                 log?.(
@@ -672,7 +695,8 @@ export async function createOidc_nonMemoized<
                             return createIframeTimeoutInitializationError({
                                 callbackUri,
                                 clientId,
-                                issuerUri
+                                issuerUri,
+                                noIframe
                             });
                     }
 
@@ -924,7 +948,7 @@ export async function createOidc_nonMemoized<
             persistAuthState({ configId, state: undefined });
         }
 
-        if (isOidcServerThirdPartyRelativeToApp) {
+        if (!canUseIframe) {
             persistAuthState({
                 configId,
                 state: {
@@ -1018,7 +1042,6 @@ export async function createOidc_nonMemoized<
 
                     notifyOtherTabsOfLogout({
                         configId,
-                        redirectUrl: postLogoutRedirectUrl,
                         sessionId
                     });
 
@@ -1036,6 +1059,19 @@ export async function createOidc_nonMemoized<
             }) {
                 const { extraTokenParams } = params;
 
+                if (!currentTokens.hasRefreshToken && !canUseIframe) {
+                    const message = [
+                        "Unable to refresh tokens without a full app reload,",
+                        "because no refresh token is available",
+                        "and your app setup prevents silent sign-in via iframe.",
+                        "Your only option to refresh tokens is to call `window.location.reload()`"
+                    ].join(" ");
+
+                    log?.(message);
+
+                    throw new Error(message);
+                }
+
                 log?.("Renewing tokens");
 
                 const { completeLoginOrRefreshProcess } = await startLoginOrRefreshProcess();
@@ -1247,22 +1283,17 @@ export async function createOidc_nonMemoized<
     {
         const { prOtherTabLogout } = getPrOtherTabLogout({
             configId,
-            homeUrl,
             sessionId
         });
 
-        prOtherTabLogout.then(async ({ redirectUrl }) => {
-            log?.(`Other tab has logged out, redirecting to ${redirectUrl}`);
+        prOtherTabLogout.then(async () => {
+            log?.(`Other tab has logged out, refreshing current tab`);
 
             await waitForAllOtherOngoingLoginOrRefreshProcessesToComplete({
                 prUnlock: new Promise<never>(() => {})
             });
 
-            window.addEventListener("pageshow", () => {
-                location.reload();
-            });
-
-            window.location.href = redirectUrl;
+            location.reload();
         });
     }
 

package/src/core/handleOidcCallback.ts

@@ -132,12 +132,21 @@ function handleOidcCallback_nonMemoized(): { isHandled: boolean } {
             }
         });
 
-        reloadOnBfCacheNavigation();
-
         setTimeout(() => {
             debug966975.log(`(callback 0) Calling window.history.${historyMethod}()`);
 
+            reloadOnBfCacheNavigation();
+
             window.history[historyMethod]();
+
+            // NOTE: This is a "better than nothing" approach.
+            // Under some circumstances it's possible to get stuck on this url
+            // if there is no "next" page in the history for example, navigating
+            // forward is a NoOp. So in that case it's better to navigate to the home.
+            setTimeout(() => {
+                const { protocol, host, pathname, hash } = window.location;
+                window.location.href = `${protocol}//${host}${pathname}${hash}`;
+            }, 350);
         }, 0);
 
         debug966975.log(`returning isHandled: ${isHandled ? "true" : "false"}`);

package/src/core/loginOrGoToAuthServer.ts

@@ -85,7 +85,7 @@ export function createLoginOrGoToAuthServer(params: {
 
     let lastPublicUrl: string | undefined = undefined;
 
-    function loginOrGoToAuthServer(params: Params): Promise<never> {
+    async function loginOrGoToAuthServer(params: Params): Promise<never> {
         const {
             redirectUrl: redirectUrl_params,
             extraQueryParams_local,
@@ -107,6 +107,21 @@ export function createLoginOrGoToAuthServer(params: {
 
             globalContext.evtHasLoginBeenCalled.current = true;
 
+            if (document.visibilityState !== "visible") {
+                const dVisible = new Deferred<void>();
+
+                const onVisible = () => {
+                    if (document.visibilityState !== "visible") {
+                        return;
+                    }
+                    document.removeEventListener("visibilitychange", onVisible);
+                    dVisible.resolve();
+                };
+                document.addEventListener("visibilitychange", onVisible);
+
+                await dVisible.pr;
+            }
+
             bf_cache_handling: {
                 if (rest.doForceReloadOnBfCache) {
                     window.removeEventListener("pageshow", () => {

package/src/core/logoutPropagationToOtherTabs.ts

@@ -7,7 +7,6 @@ const globalContext = {
 
 type Message = {
     appInstanceId: string;
-    redirectUrl_initiator: string;
     configId: string;
 };
 
@@ -16,15 +15,10 @@ function getChannelName(params: { sessionIdOrConfigId: string }) {
     return `oidc-spa:logout-propagation:${sessionIdOrConfigId}`;
 }
 
-export function notifyOtherTabsOfLogout(params: {
-    redirectUrl: string;
-    configId: string;
-    sessionId: string | undefined;
-}) {
-    const { redirectUrl, configId, sessionId } = params;
+export function notifyOtherTabsOfLogout(params: { configId: string; sessionId: string | undefined }) {
+    const { configId, sessionId } = params;
 
     const message: Message = {
-        redirectUrl_initiator: redirectUrl,
         configId,
         appInstanceId: globalContext.appInstanceId
     };
@@ -34,14 +28,10 @@ export function notifyOtherTabsOfLogout(params: {
     );
 }
 
-export function getPrOtherTabLogout(params: {
-    sessionId: string | undefined;
-    configId: string;
-    homeUrl: string;
-}) {
-    const { sessionId, configId, homeUrl } = params;
+export function getPrOtherTabLogout(params: { sessionId: string | undefined; configId: string }) {
+    const { sessionId, configId } = params;
 
-    const dOtherTabLogout = new Deferred<{ redirectUrl: string }>();
+    const dOtherTabLogout = new Deferred<void>();
 
     const channel = new BroadcastChannel(getChannelName({ sessionIdOrConfigId: sessionId ?? configId }));
 
@@ -54,15 +44,7 @@ export function getPrOtherTabLogout(params: {
 
         channel.close();
 
-        const redirectUrl = (() => {
-            if (configId === message.configId) {
-                return message.redirectUrl_initiator;
-            }
-
-            return homeUrl;
-        })();
-
-        dOtherTabLogout.resolve({ redirectUrl });
+        dOtherTabLogout.resolve();
     };
 
     const prOtherTabLogout = dOtherTabLogout.pr;