oidc-spa 8.5.4 → 8.6.0

package/src/core/tokenExfiltrationDefense.ts

@@ -1,6 +1,6 @@
 import { assert } from "../tools/tsafe/assert";
 import {
-    markTokenSubstitutionAdEnabled,
+    markTokenSubstitutionAsEnabled,
     substitutePlaceholderByRealToken
 } from "./tokenPlaceholderSubstitution";
 import { getIsHostnameAuthorized } from "../tools/isHostnameAuthorized";
@@ -15,7 +15,7 @@ const viteHashedJsAssetPathRegExp = /\/assets\/[^/]+-[a-zA-Z0-9_-]{8}\.js$/;
 export function enableTokenExfiltrationDefense(params: Params) {
     const { resourceServersAllowedHostnames = [], serviceWorkersAllowedHostnames = [] } = params;
 
-    markTokenSubstitutionAdEnabled();
+    markTokenSubstitutionAsEnabled();
 
     patchFetchApiToSubstituteTokenPlaceholder({ resourceServersAllowedHostnames });
     patchXMLHttpRequestApiToSubstituteTokenPlaceholder({ resourceServersAllowedHostnames });
@@ -51,10 +51,7 @@ function patchFetchApiToSubstituteTokenPlaceholder(params: {
 
         const headers = new Headers();
         request.headers.forEach((value, key) => {
-            const nextValue = substitutePlaceholderByRealToken({
-                text: value,
-                doEncodeUriComponent: false
-            });
+            const nextValue = substitutePlaceholderByRealToken(value);
 
             if (nextValue !== value) {
                 didSubstitute = true;
@@ -80,10 +77,7 @@ function patchFetchApiToSubstituteTokenPlaceholder(params: {
                 }
 
                 if (typeof init.body === "string") {
-                    body = substitutePlaceholderByRealToken({
-                        text: init.body,
-                        doEncodeUriComponent: false
-                    });
+                    body = substitutePlaceholderByRealToken(init.body);
 
                     if (init.body !== body) {
                         didSubstitute = true;
@@ -97,10 +91,7 @@ function patchFetchApiToSubstituteTokenPlaceholder(params: {
                     const next = new URLSearchParams();
 
                     init.body.forEach((value, key) => {
-                        const nextValue = substitutePlaceholderByRealToken({
-                            text: value,
-                            doEncodeUriComponent: false
-                        });
+                        const nextValue = substitutePlaceholderByRealToken(value);
 
                         if (nextValue !== value) {
                             didUrlSearchParamsSubstitute = true;
@@ -124,10 +115,7 @@ function patchFetchApiToSubstituteTokenPlaceholder(params: {
 
                     init.body.forEach((value, key) => {
                         if (typeof value === "string") {
-                            const nextValue = substitutePlaceholderByRealToken({
-                                text: value,
-                                doEncodeUriComponent: false
-                            });
+                            const nextValue = substitutePlaceholderByRealToken(value);
 
                             if (nextValue !== value) {
                                 didFormDataSubstitute = true;
@@ -200,10 +188,7 @@ function patchFetchApiToSubstituteTokenPlaceholder(params: {
             }
 
             const bodyText = await request.clone().text();
-            const nextBodyText = substitutePlaceholderByRealToken({
-                text: bodyText,
-                doEncodeUriComponent: false
-            });
+            const nextBodyText = substitutePlaceholderByRealToken(bodyText);
 
             if (nextBodyText !== bodyText) {
                 didSubstitute = true;
@@ -217,7 +202,7 @@ function patchFetchApiToSubstituteTokenPlaceholder(params: {
         {
             const url_before = request.url;
 
-            url = substitutePlaceholderByRealToken({ text: url_before, doEncodeUriComponent: true });
+            url = substitutePlaceholderByRealToken(url_before);
 
             if (url !== url_before) {
                 didSubstitute = true;
@@ -301,7 +286,7 @@ function patchXMLHttpRequestApiToSubstituteTokenPlaceholder(params: {
 
         {
             const url_str = typeof url === "string" ? url : url.href;
-            state.url = substitutePlaceholderByRealToken({ text: url_str, doEncodeUriComponent: true });
+            state.url = substitutePlaceholderByRealToken(url_str);
             if (url_str !== state.url) {
                 state.didSubstitute = true;
             }
@@ -331,7 +316,7 @@ function patchXMLHttpRequestApiToSubstituteTokenPlaceholder(params: {
 
         assert(state !== undefined, "29440283");
 
-        const nextValue = substitutePlaceholderByRealToken({ text: value, doEncodeUriComponent: false });
+        const nextValue = substitutePlaceholderByRealToken(value);
 
         if (nextValue !== value) {
             state.didSubstitute = true;
@@ -348,10 +333,7 @@ function patchXMLHttpRequestApiToSubstituteTokenPlaceholder(params: {
         let nextBody = body;
 
         if (typeof body === "string") {
-            const nextBodyText = substitutePlaceholderByRealToken({
-                text: body,
-                doEncodeUriComponent: false
-            });
+            const nextBodyText = substitutePlaceholderByRealToken(body);
 
             if (nextBodyText !== body) {
                 state.didSubstitute = true;
@@ -409,7 +391,7 @@ function patchWebSocketApiToSubstituteTokenPlaceholder(params: {
 
     const WebSocketPatched = function WebSocket(url: string | URL, protocols?: string | string[]) {
         const urlStr = typeof url === "string" ? url : url.href;
-        const nextUrl = substitutePlaceholderByRealToken({ text: urlStr, doEncodeUriComponent: true });
+        const nextUrl = substitutePlaceholderByRealToken(urlStr);
         let didSubstitute = nextUrl !== urlStr;
 
         const { hostname, pathname } = new URL(nextUrl, window.location.href);
@@ -474,10 +456,7 @@ function patchWebSocketApiToSubstituteTokenPlaceholder(params: {
         let nextData = data;
 
         if (typeof data === "string") {
-            const nextDataText = substitutePlaceholderByRealToken({
-                text: data,
-                doEncodeUriComponent: false
-            });
+            const nextDataText = substitutePlaceholderByRealToken(data);
 
             if (nextDataText !== data) {
                 wsData.didSubstitute = true;
@@ -538,7 +517,7 @@ function patchEventSourceApiToSubstituteTokenPlaceholder(params: {
         eventSourceInitDict?: EventSourceInit
     ) {
         const urlStr = typeof url === "string" ? url : url.href;
-        const nextUrl = substitutePlaceholderByRealToken({ text: urlStr, doEncodeUriComponent: true });
+        const nextUrl = substitutePlaceholderByRealToken(urlStr);
         const didSubstitute = nextUrl !== urlStr;
 
         const { hostname } = new URL(nextUrl, window.location.href);
@@ -599,7 +578,7 @@ function patchNavigatorSendBeaconApiToSubstituteTokenPlaceholder(params: {
 
     navigator.sendBeacon = function sendBeacon(url: string | URL, data?: BodyInit | null) {
         const urlStr = typeof url === "string" ? url : url.href;
-        const nextUrl = substitutePlaceholderByRealToken({ text: urlStr, doEncodeUriComponent: true });
+        const nextUrl = substitutePlaceholderByRealToken(urlStr);
         let didSubstitute = nextUrl !== urlStr;
 
         const { hostname } = new URL(nextUrl, window.location.href);
@@ -607,7 +586,7 @@ function patchNavigatorSendBeaconApiToSubstituteTokenPlaceholder(params: {
         let nextData = data;
 
         if (typeof data === "string") {
-            const next = substitutePlaceholderByRealToken({ text: data, doEncodeUriComponent: false });
+            const next = substitutePlaceholderByRealToken(data);
 
             if (next !== data) {
                 didSubstitute = true;
@@ -619,10 +598,7 @@ function patchNavigatorSendBeaconApiToSubstituteTokenPlaceholder(params: {
             const next = new URLSearchParams();
 
             data.forEach((value, key) => {
-                const nextValue = substitutePlaceholderByRealToken({
-                    text: value,
-                    doEncodeUriComponent: false
-                });
+                const nextValue = substitutePlaceholderByRealToken(value);
 
                 if (nextValue !== value) {
                     didUrlSearchParamsSubstitute = true;
@@ -641,10 +617,7 @@ function patchNavigatorSendBeaconApiToSubstituteTokenPlaceholder(params: {
 
             data.forEach((value, key) => {
                 if (typeof value === "string") {
-                    const nextValue = substitutePlaceholderByRealToken({
-                        text: value,
-                        doEncodeUriComponent: false
-                    });
+                    const nextValue = substitutePlaceholderByRealToken(value);
 
                     if (nextValue !== value) {
                         didFormDataSubstitute = true;

package/src/core/tokenPlaceholderSubstitution.ts

@@ -2,7 +2,7 @@ import { assert } from "../tools/tsafe/assert";
 
 let isTokenSubstitutionEnabled = false;
 
-export function markTokenSubstitutionAdEnabled() {
+export function markTokenSubstitutionAsEnabled() {
     isTokenSubstitutionEnabled = true;
 }
 
@@ -18,10 +18,61 @@ type Tokens = {
 
 const entries: {
     configId: string;
-    tokens: Tokens;
     id: number;
+    tokens: Tokens;
+    tokens_placeholder: Tokens;
 }[] = [];
 
+function generatePlaceholderForToken(params: {
+    tokenType: "id_token" | "access_token" | "refresh_token";
+    token_real: string;
+    id: number;
+}): string {
+    const { tokenType, token_real, id } = params;
+
+    const match = token_real.match(/^([A-Za-z0-9\-_]+)\.([A-Za-z0-9\-_]+)\.([A-Za-z0-9\-_]+)$/);
+
+    if (match === null) {
+        assert(tokenType !== "id_token", "39232932927");
+        return `${tokenType}_placeholder_${id}`;
+    }
+
+    const [, header_b64, payload_b64, signature_b64] = match;
+
+    const signatureByteLength = (() => {
+        const b64 = signature_b64
+            .replace(/-/g, "+")
+            .replace(/_/g, "/")
+            .padEnd(Math.ceil(signature_b64.length / 4) * 4, "=");
+
+        const padding = b64.endsWith("==") ? 2 : b64.endsWith("=") ? 1 : 0;
+        return (b64.length * 3) / 4 - padding;
+    })();
+
+    const targetSigB64Length = Math.ceil((signatureByteLength * 4) / 3);
+
+    const sig_placeholder = (function makeZeroPaddedBase64UrlString(
+        targetLength: number,
+        seed: string
+    ): string {
+        const PAD = "A";
+
+        let out = seed.slice(0, targetLength);
+
+        if (out.length < targetLength) {
+            out = out + PAD.repeat(targetLength - out.length);
+        }
+
+        if (out.length % 4 === 1) {
+            out = out.slice(0, -1) + PAD;
+        }
+
+        return out;
+    })(targetSigB64Length, `sig_placeholder_${id}_`);
+
+    return `${header_b64}.${payload_b64}.${sig_placeholder}`;
+}
+
 let counter = Math.floor(Math.random() * 1_000_000) + 1_000_000;
 
 export function getTokensPlaceholders(params: { configId: string; tokens: Tokens }): Tokens {
@@ -48,66 +99,68 @@ export function getTokensPlaceholders(params: { configId: string; tokens: Tokens
     const id = counter++;
 
     const entry_new: (typeof entries)[number] = {
-        id,
         configId,
+        id,
         tokens: {
-            accessToken: tokens.accessToken,
             idToken: tokens.idToken,
+            accessToken: tokens.accessToken,
             refreshToken: tokens.refreshToken
+        },
+        tokens_placeholder: {
+            idToken: generatePlaceholderForToken({
+                tokenType: "id_token",
+                id,
+                token_real: tokens.idToken
+            }),
+            accessToken: generatePlaceholderForToken({
+                tokenType: "access_token",
+                id,
+                token_real: tokens.accessToken
+            }),
+            refreshToken:
+                tokens.refreshToken === undefined
+                    ? undefined
+                    : generatePlaceholderForToken({
+                          tokenType: "refresh_token",
+                          id,
+                          token_real: tokens.refreshToken
+                      })
         }
     };
 
     entries.push(entry_new);
 
-    return {
-        accessToken: `access_token_placeholder_${id}`,
-        idToken: `id_token_placeholder_${id}`,
-        refreshToken: tokens.refreshToken === undefined ? undefined : `refresh_token_placeholder_${id}`
-    };
+    return entry_new.tokens_placeholder;
 }
 
-export function substitutePlaceholderByRealToken(params: {
-    text: string;
-    doEncodeUriComponent: boolean;
-}): string {
-    const { text, doEncodeUriComponent } = params;
+export function substitutePlaceholderByRealToken(text: string): string {
+    if (!text.includes("_placeholder_")) {
+        return text;
+    }
 
     let text_modified = text;
 
-    for (const [tokenType, regExp] of [
-        ["access_token", /access_token_placeholder_(\d+)/g],
-        ["id_token", /id_token_placeholder_(\d+)/g],
-        ["refresh_token", /refresh_token_placeholder_(\d+)/g]
-    ] as const) {
-        text_modified = text_modified.replace(regExp, (...[, p1]) => {
-            const id = parseInt(p1);
-
-            const entry = entries.find(e => e.id === id);
-
-            if (!entry) {
-                throw new Error(
-                    [
-                        "oidc-spa: Outdated token used to make a request.",
-                        "Token should not be stored at the application level, when a token",
-                        "is needed, it should be requested and used immediately."
-                    ].join(" ")
-                );
-            }
+    for (const entry of entries) {
+        if (!text.includes(`${entry.id}`)) {
+            continue;
+        }
+
+        for (const tokenType of ["idToken", "accessToken", "refreshToken"] as const) {
+            const placeholder = entry.tokens_placeholder[tokenType];
 
-            const token = (() => {
-                switch (tokenType) {
-                    case "access_token":
-                        return entry.tokens.accessToken;
-                    case "id_token":
-                        return entry.tokens.idToken;
-                    case "refresh_token":
-                        assert(entry.tokens.refreshToken !== undefined, "204392284");
-                        return entry.tokens.refreshToken;
+            if (tokenType === "refreshToken") {
+                if (placeholder === undefined) {
+                    continue;
                 }
-            })();
+            }
+            assert(placeholder !== undefined, "023948092393");
+
+            const realToken = entry.tokens[tokenType];
 
-            return doEncodeUriComponent ? encodeURIComponent(token) : token;
-        });
+            assert(realToken !== undefined, "02394809239328");
+
+            text_modified = text_modified.split(placeholder).join(realToken);
+        }
     }
 
     return text_modified;

package/src/react-spa/{createOidcSpaApi.tsx → createOidcSpaApi.ts}

@@ -1,4 +1,11 @@
-import { useState, useEffect, useReducer, type ReactNode, type ComponentType } from "react";
+import {
+    useState,
+    useEffect,
+    useReducer,
+    createElement,
+    type ReactNode,
+    type ComponentType
+} from "react";
 import type { UseOidc, OidcSpaApi, GetOidc, ParamsOfBootstrap } from "./types";
 import type { ZodSchemaLike } from "../tools/ZodSchemaLike";
 import type { Oidc as Oidc_core } from "../core";
@@ -521,7 +528,7 @@ export function createOidcSpaApi<
         if (oidcCoreOrOidcInitializationError instanceof OidcInitializationError) {
             const oidcInitializationError = oidcCoreOrOidcInitializationError;
 
-            return <ErrorComponent oidcInitializationError={oidcInitializationError} />;
+            return createElement(ErrorComponent, { oidcInitializationError });
         }
 
         return children;
@@ -574,7 +581,7 @@ export function createOidcSpaApi<
                 throw oidcCore.login({ doesCurrentHrefRequiresAuth: true });
             }
 
-            return <Component {...props} />;
+            return createElement(Component, props);
         }
 
         ComponentWithLoginEnforced.displayName = `${

package/src/vite-plugin/handleClientEntrypoint.ts

@@ -1,7 +1,7 @@
 import type { OidcSpaVitePluginParams } from "./vite-plugin";
 import type { ResolvedConfig } from "vite";
 import type { PluginContext } from "rollup";
-import { promises as fs } from "node:fs";
+import { promises as fs, readFileSync, existsSync } from "node:fs";
 import * as path from "node:path";
 import { assert } from "../tools/tsafe/assert";
 import type { Equals } from "../tools/tsafe/Equals";
@@ -22,8 +22,6 @@ type EntryResolution = {
 
 const ORIGINAL_QUERY_PARAM = "oidc-spa-original";
 
-const GENERIC_ENTRY_CANDIDATES = ["src/main.tsx", "src/main.ts", "src/main.jsx", "src/main.js"];
-
 const REACT_ROUTER_ENTRY_CANDIDATES = [
     "entry.client.tsx",
     "entry.client.ts",
@@ -63,7 +61,8 @@ export function createHandleClientEntrypoint(params: {
         const isOriginalRequest = queryParams.getAll(ORIGINAL_QUERY_PARAM).includes("true");
 
         if (isOriginalRequest) {
-            return loadOriginalModule(entryResolution, pluginContext);
+            entryResolution.watchFiles.forEach(file => pluginContext.addWatchFile(file));
+            return fs.readFile(entryResolution.absolutePath, "utf8");
         }
 
         entryResolution.watchFiles.forEach(file => pluginContext.addWatchFile(file));
@@ -247,34 +246,152 @@ function resolveEntryForProject({
         }
 
         case "other": {
-            const candidate = resolveCandidate({
-                root,
-                subDirectories: ["."],
-                filenames: GENERIC_ENTRY_CANDIDATES
-            });
+            const indexHtmlPath = (() => {
+                const rollupInput = config.build.rollupOptions?.input;
+
+                const htmlCandidates: string[] = [];
+
+                const addCandidate = (maybePath: string) => {
+                    const candidate = path.isAbsolute(maybePath)
+                        ? maybePath
+                        : path.resolve(root, maybePath);
+
+                    if (path.extname(candidate).toLowerCase() === ".html") {
+                        htmlCandidates.push(candidate);
+                    }
+                };
+
+                if (typeof rollupInput === "string") {
+                    addCandidate(rollupInput);
+                } else if (Array.isArray(rollupInput)) {
+                    rollupInput.forEach(addCandidate);
+                } else if (rollupInput && typeof rollupInput === "object") {
+                    Object.values(rollupInput).forEach(addCandidate);
+                }
+
+                if (htmlCandidates.length > 1) {
+                    throw new Error(
+                        [
+                            "oidc-spa: Multiple HTML inputs detected in Vite configuration.",
+                            `Found: ${htmlCandidates.join(", ")}.`,
+                            "No worries, if the oidc-spa Vite plugin fails you can still configure the client entrypoint manually.",
+                            "Please refer to the documentation for more details."
+                        ].join(" ")
+                    );
+                }
 
-            assert(candidate !== undefined);
+                const defaultIndexHtml = path.resolve(root, "index.html");
 
-            const normalized = normalizeAbsolute(candidate);
+                const indexHtmlPath =
+                    htmlCandidates[0] ?? (existsSync(defaultIndexHtml) ? defaultIndexHtml : undefined);
 
-            const resolution: EntryResolution = {
-                absolutePath: candidate,
-                normalizedPath: normalized,
-                watchFiles: [candidate]
-            };
+                if (indexHtmlPath === undefined) {
+                    throw new Error(
+                        [
+                            "oidc-spa: Could not locate index.html.",
+                            "Checked Vite rollupOptions.input for HTML entries and the default index.html at the project root.",
+                            "No worries, if the oidc-spa Vite plugin fails you can still configure the client entrypoint manually.",
+                            "Please refer to the documentation for more details."
+                        ].join(" ")
+                    );
+                }
 
-            return resolution;
+                return indexHtmlPath;
+            })();
+
+            const indexHtmlContent = readFileSync(indexHtmlPath, "utf8");
+
+            const bodyMatch = indexHtmlContent.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+            const bodyContent = bodyMatch?.[1] ?? indexHtmlContent;
+
+            const moduleScriptSrcs: string[] = [];
+            const scriptRegex =
+                /<script\b[^>]*\btype\s*=\s*["']module["'][^>]*\bsrc\s*=\s*["']([^"']+)["'][^>]*>/gi;
+
+            let match: RegExpExecArray | null;
+            // eslint-disable-next-line no-cond-assign
+            while ((match = scriptRegex.exec(bodyContent)) !== null) {
+                const [, src] = match;
+                moduleScriptSrcs.push(src);
+            }
+
+            if (moduleScriptSrcs.length === 0) {
+                throw new Error(
+                    [
+                        'oidc-spa: Could not find a <script type="module" src="..."> tag in index.html.',
+                        "No worries, if the oidc-spa Vite plugin fails you can still configure the client entrypoint manually.",
+                        "Please refer to the documentation for more details."
+                    ].join(" ")
+                );
+            }
+
+            if (moduleScriptSrcs.length > 1) {
+                throw new Error(
+                    [
+                        "oidc-spa: Unable to determine a unique client entrypoint from index.html.",
+                        `Found multiple <script type=\"module\" src=\"...\"> tags: ${moduleScriptSrcs.join(
+                            ", "
+                        )}.`,
+                        "No worries, if the oidc-spa Vite plugin fails you can still configure the client entrypoint manually.",
+                        "Please refer to the documentation for more details."
+                    ].join(" ")
+                );
+            }
+
+            const [rawSrc] = moduleScriptSrcs;
+            const cleanedSrc = rawSrc.replace(/[?#].*$/, "");
+
+            if (/^[a-zA-Z][a-zA-Z\d+.-]*:/.test(cleanedSrc)) {
+                throw new Error(
+                    [
+                        "oidc-spa: The client entrypoint in index.html points to an external URL,",
+                        `got "${rawSrc}".`,
+                        "\nNo worries, if the oidc-spa Vite plugin fails you can still configure the client entrypoint manually.",
+                        "Please refer to the documentation for more details."
+                    ].join(" ")
+                );
+            }
+
+            const indexDir = path.dirname(indexHtmlPath);
+
+            const absoluteCandidates = (() => {
+                const resolvedPath = cleanedSrc.startsWith("/")
+                    ? path.join(root, cleanedSrc.replace(/^\//, ""))
+                    : path.resolve(indexDir, cleanedSrc);
+
+                const hasExtension = path.extname(resolvedPath) !== "";
+
+                if (hasExtension) {
+                    return [resolvedPath];
+                }
+
+                const extensions = [".tsx", ".ts", ".jsx", ".js"];
+
+                return extensions.map(ext => `${resolvedPath}${ext}`);
+            })();
+
+            const existingCandidate = absoluteCandidates.find(candidate => existsSync(candidate));
+
+            if (!existingCandidate) {
+                throw new Error(
+                    [
+                        "oidc-spa: Could not locate the client entrypoint referenced in index.html.",
+                        `Found src="${rawSrc}" and tried: ${absoluteCandidates.join(", ")}.`,
+                        "Please ensure the file exists or configure the client entrypoint manually.",
+                        "\nNo worries, if the oidc-spa Vite plugin fails you can still configure the client entrypoint manually.",
+                        "Please refer to the documentation for more details."
+                    ].join(" ")
+                );
+            }
+
+            return {
+                absolutePath: existingCandidate,
+                normalizedPath: normalizeAbsolute(existingCandidate),
+                watchFiles: [indexHtmlPath, existingCandidate]
+            };
         }
 
         default:
             assert<Equals<typeof projectType, never>>(false);
     }
 }
-
-function loadOriginalModule(
-    entry: EntryResolution,
-    context: { addWatchFile(id: string): void }
-): Promise<string> {
-    entry.watchFiles.forEach(file => context.addWatchFile(file));
-    return fs.readFile(entry.absolutePath, "utf8");
-}