fix(framework): improve themeRoot validation (#13354)

Fix themeRoot validation to require explicit origin allowlist via meta tag
and separate configuration storage from validated URL usage.

Problem:
- themeRoot URLs were not properly validated for security
- getThemeRoot() mixed raw configuration with validated URLs
- Missing validation for relative paths and URL formats

Solution:
1. Require meta tag for all themeRoot usage:
    <meta name="sap-allowed-theme-origins" content="https://cdn.example.com">

    - Comma-separated list of allowed origins
    - Wildcard "*" to allow any origin
    - Legacy "sap-allowedThemeOrigins" (camelCase) supported
    - Same-origin URLs allowed when meta tag present

2. Separate configuration from validation:
    - getThemeRoot() returns raw configured value (unchanged)
    - validateThemeRoot() performs security checks and normalization
    - DOM link creation uses validated URL: {validatedRoot}/UI5/Base/baseLib/{theme}/css_variables.css

3. Enhanced validation:
    - Absolute URLs: check origin against allowlist
    - Relative paths (./path, ../path): resolve to current origin
    - Absolute paths (/path): resolve to current origin
    - Add trailing slash if missing
    - Append /UI5/ to create proper theme asset path
    - Return undefined for invalid/unauthorized URLs

4. Proper error handling:
    - Log warning when validation fails
    - No DOM link created for invalid themeRoot
    - Graceful fallback to default theme behavior

Author: nnaydenow

packages/base/src/InitialConfiguration.ts

@@ -1,7 +1,6 @@
 import merge from "./thirdparty/merge.js";
 import { getFeature } from "./FeaturesRegistry.js";
 import { DEFAULT_THEME } from "./generated/AssetParameters.js";
-import validateThemeRoot from "./validateThemeRoot.js";
 import type OpenUI5Support from "./features/OpenUI5Support.js";
 import type { FormatSettings } from "./config/FormatSettings.js";
 import AnimationMode from "./types/AnimationMode.js";
@@ -156,7 +155,7 @@ const parseURLParameters = () => {
 const normalizeThemeRootParamValue = (value: string) => {
 	const themeRoot = value.split("@")[1];
 
-	return validateThemeRoot(themeRoot);
+	return themeRoot;
 };
 
 const normalizeThemeParamValue = (param: string, value: string) => {

packages/base/src/config/ThemeRoot.ts

@@ -43,16 +43,11 @@ const setThemeRoot = (themeRoot: string): Promise<void> | undefined => {
 
 	currThemeRoot = themeRoot;
 
-	if (!validateThemeRoot(themeRoot)) {
-		console.warn(`The ${themeRoot} is not valid. Check the allowed origins as suggested in the "setThemeRoot" description.`); // eslint-disable-line
-		return;
-	}
-
 	return attachCustomThemeStylesToHead(getTheme());
 };
 
-const formatThemeLink = (theme: string) => {
-	return `${getThemeRoot()!}Base/baseLib/${theme}/css_variables.css`; // theme root is always set at this point.
+const formatThemeLink = (theme: string, validatedThemeRoot: string) => {
+	return `${validatedThemeRoot}Base/baseLib/${theme}/css_variables.css`;
 };
 
 const attachCustomThemeStylesToHead = async (theme: string): Promise<void> => {
@@ -62,7 +57,20 @@ const attachCustomThemeStylesToHead = async (theme: string): Promise<void> => {
 		document.head.removeChild(link);
 	}
 
-	await createLinkInHead(formatThemeLink(theme), { "sap-ui-webcomponents-theme": theme });
+	const themeRoot = getThemeRoot();
+
+	if (!themeRoot) {
+		return;
+	}
+
+	const validatedThemeRoot = validateThemeRoot(themeRoot);
+
+	if (!validatedThemeRoot) {
+		console.warn(`The ${themeRoot} is not valid. Check the allowed origins as suggested in the "setThemeRoot" description.`); // eslint-disable-line
+		return;
+	}
+
+	await createLinkInHead(formatThemeLink(theme, validatedThemeRoot), { "sap-ui-webcomponents-theme": theme });
 };
 
 export {

packages/base/src/validateThemeRoot.ts

@@ -1,45 +1,65 @@
+const isSSR = typeof document === "undefined";
+
+const getLocationHref = () => {
+	if (isSSR) {
+		return "";
+	}
+
+	return window.location.href;
+};
+
 const getMetaTagValue = (metaTagName: string) => {
 	const metaTag = document.querySelector(`META[name="${metaTagName}"]`),
 		metaTagContent = metaTag && metaTag.getAttribute("content");
 
 	return metaTagContent;
 };
 
-const validateThemeOrigin = (origin: string) => {
-	const allowedOrigins = getMetaTagValue("sap-allowedThemeOrigins");
+const validateThemeOrigin = (origin: string, isSameOrigin: boolean = false) => {
+	const allowedOrigins = getMetaTagValue("sap-allowed-theme-origins") ?? getMetaTagValue("sap-allowedThemeOrigins"); // Prioritize the new meta tag name
 
-	return allowedOrigins && allowedOrigins.split(",").some(allowedOrigin => {
-		return allowedOrigin === "*" || origin === allowedOrigin.trim();
-	});
-};
+	// If no allowed origins are specified, block.
+	if (!allowedOrigins) {
+		return false;
+	}
 
-const buildCorrectUrl = (oldUrl: string, newOrigin: string) => {
-	const oldUrlPath = new URL(oldUrl).pathname;
+	// If it's same-origin (relative URL resolved to current page), allow it when there's any meta tag present
+	// The presence of the meta tag indicates the user wants to use theme roots
+	if (isSameOrigin) {
+		return true;
+	}
 
-	return new URL(oldUrlPath, newOrigin).toString();
+	return allowedOrigins.split(",").some(allowedOrigin => {
+		return allowedOrigin === "*" || origin === allowedOrigin.trim();
+	});
 };
 
 const validateThemeRoot = (themeRoot: string) => {
 	let resultUrl;
+	let isSameOrigin = false;
 
 	try {
 		if (themeRoot.startsWith(".") || themeRoot.startsWith("/")) {
 			// Handle relative url
 			// new URL("/newExmPath", "http://example.com/exmPath") => http://example.com/newExmPath
 			// new URL("./newExmPath", "http://example.com/exmPath") => http://example.com/exmPath/newExmPath
 			// new URL("../newExmPath", "http://example.com/exmPath") => http://example.com/newExmPath
-			resultUrl = new URL(themeRoot, window.location.href).toString();
+			resultUrl = new URL(themeRoot, getLocationHref()).toString();
+			isSameOrigin = true;
 		} else {
 			const themeRootURL = new URL(themeRoot);
 			const origin = themeRootURL.origin;
+			const currentOrigin = new URL(getLocationHref()).origin;
+
+			// Check if the absolute URL is same-origin
+			isSameOrigin = origin === currentOrigin;
 
-			if (origin && validateThemeOrigin(origin)) {
+			if (origin && validateThemeOrigin(origin, isSameOrigin)) {
 				// If origin is allowed, use it
 				resultUrl = themeRootURL.toString();
 			} else {
-				// If origin is not allow and the URL is not relative, we have to replace the origin
-				// with current location
-				resultUrl = buildCorrectUrl(themeRootURL.toString(), window.location.href);
+				// If origin is not allowed, return undefined to indicate validation failed
+				return undefined;
 			}
 		}
 
@@ -50,6 +70,7 @@ const validateThemeRoot = (themeRoot: string) => {
 		return `${resultUrl}UI5/`;
 	} catch (e) {
 		// Catch if URL is not correct
+		return undefined;
 	}
 };