fix(ui5-cb/mcb-item): handle setting malicious text (#10382)

packages/main/cypress/specs/ComboBox.cy.ts

@@ -0,0 +1,22 @@
+import { html } from "lit";
+import "../../src/ComboBox.js";
+import "../../src/ComboBoxItem.js";
+
+describe("Security", () => {
+	it("tests setting malicious text to items", () => {
+		cy.mount(html`
+			<ui5-combobox>
+				<ui5-cb-item text="<script>alert('XSS')</script>"></ui5-cb-item>
+				<ui5-cb-item text="<b onmouseover=alert('XSS')></b>"></ui5-cb-item>
+				<ui5-cb-item text="Albania<button onClick='alert(1)'>alert</button>"></ui5-cb-item>
+			</ui5-combobox>
+		`);
+
+		cy.get("ui5-cb-item").eq(0).shadow().find(".ui5-li-title")
+			.should("have.text", "<script>alert('XSS')</script>");
+		cy.get("ui5-cb-item").eq(1).shadow().find(".ui5-li-title")
+			.should("have.text", "<b onmouseover=alert('XSS')></b>");
+		cy.get("ui5-cb-item").eq(2).shadow().find(".ui5-li-title")
+			.should("have.text", "Albania<button onClick='alert(1)'>alert</button>");
+	});
+});

packages/main/cypress/specs/MultiComboBox.cy.ts

@@ -0,0 +1,22 @@
+import { html } from "lit";
+import "../../src/MultiComboBox.js";
+import "../../src/MultiComboBoxItem.js";
+
+describe("Security", () => {
+	it("tests setting malicious text to items", () => {
+		cy.mount(html`
+			<ui5-multi-combobox>
+				<ui5-mcb-item text="<script>alert('XSS')</script>"></ui5-mcb-item>
+				<ui5-mcb-item text="<b onmouseover=alert('XSS')></b>"></ui5-mcb-item>
+				<ui5-mcb-item text="Albania<button onClick='alert(1)'>alert</button>"></ui5-mcb-item>
+			</ui5-multi-combobox>
+		`);
+
+		cy.get("ui5-mcb-item").eq(0).shadow().find(".ui5-li-title")
+			.should("have.text", "<script>alert('XSS')</script>");
+		cy.get("ui5-mcb-item").eq(1).shadow().find(".ui5-li-title")
+			.should("have.text", "<b onmouseover=alert('XSS')></b>");
+		cy.get("ui5-mcb-item").eq(2).shadow().find(".ui5-li-title")
+			.should("have.text", "Albania<button onClick='alert(1)'>alert</button>");
+	});
+});

packages/main/src/ComboBoxItemTemplate.tsx

@@ -9,7 +9,7 @@ function listItemContent(this: ComboBoxItem) {
 	return (
 		<div part="content" id="content" class="ui5-li-content">
 			<div class="ui5-li-text-wrapper">
-				{ this.text && <span part="title" className="ui5-li-title" dangerouslySetInnerHTML={{ __html: this.text }}></span> }
+				{ this.text && <span part="title" className="ui5-li-title">{this.text}</span> }
 				{ this.additionalText && <span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span> }
 			</div>
 		</div>

packages/main/src/MultiComboBoxItemTemplate.tsx

@@ -17,7 +17,7 @@ function listItemContent(this: MultiComboBoxItem) {
 			/>
 			<div part="content" id="content" class="ui5-li-content">
 				<div class="ui5-li-text-wrapper">
-					{ this.text && <span part="title" className="ui5-li-title" dangerouslySetInnerHTML={{ __html: this.text }}></span> }
+					{ this.text && <span part="title" className="ui5-li-title">{this.text}</span> }
 					{ this.additionalText && <span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span> }
 				</div>
 			</div>