@ui5/webcomponents-base 2.10.0 → 2.10.1

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.10.1](https://github.com/UI5/webcomponents/compare/v2.10.0...v2.10.1) (2026-05-11)
+
+
+### Bug Fixes
+
+* **framework:** improve themeRoot validation ([#13354](https://github.com/UI5/webcomponents/issues/13354)) ([8735b72](https://github.com/UI5/webcomponents/commit/8735b72ffd1103fa02c26cbba55d28d7562747da))
+* validate correctly protocol relative urls ([#13447](https://github.com/UI5/webcomponents/issues/13447)) ([2fc757f](https://github.com/UI5/webcomponents/commit/2fc757f2e37aede2974a9136de908ce3bd4fc37d))
+
+
+
+
+
 # [2.10.0](https://github.com/SAP/ui5-webcomponents/compare/v2.10.0-rc.3...v2.10.0) (2025-05-07)
 
 **Note:** Version bump only for package @ui5/webcomponents-base

package/cypress/specs/ConfigurationChange.cy.tsx

@@ -39,3 +39,202 @@ describe("Some configuration options can be changed at runtime", () => {
 			.should("deep.equal", newThemeRoot);
 	});
 });
+
+describe("ThemeRoot validation at runtime", () => {
+	describe("Valid themeRoot with allowed origin", () => {
+		before(() => {
+			cy.window()
+				.then($el => {
+					const metaTag = document.createElement("meta");
+					metaTag.name = "sap-allowed-theme-origins";
+					metaTag.content = "https://runtime-example.com";
+					$el.document.head.append(metaTag);
+				});
+		});
+
+		after(() => {
+			cy.window()
+				.then($el => {
+					const metaTag = $el.document.head.querySelector("[name='sap-allowed-theme-origins']");
+					metaTag?.remove();
+					const link = $el.document.head.querySelector("link[sap-ui-webcomponents-theme]");
+					link?.remove();
+				});
+		});
+
+		it("should set raw themeRoot", () => {
+			cy.wrap({ setThemeRoot })
+				.invoke("setThemeRoot", "https://runtime-example.com/themes");
+
+			cy.wrap({ getThemeRoot })
+				.invoke("getThemeRoot")
+				.should("equal", "https://runtime-example.com/themes");
+
+			// Verify link is created in DOM
+			cy.wrap({ getTheme })
+				.invoke("getTheme")
+				.then(theme => {
+					cy.get(`link[sap-ui-webcomponents-theme="${theme}"]`)
+						.should("exist")
+						.and("have.attr", "href")
+						.then(href => {
+							return href.includes("https://runtime-example.com/themes/UI5/Base/baseLib/");
+						})
+						.should("be.true");
+				});
+		});
+	});
+
+	describe("Invalid themeRoot without meta tag", () => {
+		after(() => {
+			cy.window()
+				.then($el => {
+					const link = $el.document.head.querySelector("link[sap-ui-webcomponents-theme]");
+					link?.remove();
+				});
+		});
+
+		it("should set themeRoot but log warning", () => {
+			const consoleWarnStub = cy.stub().as("consoleWarn");
+
+			cy.window().then(win => {
+				cy.stub(win.console, "warn").callsFake(consoleWarnStub);
+			});
+
+			cy.wrap({ setThemeRoot })
+				.invoke("setThemeRoot", "https://unauthorized-runtime.com/themes");
+
+			// The themeRoot should be set in the internal state
+			cy.wrap({ getThemeRoot })
+				.invoke("getThemeRoot")
+				.should("equal", "https://unauthorized-runtime.com/themes");
+
+			// But validation should fail and log a warning
+			cy.get("@consoleWarn").should("have.been.called");
+
+			// Verify link is NOT created in DOM
+			cy.get("link[sap-ui-webcomponents-theme]")
+				.should("not.exist");
+		});
+	});
+
+	describe("Relative themeRoot at runtime", () => {
+		before(() => {
+			cy.window()
+				.then($el => {
+					const metaTag = document.createElement("meta");
+					metaTag.name = "sap-allowed-theme-origins";
+					metaTag.content = "*";
+					$el.document.head.append(metaTag);
+				});
+		});
+
+		after(() => {
+			cy.window()
+				.then($el => {
+					const metaTag = $el.document.head.querySelector("[name='sap-allowed-theme-origins']");
+					metaTag?.remove();
+					const link = $el.document.head.querySelector("link[sap-ui-webcomponents-theme]");
+					link?.remove();
+				});
+		});
+
+		it("should set raw relative path", () => {
+			cy.wrap({ setThemeRoot })
+				.invoke("setThemeRoot", "./custom-themes");
+
+			cy.wrap({ getThemeRoot })
+				.invoke("getThemeRoot")
+				.should("equal", "./custom-themes");
+
+			// Verify link is created with resolved URL
+			cy.wrap({ getTheme })
+				.invoke("getTheme")
+				.then(theme => {
+					cy.get(`link[sap-ui-webcomponents-theme="${theme}"]`)
+						.should("exist")
+						.and("have.attr", "href")
+						.then(href => {
+							return href.includes("/custom-themes/UI5/Base/baseLib/");
+						})
+						.should("be.true");
+				});
+		});
+	});
+
+	describe("Same themeRoot not re-applied", () => {
+		before(() => {
+			cy.window()
+				.then($el => {
+					const metaTag = document.createElement("meta");
+					metaTag.name = "sap-allowed-theme-origins";
+					metaTag.content = "https://same-root.com";
+					$el.document.head.append(metaTag);
+				});
+		});
+
+		after(() => {
+			cy.window()
+				.then($el => {
+					const metaTag = $el.document.head.querySelector("[name='sap-allowed-theme-origins']");
+					metaTag?.remove();
+					const link = $el.document.head.querySelector("link[sap-ui-webcomponents-theme]");
+					link?.remove();
+				});
+		});
+
+		it("should not reprocess when setting the same themeRoot", () => {
+			const themeRoot = "https://same-root.com/themes";
+
+			cy.wrap({ setThemeRoot })
+				.invoke("setThemeRoot", themeRoot)
+				.should("not.equal", undefined);
+
+			// Setting again should return undefined (no-op)
+			cy.wrap({ setThemeRoot })
+				.invoke("setThemeRoot", themeRoot)
+				.should("equal", undefined);
+		});
+	});
+
+	describe("ThemeRoot with wildcard origin", () => {
+		before(() => {
+			cy.window()
+				.then($el => {
+					const metaTag = document.createElement("meta");
+					metaTag.name = "sap-allowed-theme-origins";
+					metaTag.content = "*";
+					$el.document.head.append(metaTag);
+				});
+		});
+
+		after(() => {
+			cy.window()
+				.then($el => {
+					const metaTag = $el.document.head.querySelector("[name='sap-allowed-theme-origins']");
+					metaTag?.remove();
+					const link = $el.document.head.querySelector("link[sap-ui-webcomponents-theme]");
+					link?.remove();
+				});
+		});
+
+		it("should allow any origin with wildcard", () => {
+			cy.wrap({ setThemeRoot })
+				.invoke("setThemeRoot", "https://any-wildcard-domain.com/themes");
+
+			cy.wrap({ getThemeRoot })
+				.invoke("getThemeRoot")
+				.should("equal", "https://any-wildcard-domain.com/themes");
+
+			// Verify link is created with wildcard-allowed origin
+			cy.wrap({ getTheme })
+				.invoke("getTheme")
+				.then(theme => {
+					cy.get(`link[sap-ui-webcomponents-theme="${theme}"]`)
+						.should("exist")
+						.and("have.attr", "href")
+						.and("include", "https://any-wildcard-domain.com/themes/UI5/Base/baseLib/");
+				});
+		});
+	});
+});

package/cypress/specs/ConfigurationScript.cy.tsx

@@ -6,8 +6,10 @@ import { getFirstDayOfWeek, getLegacyDateCalendarCustomizing } from "../../src/c
 import { getLanguage } from "../../src/config/Language.js";
 import { getNoConflict } from "../../src/config/NoConflict.js";
 import { getTheme } from "../../src/config/Theme.js";
+import { getThemeRoot } from "../../src/config/ThemeRoot.js";
 import { getEnableDefaultTooltips } from "../../src/config/Tooltips.js";
 import { resetConfiguration } from "../../src/InitialConfiguration.js";
+import applyTheme from "../../src/theming/applyTheme.js";
 
 describe("Configuration script", () => {
 	const configurationObject = {
@@ -131,3 +133,396 @@ describe("Configuration script", () => {
 			.should("equal", false);
 	});
 });
+
+describe("Configuration script with themeRoot", () => {
+	describe("Valid absolute themeRoot with allowed origin", () => {
+		before(() => {
+			// Add meta tag to allow the origin
+			cy.window()
+				.then($el => {
+					const metaTag = document.createElement("meta");
+					metaTag.name = "sap-allowed-theme-origins";
+					metaTag.content = "https://example.com";
+					$el.document.head.append(metaTag);
+				});
+
+			cy.window()
+				.then($el => {
+					const scriptElement = document.createElement("script");
+					scriptElement.type = "application/json";
+					scriptElement.setAttribute("data-ui5-config", "true");
+					scriptElement.innerHTML = JSON.stringify({
+						theme: "custom_theme",
+						themeRoot: "https://example.com/themes",
+					});
+					return $el.document.head.append(scriptElement);
+				});
+
+			cy.wrap({ resetConfiguration })
+				.invoke("resetConfiguration", true);
+
+			cy.mount(<TestGeneric />);
+		});
+
+		afterEach(() => {
+			cy.window()
+				.then($el => {
+					const link = $el.document.head.querySelector("link[sap-ui-webcomponents-theme]");
+					link?.remove();
+				});
+		});
+
+		after(() => {
+			cy.window()
+				.then($el => {
+					const scriptElement = $el.document.head.querySelector("script[data-ui5-config]");
+					scriptElement?.remove();
+					const metaTag = $el.document.head.querySelector("[name='sap-allowed-theme-origins']");
+					metaTag?.remove();
+				});
+		});
+
+		it("should return raw themeRoot from configuration", () => {
+			cy.wrap({ getThemeRoot })
+				.invoke("getThemeRoot")
+				.should("equal", "https://example.com/themes");
+		});
+
+		it("should create link in DOM with validated URL", () => {
+			// Apply theme to trigger link creation
+			cy.wrap({ applyTheme, getTheme })
+				.invoke("getTheme")
+				.then(theme => {
+					return cy.wrap({ applyTheme }).invoke("applyTheme", theme);
+				});
+
+			cy.get("link[sap-ui-webcomponents-theme='custom_theme']")
+				.should("exist")
+				.and("have.attr", "href")
+				.and("equal", "https://example.com/themes/UI5/Base/baseLib/custom_theme/css_variables.css");
+		});
+	});
+
+	describe("Invalid absolute themeRoot without allowed origin", () => {
+		before(() => {
+			cy.window()
+				.then($el => {
+					const scriptElement = document.createElement("script");
+					scriptElement.type = "application/json";
+					scriptElement.setAttribute("data-ui5-config", "true");
+					scriptElement.innerHTML = JSON.stringify({
+						theme: "custom_theme",
+						themeRoot: "https://unauthorized.com/themes",
+					});
+					return $el.document.head.append(scriptElement);
+				});
+
+			cy.wrap({ resetConfiguration })
+				.invoke("resetConfiguration", true);
+
+			cy.mount(<TestGeneric />);
+		});
+
+		afterEach(() => {
+			cy.window()
+				.then($el => {
+					const link = $el.document.head.querySelector("link[sap-ui-webcomponents-theme]");
+					link?.remove();
+				});
+		});
+
+		after(() => {
+			cy.window()
+				.then($el => {
+					const scriptElement = $el.document.head.querySelector("script[data-ui5-config]");
+					scriptElement?.remove();
+				});
+		});
+
+		it("should return raw themeRoot from configuration", () => {
+			cy.wrap({ getThemeRoot })
+				.invoke("getThemeRoot")
+				.should("equal", "https://unauthorized.com/themes");
+		});
+
+		it("should not create link in DOM due to validation failure", () => {
+			cy.get("link[sap-ui-webcomponents-theme='custom_theme']")
+				.should("not.exist");
+		});
+	});
+
+	describe("Relative themeRoot with meta tag", () => {
+		before(() => {
+			// Relative URLs require meta tag to be present
+			cy.window()
+				.then($el => {
+					const metaTag = document.createElement("meta");
+					metaTag.name = "sap-allowed-theme-origins";
+					metaTag.content = "*";
+					$el.document.head.append(metaTag);
+				});
+
+			cy.window()
+				.then($el => {
+					const scriptElement = document.createElement("script");
+					scriptElement.type = "application/json";
+					scriptElement.setAttribute("data-ui5-config", "true");
+					scriptElement.innerHTML = JSON.stringify({
+						theme: "custom_theme",
+						themeRoot: "./themes",
+					});
+					return $el.document.head.append(scriptElement);
+				});
+
+			cy.wrap({ resetConfiguration })
+				.invoke("resetConfiguration", true);
+
+			cy.mount(<TestGeneric />);
+		});
+
+		afterEach(() => {
+			cy.window()
+				.then($el => {
+					const link = $el.document.head.querySelector("link[sap-ui-webcomponents-theme]");
+					link?.remove();
+				});
+		});
+
+		after(() => {
+			cy.window()
+				.then($el => {
+					const scriptElement = $el.document.head.querySelector("script[data-ui5-config]");
+					scriptElement?.remove();
+					const metaTag = $el.document.head.querySelector("[name='sap-allowed-theme-origins']");
+					metaTag?.remove();
+				});
+		});
+
+		it("should return raw relative themeRoot", () => {
+			cy.wrap({ getThemeRoot })
+				.invoke("getThemeRoot")
+				.should("equal", "./themes");
+		});
+
+		it("should create link with resolved URL", () => {
+			// Apply theme to trigger link creation
+			cy.wrap({ applyTheme, getTheme })
+				.invoke("getTheme")
+				.then(theme => {
+					return cy.wrap({ applyTheme }).invoke("applyTheme", theme);
+				});
+
+			cy.get("link[sap-ui-webcomponents-theme='custom_theme']")
+				.should("exist")
+				.and("have.attr", "href")
+				.then(href => {
+					return href.includes("/themes/UI5/Base/baseLib/custom_theme/css_variables.css");
+				})
+				.should("be.true");
+		});
+	});
+
+	describe("Wildcard allowed origins", () => {
+		before(() => {
+			cy.window()
+				.then($el => {
+					const metaTag = document.createElement("meta");
+					metaTag.name = "sap-allowed-theme-origins";
+					metaTag.content = "*";
+					$el.document.head.append(metaTag);
+				});
+
+			cy.window()
+				.then($el => {
+					const scriptElement = document.createElement("script");
+					scriptElement.type = "application/json";
+					scriptElement.setAttribute("data-ui5-config", "true");
+					scriptElement.innerHTML = JSON.stringify({
+						theme: "custom_theme",
+						themeRoot: "https://any-domain.com/themes",
+					});
+					return $el.document.head.append(scriptElement);
+				});
+
+			cy.wrap({ resetConfiguration })
+				.invoke("resetConfiguration", true);
+
+			cy.mount(<TestGeneric />);
+		});
+
+		afterEach(() => {
+			cy.window()
+				.then($el => {
+					const link = $el.document.head.querySelector("link[sap-ui-webcomponents-theme]");
+					link?.remove();
+				});
+		});
+
+		after(() => {
+			cy.window()
+				.then($el => {
+					const scriptElement = $el.document.head.querySelector("script[data-ui5-config]");
+					scriptElement?.remove();
+					const metaTag = $el.document.head.querySelector("[name='sap-allowed-theme-origins']");
+					metaTag?.remove();
+				});
+		});
+
+		it("should return raw themeRoot", () => {
+			cy.wrap({ getThemeRoot })
+				.invoke("getThemeRoot")
+				.should("equal", "https://any-domain.com/themes");
+		});
+
+		it("should create link with wildcard-allowed origin", () => {
+			// Apply theme to trigger link creation
+			cy.wrap({ applyTheme, getTheme })
+				.invoke("getTheme")
+				.then(theme => {
+					return cy.wrap({ applyTheme }).invoke("applyTheme", theme);
+				});
+
+			cy.get("link[sap-ui-webcomponents-theme='custom_theme']")
+				.should("exist")
+				.and("have.attr", "href")
+				.and("equal", "https://any-domain.com/themes/UI5/Base/baseLib/custom_theme/css_variables.css");
+		});
+	});
+
+	describe("Multiple allowed origins", () => {
+		before(() => {
+			cy.window()
+				.then($el => {
+					const metaTag = document.createElement("meta");
+					metaTag.name = "sap-allowed-theme-origins";
+					metaTag.content = "https://example.com, https://cdn.example.net, https://themes.example.org";
+					$el.document.head.append(metaTag);
+				});
+
+			cy.window()
+				.then($el => {
+					const scriptElement = document.createElement("script");
+					scriptElement.type = "application/json";
+					scriptElement.setAttribute("data-ui5-config", "true");
+					scriptElement.innerHTML = JSON.stringify({
+						theme: "custom_theme",
+						themeRoot: "https://cdn.example.net/ui5-themes",
+					});
+					return $el.document.head.append(scriptElement);
+				});
+
+			cy.wrap({ resetConfiguration })
+				.invoke("resetConfiguration", true);
+
+			cy.mount(<TestGeneric />);
+		});
+
+		afterEach(() => {
+			cy.window()
+				.then($el => {
+					const link = $el.document.head.querySelector("link[sap-ui-webcomponents-theme]");
+					link?.remove();
+				});
+		});
+
+		after(() => {
+			cy.window()
+				.then($el => {
+					const scriptElement = $el.document.head.querySelector("script[data-ui5-config]");
+					scriptElement?.remove();
+					const metaTag = $el.document.head.querySelector("[name='sap-allowed-theme-origins']");
+					metaTag?.remove();
+				});
+		});
+
+		it("should return raw themeRoot", () => {
+			cy.wrap({ getThemeRoot })
+				.invoke("getThemeRoot")
+				.should("equal", "https://cdn.example.net/ui5-themes");
+		});
+
+		it("should create link matching one of multiple origins", () => {
+			// Apply theme to trigger link creation
+			cy.wrap({ applyTheme, getTheme })
+				.invoke("getTheme")
+				.then(theme => {
+					return cy.wrap({ applyTheme }).invoke("applyTheme", theme);
+				});
+
+			cy.get("link[sap-ui-webcomponents-theme='custom_theme']")
+				.should("exist")
+				.and("have.attr", "href")
+				.and("equal", "https://cdn.example.net/ui5-themes/UI5/Base/baseLib/custom_theme/css_variables.css");
+		});
+	});
+
+	describe("Same-origin absolute URL", () => {
+		before(() => {
+			cy.window()
+				.then($el => {
+					const metaTag = document.createElement("meta");
+					metaTag.name = "sap-allowed-theme-origins";
+					metaTag.content = "https://example.com";
+					$el.document.head.append(metaTag);
+
+					const currentOrigin = window.location.origin;
+					const scriptElement = document.createElement("script");
+					scriptElement.type = "application/json";
+					scriptElement.setAttribute("data-ui5-config", "true");
+					scriptElement.innerHTML = JSON.stringify({
+						theme: "custom_theme",
+						themeRoot: `${currentOrigin}/themes`,
+					});
+					return $el.document.head.append(scriptElement);
+				});
+
+			cy.wrap({ resetConfiguration })
+				.invoke("resetConfiguration", true);
+
+			cy.mount(<TestGeneric />);
+		});
+
+		afterEach(() => {
+			cy.window()
+				.then($el => {
+					const link = $el.document.head.querySelector("link[sap-ui-webcomponents-theme]");
+					link?.remove();
+				});
+		});
+
+		after(() => {
+			cy.window()
+				.then($el => {
+					const scriptElement = $el.document.head.querySelector("script[data-ui5-config]");
+					scriptElement?.remove();
+					const metaTag = $el.document.head.querySelector("[name='sap-allowed-theme-origins']");
+					metaTag?.remove();
+				});
+		});
+
+		it("should return raw same-origin themeRoot", () => {
+			cy.window().then(win => {
+				cy.wrap({ getThemeRoot })
+					.invoke("getThemeRoot")
+					.should("equal", `${win.location.origin}/themes`);
+			});
+		});
+
+		it("should create link for same-origin URL", () => {
+			// Apply theme to trigger link creation
+			cy.wrap({ applyTheme, getTheme })
+				.invoke("getTheme")
+				.then(theme => {
+					return cy.wrap({ applyTheme }).invoke("applyTheme", theme);
+				});
+
+			cy.get("link[sap-ui-webcomponents-theme='custom_theme']")
+				.should("exist")
+				.and("have.attr", "href")
+				.then(href => {
+					return href.endsWith("/themes/UI5/Base/baseLib/custom_theme/css_variables.css");
+				})
+				.should("be.true");
+		});
+	});
+});