WP-193: DOM based XSS in web component

src/form/tp-form-field.ts

@@ -250,12 +250,12 @@ export class TPFormFieldElement extends HTMLElement {
 		// Look for an existing tp-form-error element.
 		const error: TPFormErrorElement | null = this.querySelector( 'tp-form-error' );
 
-		// If found, update its innerHTML with the error message. Otherwise, create a new tp-form-error element and append it to the component.
+		// If found, update its textContent with the error message. Otherwise, create a new tp-form-error element and append it to the component.
 		if ( error ) {
-			error.innerHTML = message;
+			error.textContent = message;
 		} else {
 			const errorElement: TPFormErrorElement = document.createElement( 'tp-form-error' );
-			errorElement.innerHTML = message;
+			errorElement.textContent = message;
 			this.appendChild( errorElement );
 		}
 
@@ -283,12 +283,12 @@ export class TPFormFieldElement extends HTMLElement {
 		// Look for an existing tp-form-error element.
 		const suspense: TPFormSuspenseElement | null = this.querySelector( 'tp-form-suspense' );
 
-		// If found, update its innerHTML with the suspense message. Otherwise, create a new tp-form-suspense element and append it to the component.
+		// If found, update its textContent with the suspense message. Otherwise, create a new tp-form-suspense element and append it to the component.
 		if ( suspense ) {
-			suspense.innerHTML = message;
+			suspense.textContent = message;
 		} else {
 			const suspenseElement: TPFormSuspenseElement = document.createElement( 'tp-form-suspense' );
-			suspenseElement.innerHTML = message;
+			suspenseElement.textContent = message;
 			this.appendChild( suspenseElement );
 		}
 	}

src/form/tp-form-submit.ts

@@ -41,18 +41,18 @@ export class TPFormSubmitElement extends HTMLElement {
 
 		// Prepare submit button text.
 		const submittingText: string = this.getAttribute( 'submitting-text' ) ?? '';
-		const originalText: string = this.getAttribute( 'original-text' ) ?? submitButton.innerHTML;
+		const originalText: string = this.getAttribute( 'original-text' ) ?? submitButton.textContent ?? '';
 
 		// Check if we are submitting.
 		if ( 'yes' === this.getAttribute( 'submitting' ) ) {
 			submitButton.setAttribute( 'disabled', 'disabled' );
 			this.setAttribute( 'original-text', originalText );
-			submitButton.innerHTML = submittingText;
+			submitButton.textContent = submittingText;
 		} else {
 			submitButton.removeAttribute( 'disabled' );
 			this.removeAttribute( 'submitting' );
 			this.removeAttribute( 'original-text' );
-			submitButton.innerHTML = originalText;
+			submitButton.textContent = originalText;
 		}
 	}
 }

src/lightbox/tp-lightbox-count.ts

@@ -63,7 +63,7 @@ export class TPLightboxCountElement extends HTMLElement {
 		const total: string = lightbox.getAttribute( 'total' ) ?? '';
 
 		// Update variables in format attribute.
-		this.innerHTML =
+		this.textContent =
 			this.format
 				.replace( '$current', current )
 				.replace( '$total', total );

src/multi-select/tp-multi-select-select-all.ts

@@ -37,10 +37,10 @@ export class TPMultiSelectSelectAllElement extends HTMLElement {
 		// Check if all options are selected.
 		if ( Array.from( options ).filter( ( optionNode ) => optionNode.getAttribute( 'disabled' ) !== 'yes' ).length === multiSelect.value.length ) {
 			this.setAttribute( 'selected', 'yes' );
-			this.innerHTML = this.getAttribute( 'unselect-text' ) ?? '';
+			this.textContent = this.getAttribute( 'unselect-text' ) ?? '';
 		} else {
 			this.removeAttribute( 'selected' );
-			this.innerHTML = this.getAttribute( 'select-text' ) ?? '';
+			this.textContent = this.getAttribute( 'select-text' ) ?? '';
 		}
 	}
 

src/multi-select/tp-multi-select-status.ts

@@ -38,7 +38,7 @@ export class TPMultiSelectStatusElement extends HTMLElement {
 	update(): void {
 		// Get format attribute.
 		const format: string = this.getAttribute( 'format' ) ?? '$total Selected';
-		let html: string = format.replace( '$total', this.getAttribute( 'total' ) ?? '' );
+		let text: string = format.replace( '$total', this.getAttribute( 'total' ) ?? '' );
 
 		// Format string includes $value.
 		if ( format.includes( '$value' ) ) {
@@ -63,11 +63,11 @@ export class TPMultiSelectStatusElement extends HTMLElement {
 				}
 
 				// Replace $value.
-				html = html.replace( '$value', replace );
+				text = text.replace( '$value', replace );
 			}
 		}
 
-		// Set inner HTML.
-		this.innerHTML = html;
+		// Set text content.
+		this.textContent = text;
 	}
 }

src/slider/tp-slider-count.ts

@@ -63,7 +63,7 @@ export class TPSliderCountElement extends HTMLElement {
 		const total: string = slider.getAttribute( 'total' ) ?? '';
 
 		// Updating variables in format attribute.
-		this.innerHTML =
+		this.textContent =
 			this.format
 				.replace( '$current', current.toString() )
 				.replace( '$total', total || '' );