keycloakify 10.1.3 → 11.0.0

package/src/lib/kcSanitize/KcSanitizerPolicy.ts

@@ -0,0 +1,294 @@
+import { HtmlPolicyBuilder } from "./HtmlPolicyBuilder";
+import type { DOMPurify as ofTypeDomPurify } from "keycloakify/tools/vendor/dompurify";
+
+//implementation of java Sanitizer policy ( KeycloakSanitizerPolicy )
+// All regex directly copied from the keycloak source but some of them changed slightly to work with typescript(ONSITE_URL and OFFSITE_URL)
+// Also replaced ?i with "i" tag as second parameter of RegExp
+//https://github.com/keycloak/keycloak/blob/8ce8a4ba089eef25a0e01f58e09890399477b9ef/services/src/main/java/org/keycloak/theme/KeycloakSanitizerPolicy.java#L29
+export class KcSanitizerPolicy {
+    public static readonly COLOR_NAME = new RegExp(
+        "(?:aqua|black|blue|fuchsia|gray|grey|green|lime|maroon|navy|olive|purple|red|silver|teal|white|yellow)"
+    );
+
+    public static readonly COLOR_CODE = new RegExp(
+        "(?:#(?:[0-9a-fA-F]{3}(?:[0-9a-fA-F]{3})?))"
+    );
+
+    public static readonly NUMBER_OR_PERCENT = new RegExp("[0-9]+%?");
+
+    public static readonly PARAGRAPH = new RegExp(
+        "(?:[\\p{L}\\p{N},'\\.\\s\\-_\\(\\)]|&[0-9]{2};)*",
+        "u" // Unicode flag for \p{L} and \p{N} in the pattern
+    );
+
+    public static readonly HTML_ID = new RegExp("[a-zA-Z0-9\\:\\-_\\.]+");
+
+    public static readonly HTML_TITLE = new RegExp(
+        "[\\p{L}\\p{N}\\s\\-_',:\\[\\]!\\./\\\\\\(\\)&]*",
+        "u" // Unicode flag for \p{L} and \p{N} in the pattern
+    );
+
+    public static readonly HTML_CLASS = new RegExp("[a-zA-Z0-9\\s,\\-_]+");
+
+    public static readonly ONSITE_URL = new RegExp(
+        "(?:[\\p{L}\\p{N}.#@\\$%+&;\\-_~,?=/!]+|#(\\w)+)",
+        "u" // Unicode flag for \p{L} and \p{N} in the pattern
+    );
+
+    public static readonly OFFSITE_URL = new RegExp(
+        "\\s*(?:(?:ht|f)tps?://|mailto:)[\\p{L}\\p{N}]+" +
+            "[\\p{L}\\p{N}\\p{Zs}.#@\\$%+&;:\\-_~,?=/!()]*\\s*",
+        "u" // Unicode flag for \p{L} and \p{N} in the pattern
+    );
+
+    public static readonly NUMBER = new RegExp(
+        "[+-]?(?:(?:[0-9]+(?:\\.[0-9]*)?)|\\.[0-9]+)"
+    );
+    public static readonly NAME = new RegExp("[a-zA-Z0-9\\-_\\$]+");
+
+    public static readonly ALIGN = new RegExp(
+        "\\b(center|left|right|justify|char)\\b",
+        "i" // Case-insensitive flag
+    );
+
+    public static readonly VALIGN = new RegExp(
+        "\\b(baseline|bottom|middle|top)\\b",
+        "i" // Case-insensitive flag
+    );
+
+    public static readonly HISTORY_BACK = new RegExp(
+        "(?:javascript:)?\\Qhistory.go(-1)\\E"
+    );
+
+    public static readonly ONE_CHAR = new RegExp(
+        ".?",
+        "s" // Dotall flag for . to match newlines
+    );
+
+    private static COLOR_NAME_OR_COLOR_CODE(s: string): boolean {
+        return (
+            KcSanitizerPolicy.COLOR_NAME.test(s) || KcSanitizerPolicy.COLOR_CODE.test(s)
+        );
+    }
+
+    private static ONSITE_OR_OFFSITE_URL(s: string): boolean {
+        return (
+            KcSanitizerPolicy.ONSITE_URL.test(s) || KcSanitizerPolicy.OFFSITE_URL.test(s)
+        );
+    }
+
+    public static sanitize(
+        html: string,
+        dependencyInjections: Partial<{
+            DOMPurify: typeof ofTypeDomPurify;
+        }>
+    ): string {
+        return new HtmlPolicyBuilder(dependencyInjections)
+            .allowWithoutAttributes("span")
+
+            .allowAttributes("id")
+            .matching(this.HTML_ID)
+            .globally()
+
+            .allowAttributes("class")
+            .matching(this.HTML_CLASS)
+            .globally()
+
+            .allowAttributes("lang")
+            .matching(/[a-zA-Z]{2,20}/)
+            .globally()
+
+            .allowAttributes("title")
+            .matching(this.HTML_TITLE)
+            .globally()
+
+            .allowStyling()
+
+            .allowAttributes("align")
+            .matching(this.ALIGN)
+            .onElements("p")
+
+            .allowAttributes("for")
+            .matching(this.HTML_ID)
+            .onElements("label")
+
+            .allowAttributes("color")
+            .matching(this.COLOR_NAME_OR_COLOR_CODE)
+            .onElements("font")
+
+            .allowAttributes("face")
+            .matching(/[\w;, \-]+/)
+            .onElements("font")
+
+            .allowAttributes("size")
+            .matching(this.NUMBER)
+            .onElements("font")
+
+            .allowAttributes("href")
+            .matching(this.ONSITE_OR_OFFSITE_URL)
+            .onElements("a")
+
+            .allowStandardUrlProtocols()
+            .allowAttributes("nohref")
+            .onElements("a")
+
+            .allowAttributes("name")
+            .matching(this.NAME)
+            .onElements("a")
+
+            .allowAttributes("onfocus", "onblur", "onclick", "onmousedown", "onmouseup")
+            .matching(this.HISTORY_BACK)
+            .onElements("a")
+
+            .requireRelNofollowOnLinks()
+            .allowAttributes("src")
+            .matching(this.ONSITE_OR_OFFSITE_URL)
+            .onElements("img")
+
+            .allowAttributes("name")
+            .matching(this.NAME)
+            .onElements("img")
+
+            .allowAttributes("alt")
+            .matching(this.PARAGRAPH)
+            .onElements("img")
+
+            .allowAttributes("border", "hspace", "vspace")
+            .matching(this.NUMBER)
+            .onElements("img")
+
+            .allowAttributes("border", "cellpadding", "cellspacing")
+            .matching(this.NUMBER)
+            .onElements("table")
+
+            .allowAttributes("bgcolor")
+            .matching(this.COLOR_NAME_OR_COLOR_CODE)
+            .onElements("table")
+
+            .allowAttributes("background")
+            .matching(this.ONSITE_URL)
+            .onElements("table")
+
+            .allowAttributes("align")
+            .matching(this.ALIGN)
+            .onElements("table")
+
+            .allowAttributes("noresize")
+            .matching(new RegExp("noresize", "i"))
+            .onElements("table")
+
+            .allowAttributes("background")
+            .matching(this.ONSITE_URL)
+            .onElements("td", "th", "tr")
+
+            .allowAttributes("bgcolor")
+            .matching(this.COLOR_NAME_OR_COLOR_CODE)
+            .onElements("td", "th")
+
+            .allowAttributes("abbr")
+            .matching(this.PARAGRAPH)
+            .onElements("td", "th")
+
+            .allowAttributes("axis", "headers")
+            .matching(this.NAME)
+            .onElements("td", "th")
+
+            .allowAttributes("scope")
+            .matching(new RegExp("(?:row|col)(?:group)?", "i"))
+            .onElements("td", "th")
+
+            .allowAttributes("nowrap")
+            .onElements("td", "th")
+
+            .allowAttributes("height", "width")
+            .matching(this.NUMBER_OR_PERCENT)
+            .onElements("table", "td", "th", "tr", "img")
+
+            .allowAttributes("align")
+            .matching(this.ALIGN)
+            .onElements(
+                "thead",
+                "tbody",
+                "tfoot",
+                "img",
+                "td",
+                "th",
+                "tr",
+                "colgroup",
+                "col"
+            )
+
+            .allowAttributes("valign")
+            .matching(this.VALIGN)
+            .onElements("thead", "tbody", "tfoot", "td", "th", "tr", "colgroup", "col")
+
+            .allowAttributes("charoff")
+            .matching(this.NUMBER_OR_PERCENT)
+            .onElements("td", "th", "tr", "colgroup", "col", "thead", "tbody", "tfoot")
+
+            .allowAttributes("char")
+            .matching(this.ONE_CHAR)
+            .onElements("td", "th", "tr", "colgroup", "col", "thead", "tbody", "tfoot")
+
+            .allowAttributes("colspan", "rowspan")
+            .matching(this.NUMBER)
+            .onElements("td", "th")
+
+            .allowAttributes("span", "width")
+            .matching(this.NUMBER_OR_PERCENT)
+            .onElements("colgroup", "col")
+            .allowElements(
+                "a",
+                "label",
+                "noscript",
+                "h1",
+                "h2",
+                "h3",
+                "h4",
+                "h5",
+                "h6",
+                "p",
+                "i",
+                "b",
+                "u",
+                "strong",
+                "em",
+                "small",
+                "big",
+                "pre",
+                "code",
+                "cite",
+                "samp",
+                "sub",
+                "sup",
+                "strike",
+                "center",
+                "blockquote",
+                "hr",
+                "br",
+                "col",
+                "font",
+                "map",
+                "span",
+                "div",
+                "img",
+                "ul",
+                "ol",
+                "li",
+                "dd",
+                "dt",
+                "dl",
+                "tbody",
+                "thead",
+                "tfoot",
+                "table",
+                "td",
+                "th",
+                "tr",
+                "colgroup",
+                "fieldset",
+                "legend"
+            )
+            .apply(html);
+    }
+}

package/src/lib/kcSanitize/index.ts

@@ -0,0 +1,5 @@
+import { KcSanitizer } from "./KcSanitizer";
+
+export function kcSanitize(html: string): string {
+    return KcSanitizer.sanitize(html, {});
+}

package/src/login/KcContext/kcContextMocks.ts

@@ -7,6 +7,7 @@ import {
 import { id } from "tsafe/id";
 import { assert, type Equals } from "tsafe/assert";
 import { BASE_URL } from "keycloakify/lib/BASE_URL";
+import type { LanguageTag } from "keycloakify/login/i18n/messages_defaultSet/types";
 
 const attributesByName = Object.fromEntries(
     id<Attribute[]>([
@@ -116,35 +117,59 @@ export const kcContextCommonMock: KcContext.Common = {
         }
     },
     locale: {
-        supported: [
-            /* spell-checker: disable */
-            ["de", "Deutsch"],
-            ["no", "Norsk"],
-            ["ru", "Русский"],
-            ["sv", "Svenska"],
-            ["pt-BR", "Português (Brasil)"],
-            ["lt", "Lietuvių"],
-            ["en", "English"],
-            ["it", "Italiano"],
-            ["fr", "Français"],
-            ["zh-CN", "中文简体"],
-            ["es", "Español"],
-            ["cs", "Čeština"],
-            ["ja", "日本語"],
-            ["sk", "Slovenčina"],
-            ["pl", "Polski"],
-            ["ca", "Català"],
-            ["nl", "Nederlands"],
-            ["tr", "Türkçe"]
-            /* spell-checker: enable */
-        ].map(
-            ([languageTag, label]) =>
-                ({
-                    languageTag,
-                    label,
-                    url: "https://gist.github.com/garronej/52baaca1bb925f2296ab32741e062b8e"
-                }) as const
-        ),
+        supported: (
+            [
+                /* spell-checker: disable */
+                ["de", "Deutsch"],
+                ["no", "Norsk"],
+                ["ru", "Русский"],
+                ["sv", "Svenska"],
+                ["pt-BR", "Português (Brasil)"],
+                ["lt", "Lietuvių"],
+                ["en", "English"],
+                ["it", "Italiano"],
+                ["fr", "Français"],
+                ["zh-CN", "中文简体"],
+                ["es", "Español"],
+                ["cs", "Čeština"],
+                ["ja", "日本語"],
+                ["sk", "Slovenčina"],
+                ["pl", "Polski"],
+                ["ca", "Català"],
+                ["nl", "Nederlands"],
+                ["tr", "Türkçe"],
+                ["ar", "العربية"],
+                ["da", "Dansk"],
+                ["el", "Ελληνικά"],
+                ["fa", "فارسی"],
+                ["fi", "Suomi"],
+                ["hu", "Magyar"],
+                ["ka", "ქართული"],
+                ["lv", "Latviešu"],
+                ["pt", "Português"],
+                ["th", "ไทย"],
+                ["uk", "Українська"],
+                ["zh-TW", "中文繁體"]
+                /* spell-checker: enable */
+            ] as const
+        ).map(([languageTag, label]) => {
+            {
+                type Got = typeof languageTag;
+                type Expected = LanguageTag;
+
+                type Missing = Exclude<Expected, Got>;
+                type Unexpected = Exclude<Got, Expected>;
+
+                assert<Equals<Missing, never>>;
+                assert<Equals<Unexpected, never>>;
+            }
+
+            return {
+                languageTag,
+                label,
+                url: "https://gist.github.com/garronej/52baaca1bb925f2296ab32741e062b8e"
+            } as const;
+        }),
 
         currentLanguageTag: "en"
     },

package/src/login/Template.tsx

@@ -1,10 +1,10 @@
 import { useEffect } from "react";
-import { assert } from "keycloakify/tools/assert";
 import { clsx } from "keycloakify/tools/clsx";
+import { kcSanitize } from "keycloakify/lib/kcSanitize";
 import type { TemplateProps } from "keycloakify/login/TemplateProps";
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import { useSetClassName } from "keycloakify/tools/useSetClassName";
-import { useStylesAndScripts } from "keycloakify/login/Template.useStylesAndScripts";
+import { useInitialize } from "keycloakify/login/Template.useInitialize";
 import type { I18n } from "./i18n";
 import type { KcContext } from "./KcContext";
 
@@ -27,9 +27,9 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
 
     const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
 
-    const { msg, msgStr, getChangeLocaleUrl, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
+    const { msg, msgStr, currentLanguage, enabledLanguages } = i18n;
 
-    const { realm, locale, auth, url, message, isAppInitiatedAction } = kcContext;
+    const { realm, auth, url, message, isAppInitiatedAction } = kcContext;
 
     useEffect(() => {
         document.title = documentTitle ?? msgStr("loginTitle", kcContext.realm.displayName);
@@ -45,7 +45,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
         className: bodyClassName ?? kcClsx("kcBodyClass")
     });
 
-    const { isReadyToRender } = useStylesAndScripts({ kcContext, doUseDefaultCss });
+    const { isReadyToRender } = useInitialize({ kcContext, doUseDefaultCss });
 
     if (!isReadyToRender) {
         return null;
@@ -58,10 +58,9 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                     {msg("loginTitleHtml", realm.displayNameHtml)}
                 </div>
             </div>
-
             <div className={kcClsx("kcFormCardClass")}>
                 <header className={kcClsx("kcFormHeaderClass")}>
-                    {realm.internationalizationEnabled && (assert(locale !== undefined), locale.supported.length > 1) && (
+                    {enabledLanguages.length > 1 && (
                         <div className={kcClsx("kcLocaleMainClass")} id="kc-locale">
                             <div id="kc-locale-wrapper" className={kcClsx("kcLocaleWrapperClass")}>
                                 <div id="kc-locale-dropdown" className={clsx("menu-button-links", kcClsx("kcLocaleDropDownClass"))}>
@@ -73,7 +72,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                                         aria-expanded="false"
                                         aria-controls="language-switch1"
                                     >
-                                        {labelBySupportedLanguageTag[currentLanguageTag]}
+                                        {currentLanguage.label}
                                     </button>
                                     <ul
                                         role="menu"
@@ -83,15 +82,10 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                                         id="language-switch1"
                                         className={kcClsx("kcLocaleListClass")}
                                     >
-                                        {locale.supported.map(({ languageTag }, i) => (
+                                        {enabledLanguages.map(({ languageTag, label, href }, i) => (
                                             <li key={languageTag} className={kcClsx("kcLocaleListItemClass")} role="none">
-                                                <a
-                                                    role="menuitem"
-                                                    id={`language-${i + 1}`}
-                                                    className={kcClsx("kcLocaleItemClass")}
-                                                    href={getChangeLocaleUrl(languageTag)}
-                                                >
-                                                    {labelBySupportedLanguageTag[languageTag]}
+                                                <a role="menuitem" id={`language-${i + 1}`} className={kcClsx("kcLocaleItemClass")} href={href}>
+                                                    {label}
                                                 </a>
                                             </li>
                                         ))}
@@ -152,7 +146,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                                 <span
                                     className={kcClsx("kcAlertTitleClass")}
                                     dangerouslySetInnerHTML={{
-                                        __html: message.summary
+                                        __html: kcSanitize(message.summary)
                                     }}
                                 />
                             </div>

package/src/login/{Template.useStylesAndScripts.ts → Template.useInitialize.ts}

@@ -2,7 +2,7 @@ import { useEffect } from "react";
 import { assert } from "keycloakify/tools/assert";
 import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import { useInsertLinkTags } from "keycloakify/tools/useInsertLinkTags";
-import { KcContext } from "keycloakify/login/KcContext/KcContext";
+import type { KcContext } from "keycloakify/login/KcContext";
 
 export type KcContextLike = {
     url: {
@@ -10,34 +10,19 @@ export type KcContextLike = {
         resourcesPath: string;
         ssoLoginInOtherTabsUrl: string;
     };
-    locale?: {
-        currentLanguageTag: string;
-    };
     scripts: string[];
 };
 
 assert<keyof KcContextLike extends keyof KcContext ? true : false>();
 assert<KcContext extends KcContextLike ? true : false>();
 
-export function useStylesAndScripts(params: {
+export function useInitialize(params: {
     kcContext: KcContextLike;
     doUseDefaultCss: boolean;
 }) {
     const { kcContext, doUseDefaultCss } = params;
 
-    const { url, locale, scripts } = kcContext;
-
-    useEffect(() => {
-        const { currentLanguageTag } = locale ?? {};
-
-        if (currentLanguageTag === undefined) {
-            return;
-        }
-
-        const html = document.querySelector("html");
-        assert(html !== null);
-        html.lang = currentLanguageTag;
-    }, []);
+    const { url, scripts } = kcContext;
 
     const { areAllStyleSheetsLoaded } = useInsertLinkTags({
         componentOrHookName: "Template",
@@ -55,14 +40,7 @@ export function useStylesAndScripts(params: {
     const { insertScriptTags } = useInsertScriptTags({
         componentOrHookName: "Template",
         scriptTags: [
-            {
-                type: "importmap",
-                textContent: JSON.stringify({
-                    imports: {
-                        rfc4648: `${url.resourcesCommonPath}/node_modules/rfc4648/lib/rfc4648.js`
-                    }
-                })
-            },
+            // NOTE: The importmap is added in by the FTL script because it's too late to add it here.
             {
                 type: "module",
                 src: `${url.resourcesPath}/js/menu-button-links.js`
@@ -76,9 +54,7 @@ export function useStylesAndScripts(params: {
                 textContent: `
                     import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js";
 
-                    checkCookiesAndSetTimer(
-                        "${url.ssoLoginInOtherTabsUrl}"
-                    );
+                    checkCookiesAndSetTimer("${url.ssoLoginInOtherTabsUrl}");
                 `
             }
         ]

package/src/login/i18n/index.ts

@@ -1,5 +1,5 @@
-import type { GenericI18n } from "./GenericI18n";
-import type { MessageKey_defaultSet, KcContextLike } from "./i18n";
-export type { MessageKey_defaultSet, KcContextLike };
-export type I18n = GenericI18n<MessageKey_defaultSet>;
-export { createUseI18n } from "./useI18n";
+export * from "./withJsx";
+import type { GenericI18n } from "./withJsx/GenericI18n";
+import type { MessageKey as MessageKey_defaultSet } from "./messages_defaultSet/types";
+/** INTERNAL: DO NOT IMPORT THIS */
+export type I18n = GenericI18n<MessageKey_defaultSet, string>;

package/src/login/i18n/messages_defaultSet/types.ts

@@ -0,0 +1,37 @@
+
+export const languageTags = [
+  "ar",
+  "ca",
+  "cs",
+  "da",
+  "de",
+  "el",
+  "en",
+  "es",
+  "fa",
+  "fi",
+  "fr",
+  "hu",
+  "it",
+  "ja",
+  "ka",
+  "lt",
+  "lv",
+  "nl",
+  "no",
+  "pl",
+  "pt",
+  "pt-BR",
+  "ru",
+  "sk",
+  "sv",
+  "th",
+  "tr",
+  "uk",
+  "zh-CN",
+  "zh-TW"
+] as const;
+
+export type LanguageTag = typeof languageTags[number];
+
+export type MessageKey = keyof typeof import("./en")["default"];

package/src/login/i18n/noJsx/GenericI18n_noJsx.ts

@@ -0,0 +1,64 @@
+export type GenericI18n_noJsx<MessageKey extends string, LanguageTag extends string> = {
+    currentLanguage: {
+        /**
+         * e.g: "en", "fr", "zh-CN"
+         *
+         * The current language
+         */
+        languageTag: LanguageTag;
+        /**
+         * e.g: "English", "Français", "中文（简体）"
+         *
+         * The current language
+         */
+        label: string;
+    };
+    /**
+     * Array of languages enabled on the realm.
+     */
+    enabledLanguages: {
+        languageTag: LanguageTag;
+        label: string;
+        href: string;
+    }[];
+    /**
+     *
+     * Examples assuming currentLanguageTag === "en"
+     * {
+     *   en: {
+     *     "access-denied": "Access denied",
+     *     "impersonateTitleHtml": "<strong>{0}</strong> Impersonate User",
+     *     "bar": "Bar {0}"
+     *   }
+     * }
+     *
+     * msgStr("access-denied") === "Access denied"
+     * msgStr("not-a-message-key") Throws an error
+     * msgStr("impersonateTitleHtml", "Foo") === "<strong>Foo</strong> Impersonate User"
+     * msgStr("${bar}", "<strong>c</strong>") === "Bar &lt;strong&gt;XXX&lt;/strong&gt;"
+     *  The html in the arg is partially escaped for security reasons, it might come from an untrusted source, it's not safe to render it as html.
+     */
+    msgStr: (key: MessageKey, ...args: (string | undefined)[]) => string;
+    /**
+     * This is meant to be used when the key argument is variable, something that might have been configured by the user
+     * in the Keycloak admin for example.
+     *
+     * Examples assuming currentLanguageTag === "en"
+     * {
+     *   en: {
+     *     "access-denied": "Access denied",
+     *   }
+     * }
+     *
+     * advancedMsgStr("${access-denied}") === advancedMsgStr("access-denied") === msgStr("access-denied") === "Access denied"
+     * advancedMsgStr("${not-a-message-key}") === advancedMsgStr("not-a-message-key") === "not-a-message-key"
+     */
+    advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
+
+    /**
+     * Initially the messages are in english (fallback language).
+     * The translations in the current language are being fetched dynamically.
+     * This property is true while the translations are being fetched.
+     */
+    isFetchingTranslations: boolean;
+};