fix: escape HTML entities in localization arguments

cherry-picked from V15

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.

src/packages/core/utils/sanitize/escape-html.function.test.ts

@@ -0,0 +1,16 @@
+import { expect } from '@open-wc/testing';
+import { escapeHTML } from './escape-html.function.js';
+
+describe('escapeHtml', () => {
+	it('should escape html', () => {
+		expect(escapeHTML('<script>alert("XSS")</script>')).to.equal('&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;');
+	});
+
+	it('should escape html with single quotes', () => {
+		expect(escapeHTML("<script>alert('XSS')</script>")).to.equal('&lt;script&gt;alert(&#39;XSS&#39;)&lt;/script&gt;');
+	});
+
+	it('should escape html with mixed quotes', () => {
+		expect(escapeHTML("<script>alert('XSS')</script>")).to.equal('&lt;script&gt;alert(&#39;XSS&#39;)&lt;/script&gt;');
+	});
+});

src/packages/core/utils/sanitize/escape-html.function.ts

@@ -0,0 +1,19 @@
+/**
+ * Escapes HTML entities in a string.
+ * @example escapeHTML('<script>alert("XSS")</script>'), // "&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;"
+ * @param html The HTML string to escape.
+ * @returns The sanitized HTML string.
+ */
+export function escapeHTML(html: unknown): string {
+	if (typeof html !== 'string' && html instanceof String === false) {
+		return html as string;
+	}
+
+	return html
+		.toString()
+		.replace(/&/g, '&amp;')
+		.replace(/"/g, '&quot;')
+		.replace(/'/g, '&#39;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;');
+}

src/packages/core/utils/sanitize/sanitize-html.function.test.ts

@@ -0,0 +1,24 @@
+import { expect } from '@open-wc/testing';
+import { sanitizeHTML } from './sanitize-html.function.js';
+
+describe('sanitizeHTML', () => {
+	it('should allow benign HTML', () => {
+		expect(sanitizeHTML('<strong>Test</strong>')).to.equal('<strong>Test</strong>');
+	});
+
+	it('should remove potentially harmful content', () => {
+		expect(sanitizeHTML('<script>alert("XSS")</script>')).to.equal('');
+	});
+
+	it('should remove potentially harmful attributes', () => {
+		expect(sanitizeHTML('<a href="javascript:alert(\'XSS\')">Test</a>')).to.equal('<a>Test</a>');
+	});
+
+	it('should remove potentially harmful content and attributes', () => {
+		expect(sanitizeHTML('<a href="javascript:alert(\'XSS\')"><script>alert("XSS")</script></a>')).to.equal('<a></a>');
+	});
+
+	it('should allow benign attributes', () => {
+		expect(sanitizeHTML('<a href="/test">Test</a>')).to.equal('<a href="/test">Test</a>');
+	});
+});

src/packages/dictionary/workspace/views/workspace-view-dictionary-editor.element.ts

@@ -6,7 +6,6 @@ import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbLanguageCollectionRepository, type UmbLanguageDetailModel } from '@umbraco-cms/backoffice/language';
 import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user';
-import { sanitizeHTML } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-workspace-view-dictionary-editor')
 export class UmbWorkspaceViewDictionaryEditorElement extends UmbLitElement {
@@ -22,10 +21,6 @@ export class UmbWorkspaceViewDictionaryEditorElement extends UmbLitElement {
 	@state()
 	private _currentUserHasAccessToAllLanguages?: boolean = false;
 
-	get #dictionaryName() {
-		return typeof this._dictionary?.name !== 'undefined' ? sanitizeHTML(this._dictionary.name) : '...';
-	}
-
 	readonly #languageCollectionRepository = new UmbLanguageCollectionRepository(this);
 	#workspaceContext?: typeof UMB_DICTIONARY_WORKSPACE_CONTEXT.TYPE;
 	#currentUserContext?: typeof UMB_CURRENT_USER_CONTEXT.TYPE;
@@ -89,7 +84,7 @@ export class UmbWorkspaceViewDictionaryEditorElement extends UmbLitElement {
 	override render() {
 		return html`
 			<uui-box>
-				${this.localize.term('dictionaryItem_description', this.#dictionaryName)}
+				<umb-localize key="dictionaryItem_description" .args=${[this._dictionary?.name ?? '...']}></umb-localize>
 				${repeat(
 					this._languages,
 					(item) => item.unique,