fix: escape HTML entities in localization arguments

cherry-picked from V15

Author: iOvergaard

src/libs/localization-api/localization.controller.test.ts

@@ -175,6 +175,12 @@ describe('UmbLocalizeController', () => {
 			expect((controller.term as any)('logout', 'Hello', 'World')).to.equal('Log out');
 		});
 
+		it('should encode HTML entities', () => {
+			expect(controller.term('withInlineToken', 'Hello', '<script>alert("XSS")</script>'), 'XSS detected').to.equal(
+				'Hello &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;',
+			);
+		});
+
 		it('only reacts to changes of its own localization-keys', async () => {
 			const element: UmbLocalizationRenderCountElement = await fixture(
 				html`<umb-localization-render-count></umb-localization-render-count>`,
@@ -290,6 +296,12 @@ describe('UmbLocalizeController', () => {
 			const str = '#missing_translation_key';
 			expect(controller.string(str)).to.equal('#missing_translation_key');
 		});
+
+		it('should return an empty string if the input is not a string', async () => {
+			expect(controller.string(123)).to.equal('');
+			expect(controller.string({})).to.equal('');
+			expect(controller.string(undefined)).to.equal('');
+		});
 	});
 
 	describe('host element', () => {

src/libs/localization-api/localization.controller.ts

@@ -20,6 +20,7 @@ import type {
 import { umbLocalizationManager } from './localization.manager.js';
 import type { LitElement } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbController, UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { escapeHTML } from '@umbraco-cms/backoffice/utils';
 
 const LocalizationControllerAlias = Symbol();
 /**
@@ -109,38 +110,45 @@ export class UmbLocalizationController<LocalizationSetType extends UmbLocalizati
 
 	/**
 	 * Outputs a translated term.
-	 * @param key
-	 * @param {...any} args
+	 * @param {string} key - the localization key, the indicator of what localization entry you want to retrieve.
+	 * @param {...any} args - the arguments to parse for this localization entry.
+	 * @returns {string} - the translated term as a string.
 	 */
 	term<K extends keyof LocalizationSetType>(key: K, ...args: FunctionParams<LocalizationSetType[K]>): string {
 		if (!this.#usedKeys.includes(key)) {
 			this.#usedKeys.push(key);
 		}
 
 		const { primary, secondary } = this.getLocalizationData(this.lang());
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		let term: any;
 
 		// Look for a matching term using regionCode, code, then the fallback
-		if (primary && primary[key]) {
+		if (primary?.[key]) {
 			term = primary[key];
-		} else if (secondary && secondary[key]) {
+		} else if (secondary?.[key]) {
 			term = secondary[key];
-		} else if (umbLocalizationManager.fallback && umbLocalizationManager.fallback[key]) {
+		} else if (umbLocalizationManager.fallback?.[key]) {
 			term = umbLocalizationManager.fallback[key];
 		} else {
 			return String(key);
 		}
 
+		// As translated texts can contain HTML, we will need to render with unsafeHTML.
+		// But arguments can come from user input, so they should be escaped.
+		const sanitizedArgs = args.map((a) => escapeHTML(a));
+
 		if (typeof term === 'function') {
-			return term(...args) as string;
+			return term(...sanitizedArgs) as string;
 		}
 
 		if (typeof term === 'string') {
-			if (args.length > 0) {
+			if (sanitizedArgs.length) {
 				// Replace placeholders of format "%index%" and "{index}" with provided values
 				term = term.replace(/(%(\d+)%|\{(\d+)\})/g, (match, _p1, p2, p3): string => {
 					const index = p2 || p3;
-					return String(args[index] || match);
+					return typeof sanitizedArgs[index] !== 'undefined' ? String(sanitizedArgs[index]) : match;
 				});
 			}
 		}
@@ -178,7 +186,18 @@ export class UmbLocalizationController<LocalizationSetType extends UmbLocalizati
 		return new Intl.RelativeTimeFormat(this.lang(), options).format(value, unit);
 	}
 
-	string(text: string): string {
+	/**
+	 * Translates a string containing one or more terms. The terms should be prefixed with a `#` character.
+	 * If the term is found in the localization set, it will be replaced with the localized term.
+	 * If the term is not found, the original term will be returned.
+	 * @param {string} text The text to translate.
+	 * @returns {string} The translated text.
+	 */
+	string(text: unknown): string {
+		if (typeof text !== 'string') {
+			return '';
+		}
+
 		// find all words starting with #
 		const regex = /#\w+/g;
 

src/packages/core/auth/auth-flow.ts

@@ -13,7 +13,7 @@
  * License for the specific language governing permissions and limitations under
  * the License.
  */
-import { UMB_STORAGE_TOKEN_RESPONSE_NAME } from './auth.context.token.js';
+import { UMB_STORAGE_TOKEN_RESPONSE_NAME } from './constants.js';
 import type { LocationLike, StringMap } from '@umbraco-cms/backoffice/external/openid';
 import {
 	BaseTokenRequestHandler,

src/packages/core/auth/auth.context.token.ts

@@ -2,5 +2,3 @@ import type { UmbAuthContext } from './auth.context.js';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 
 export const UMB_AUTH_CONTEXT = new UmbContextToken<UmbAuthContext>('UmbAuthContext');
-export const UMB_STORAGE_TOKEN_RESPONSE_NAME = 'umb:userAuthTokenResponse';
-export const UMB_STORAGE_REDIRECT_URL = 'umb:auth:redirect';

src/packages/core/auth/auth.context.ts

@@ -1,6 +1,7 @@
 import type { UmbBackofficeExtensionRegistry, ManifestAuthProvider } from '../extension-registry/index.js';
 import { UmbAuthFlow } from './auth-flow.js';
-import { UMB_AUTH_CONTEXT, UMB_STORAGE_TOKEN_RESPONSE_NAME } from './auth.context.token.js';
+import { UMB_AUTH_CONTEXT } from './auth.context.token.js';
+import { UMB_STORAGE_TOKEN_RESPONSE_NAME } from './constants.js';
 import type { UmbOpenApiConfiguration } from './models/openApiConfiguration.js';
 import { OpenAPI } from '@umbraco-cms/backoffice/external/backend-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';

src/packages/core/auth/constants.ts

@@ -0,0 +1 @@
+export const UMB_STORAGE_TOKEN_RESPONSE_NAME = 'umb:userAuthTokenResponse';

src/packages/core/auth/index.ts

@@ -2,6 +2,7 @@ import './components/index.js';
 
 export * from './auth.context.js';
 export * from './auth.context.token.js';
+export * from './constants.js';
 export * from './modals/index.js';
 export * from './models/openApiConfiguration.js';
 export * from './components/index.js';

src/packages/core/utils/index.ts

@@ -17,6 +17,7 @@ export * from './path/stored-path.function.js';
 export * from './path/transform-server-path-to-client-path.function.js';
 export * from './path/umbraco-path.function.js';
 export * from './path/url-pattern-to-string.function.js';
+export * from './sanitize/escape-html.function.js';
 export * from './sanitize/sanitize-html.function.js';
 export * from './selection-manager/selection.manager.js';
 export * from './state-manager/index.js';

src/packages/core/utils/path/stored-path.function.test.ts

@@ -1,6 +1,5 @@
-import { retrieveStoredPath, setStoredPath } from './stored-path.function.js';
+import { retrieveStoredPath, setStoredPath, UMB_STORAGE_REDIRECT_URL } from './stored-path.function.js';
 import { expect } from '@open-wc/testing';
-import { UMB_STORAGE_REDIRECT_URL } from '@umbraco-cms/backoffice/auth';
 
 describe('retrieveStoredPath', () => {
 	beforeEach(() => {

src/packages/core/utils/path/stored-path.function.ts

@@ -1,5 +1,6 @@
 import { ensureLocalPath } from './ensure-local-path.function.js';
-import { UMB_STORAGE_REDIRECT_URL } from '@umbraco-cms/backoffice/auth';
+
+export const UMB_STORAGE_REDIRECT_URL = 'umb:auth:redirect';
 
 /**
  * Retrieve the stored path from the session storage.