oidc-spa 8.6.10 → 8.6.11

package/src/core/diagnostic.ts

@@ -2,6 +2,8 @@ import { OidcInitializationError } from "./OidcInitializationError";
 import { isKeycloak, createKeycloakUtils } from "../keycloak";
 import { getIsValidRemoteJson } from "../tools/getIsValidRemoteJson";
 import { WELL_KNOWN_PATH } from "./OidcMetadata";
+import { assert } from "../tools/tsafe/assert";
+import { getDoMatchWildcardsPattern } from "../tools/wildcardsMatch";
 
 export async function createWellKnownOidcConfigurationEndpointUnreachableInitializationError(params: {
     issuerUri: string;
@@ -90,8 +92,9 @@ export async function createIframeTimeoutInitializationError(params: {
     redirectUri: string;
     issuerUri: string;
     clientId: string;
+    authorizationEndpointUrl: string;
 }): Promise<OidcInitializationError> {
-    const { redirectUri, issuerUri, clientId } = params;
+    const { redirectUri, issuerUri, clientId, authorizationEndpointUrl } = params;
 
     check_if_well_known_endpoint_is_reachable: {
         const isValid = await getIsValidRemoteJson(`${issuerUri}${WELL_KNOWN_PATH}`);
@@ -103,7 +106,8 @@ export async function createIframeTimeoutInitializationError(params: {
         return createWellKnownOidcConfigurationEndpointUnreachableInitializationError({ issuerUri });
     }
 
-    iframe_blocked: {
+    // Investigate if framing was prevented by some header defined policies
+    {
         const headersOrError = await fetch(redirectUri).then(
             response => {
                 if (!response.ok) {
@@ -131,62 +135,165 @@ export async function createIframeTimeoutInitializationError(params: {
 
         const headers = headersOrError;
 
-        let key_problem = (() => {
-            block: {
-                const key = "Content-Security-Policy" as const;
+        content_security_policy_issue: {
+            const cspHeaderValue = headers["Content-Security-Policy"];
 
-                const header = headers[key];
+            if (cspHeaderValue === null) {
+                break content_security_policy_issue;
+            }
 
-                if (header === null) {
-                    break block;
+            const csp_parsed: Record<string, string[] | undefined> = Object.fromEntries(
+                cspHeaderValue
+                    .split(";")
+                    .filter(part => part !== "")
+                    .map(statement => {
+                        const [directive, ...values] = statement.split(" ");
+                        assert(directive !== undefined);
+                        assert(values.length !== 0);
+                        return [directive, values];
+                    })
+            );
+
+            frame_src_issue: {
+                const frameSrcValues = csp_parsed["frame-src"];
+
+                if (frameSrcValues === undefined) {
+                    break frame_src_issue;
                 }
 
-                const hasFrameAncestorsNone = header
-                    .replace(/["']/g, "")
-                    .replace(/\s+/g, " ")
-                    .toLowerCase()
-                    .includes("frame-ancestors none");
-
-                if (!hasFrameAncestorsNone) {
-                    break block;
+                const hasIssue = (() => {
+                    for (const frameSrcValue of frameSrcValues) {
+                        if (frameSrcValue === "'none'") {
+                            return true;
+                        }
+
+                        const origin_authorizationEndpoint = new URL(authorizationEndpointUrl).origin;
+
+                        if (frameSrcValue === "'self'") {
+                            const origin_app = new URL(location.href).origin;
+
+                            if (origin_app === origin_authorizationEndpoint) {
+                                return false;
+                            }
+                        }
+
+                        if (
+                            getDoMatchWildcardsPattern({
+                                candidate: origin_authorizationEndpoint,
+                                stringWithWildcards: frameSrcValue
+                            })
+                        ) {
+                            return false;
+                        }
+                    }
+
+                    return true;
+                })();
+
+                if (!hasIssue) {
+                    break frame_src_issue;
                 }
 
-                return key;
+                const recommendedValue = (() => {
+                    const hostname_app = new URL(location.href).hostname;
+                    const {
+                        hostname: hostname_authorizationEndpoint,
+                        origin: origin_authorizationEndpoint
+                    } = new URL(authorizationEndpointUrl);
+
+                    if (hostname_app === hostname_authorizationEndpoint) {
+                        return "'self'";
+                    }
+
+                    const [lvl1, lvl2] = hostname_app.split(".").reverse();
+
+                    if (!lvl2) {
+                        return origin_authorizationEndpoint;
+                    }
+
+                    if (hostname_authorizationEndpoint.endsWith(`.${lvl2}.${lvl1}`)) {
+                        return `https://*.${lvl2}.${lvl1}`;
+                    }
+
+                    return origin_authorizationEndpoint;
+                })();
+
+                return new OidcInitializationError({
+                    isAuthServerLikelyDown: false,
+                    messageOrCause: [
+                        `Session restoration via iframe failed due to the following HTTP header on GET ${redirectUri}:`,
+                        `\nContent-Security-Policy “frame-src”: ${frameSrcValues.join("; ")}`,
+                        `\nThis header prevents opening an iframe to ${authorizationEndpointUrl}.`,
+                        `\nTo fix this:`,
+                        `\n  - Update your CSP to: frame-src ${[
+                            ...frameSrcValues.filter(v => v !== "'none'"),
+                            recommendedValue
+                        ]}`,
+                        `\n  - OR remove the frame-src directive from your CSP`,
+                        `\n  - OR, if you cannot change your CSP, call bootstrapOidc/createOidc with sessionRestorationMethod: "full page redirect"`,
+                        `\n\nMore info: https://docs.oidc-spa.dev/v/v8/resources/csp-configuration`
+                    ].join(" ")
+                });
             }
 
-            block: {
-                const key = "X-Frame-Options" as const;
-
-                const header = headers[key];
+            frame_ancestor_issue: {
+                const frameAncestorsValues = csp_parsed["frame-ancestors"];
 
-                if (header === null) {
-                    break block;
+                if (frameAncestorsValues === undefined) {
+                    break frame_ancestor_issue;
                 }
 
-                const hasFrameAncestorsNone = header.toLowerCase().includes("deny");
+                const hasIssue =
+                    frameAncestorsValues.includes("'none'") || !frameAncestorsValues.includes("'self'");
 
-                if (!hasFrameAncestorsNone) {
-                    break block;
+                if (!hasIssue) {
+                    break frame_ancestor_issue;
                 }
 
-                return key;
+                return new OidcInitializationError({
+                    isAuthServerLikelyDown: false,
+                    messageOrCause: [
+                        `Session restoration via iframe failed due to the following HTTP header on GET ${redirectUri}:`,
+                        `\nContent-Security-Policy “frame-ancestors”: ${frameAncestorsValues.join(
+                            "; "
+                        )}`,
+                        `\nThis header prevents your app from being iframed by itself.`,
+                        `\nTo fix this:`,
+                        `\n  - Update your CSP to: frame-ancestors 'self'`,
+                        `\n  - OR remove the frame-ancestors directive from your CSP`,
+                        `\n  - OR, if you cannot modify your CSP, call bootstrapOidc/createOidc with sessionRestorationMethod: "full page redirect"`,
+                        `\n\nMore info: https://docs.oidc-spa.dev/v/v8/resources/csp-configuration`
+                    ].join(" ")
+                });
             }
+        }
 
-            return undefined;
-        })();
+        x_frame_option_header_issue: {
+            const key = "X-Frame-Options" as const;
 
-        if (key_problem === undefined) {
-            break iframe_blocked;
-        }
+            const value = headers[key];
 
-        return new OidcInitializationError({
-            isAuthServerLikelyDown: false,
-            messageOrCause: [
-                `${redirectUri} 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",
-                "Refer to this documentation page to fix this issue: https://docs.oidc-spa.dev/v/v8/resources/third-party-cookies-and-session-restoration"
-            ].join(" ")
-        });
+            if (value === null) {
+                break x_frame_option_header_issue;
+            }
+
+            const hasFrameAncestorsNone = value.toLowerCase().includes("deny");
+
+            if (!hasFrameAncestorsNone) {
+                break x_frame_option_header_issue;
+            }
+
+            return new OidcInitializationError({
+                isAuthServerLikelyDown: false,
+                messageOrCause: [
+                    `Session restoration via iframe failed due to the following HTTP header on GET ${redirectUri}:`,
+                    `\n${key}: ${value}`,
+                    `\nThis header prevents your app from being framed by itself.`,
+                    `\nTo fix this, remove the ${key} header and rely on Content-Security-Policy if you need to restrict framing.`,
+                    `\n\nMore info: https://docs.oidc-spa.dev/v/v8/resources/csp-configuration`
+                ].join(" ")
+            });
+        }
     }
 
     // Here we know that the server is not down and that the issuer_uri is correct
@@ -225,8 +332,8 @@ export async function createIframeTimeoutInitializationError(params: {
                 ];
             })(),
             "\n\n",
-            "If nothing works, you can try disabling the use of iframe: https://docs.oidc-spa.dev/resources/iframe-related-issues\n",
-            "with some OIDC provider it might solve the issue."
+            `If nothing works, or if you see in the console a message mentioning 'refused to frame' there might be a problem with your CSP.`,
+            `Read more: https://docs.oidc-spa.dev/v/v8/resources/csp-configuration`
         ].join(" ")
     });
 }

package/src/tools/wildcardsMatch.ts

@@ -0,0 +1,16 @@
+export function getDoMatchWildcardsPattern(params: {
+    stringWithWildcards: string;
+    candidate: string;
+}): boolean {
+    const { stringWithWildcards, candidate } = params;
+
+    if (!stringWithWildcards.includes("*")) {
+        return stringWithWildcards === candidate;
+    }
+
+    const escapedRegex = stringWithWildcards
+        .replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+        .replace(/\\\*/g, ".*");
+
+    return new RegExp(`^${escapedRegex}$`).test(candidate);
+}

package/tools/wildcardsMatch.d.ts

@@ -0,0 +1,4 @@
+export declare function getDoMatchWildcardsPattern(params: {
+    stringWithWildcards: string;
+    candidate: string;
+}): boolean;

package/tools/wildcardsMatch.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDoMatchWildcardsPattern = getDoMatchWildcardsPattern;
+function getDoMatchWildcardsPattern(params) {
+    const { stringWithWildcards, candidate } = params;
+    if (!stringWithWildcards.includes("*")) {
+        return stringWithWildcards === candidate;
+    }
+    const escapedRegex = stringWithWildcards
+        .replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+        .replace(/\\\*/g, ".*");
+    return new RegExp(`^${escapedRegex}$`).test(candidate);
+}
+//# sourceMappingURL=wildcardsMatch.js.map

package/tools/wildcardsMatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wildcardsMatch.js","sourceRoot":"","sources":["../src/tools/wildcardsMatch.ts"],"names":[],"mappings":";;AAAA,gEAeC;AAfD,SAAgB,0BAA0B,CAAC,MAG1C;IACG,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC;IAElD,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QACrC,OAAO,mBAAmB,KAAK,SAAS,CAAC;IAC7C,CAAC;IAED,MAAM,YAAY,GAAG,mBAAmB;SACnC,OAAO,CAAC,qBAAqB,EAAE,MAAM,CAAC;SACtC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAE5B,OAAO,IAAI,MAAM,CAAC,IAAI,YAAY,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AAC3D,CAAC"}