From ef07b82dd4f54a67550d718192c93d062d2e4528 Mon Sep 17 00:00:00 2001 From: Ashish Rawat Date: Sun, 9 Nov 2025 20:48:08 +0530 Subject: [PATCH] WP-193: DOM based XSS in web component --- src/form/tp-form-field.ts | 12 ++++++------ src/form/tp-form-submit.ts | 6 +++--- src/lightbox/tp-lightbox-count.ts | 2 +- src/multi-select/tp-multi-select-select-all.ts | 4 ++-- src/multi-select/tp-multi-select-status.ts | 8 ++++---- src/slider/tp-slider-count.ts | 2 +- 6 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/form/tp-form-field.ts b/src/form/tp-form-field.ts index 8b8fd9c..9419d01 100644 --- a/src/form/tp-form-field.ts +++ b/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 ); } } diff --git a/src/form/tp-form-submit.ts b/src/form/tp-form-submit.ts index 1bd5f7d..e7023c7 100644 --- a/src/form/tp-form-submit.ts +++ b/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; } } } diff --git a/src/lightbox/tp-lightbox-count.ts b/src/lightbox/tp-lightbox-count.ts index 00d6b6d..0243ebe 100644 --- a/src/lightbox/tp-lightbox-count.ts +++ b/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 ); diff --git a/src/multi-select/tp-multi-select-select-all.ts b/src/multi-select/tp-multi-select-select-all.ts index 71fcfdb..9d9a02d 100644 --- a/src/multi-select/tp-multi-select-select-all.ts +++ b/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' ) ?? ''; } } diff --git a/src/multi-select/tp-multi-select-status.ts b/src/multi-select/tp-multi-select-status.ts index 2d42caf..e887cf9 100644 --- a/src/multi-select/tp-multi-select-status.ts +++ b/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; } } diff --git a/src/slider/tp-slider-count.ts b/src/slider/tp-slider-count.ts index 9c13b17..c15f8b7 100644 --- a/src/slider/tp-slider-count.ts +++ b/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 || '' );