feat(config): add option to disable custom html functionality (#26956)

core/src/components/alert/alert.tsx

@@ -1,6 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Method, Prop, Watch, forceUpdate, h } from '@stencil/core';
 
+import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type {
   AlertButton,
@@ -12,6 +13,7 @@ import type {
   OverlayEventDetail,
   OverlayInterface,
 } from '../../interface';
+import { ENABLE_HTML_CONTENT_DEFAULT } from '../../utils/config';
 import type { Gesture } from '../../utils/gesture';
 import { createButtonActiveGesture } from '../../utils/gesture/button-active';
 import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
@@ -39,6 +41,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
   scoped: true,
 })
 export class Alert implements ComponentInterface, OverlayInterface {
+  private customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
   private activeId?: string;
   private inputType?: string;
   private processedInputs: AlertInput[] = [];
@@ -93,6 +96,11 @@ export class Alert implements ComponentInterface, OverlayInterface {
    * `<Ionic>`
    *
    * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+   *
+   * This property accepts custom HTML as a string.
+   * Developers who only want to pass plain text
+   * can disable the custom HTML functionality
+   * by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
    */
   @Prop() message?: string | IonicSafeString;
 
@@ -579,6 +587,19 @@ export class Alert implements ComponentInterface, OverlayInterface {
     );
   }
 
+  private renderAlertMessage(msgId: string) {
+    const { customHTMLEnabled, message } = this;
+    if (customHTMLEnabled) {
+      return <div id={msgId} class="alert-message" innerHTML={sanitizeDOMString(message)}></div>;
+    }
+
+    return (
+      <div id={msgId} class="alert-message">
+        {message}
+      </div>
+    );
+  }
+
   render() {
     const { overlayIndex, header, subHeader, message, htmlAttributes } = this;
     const mode = getIonMode(this);
@@ -631,7 +652,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
             )}
           </div>
 
-          <div id={msgId} class="alert-message" innerHTML={sanitizeDOMString(message)}></div>
+          {this.renderAlertMessage(msgId)}
 
           {this.renderAlertInputs()}
           {this.renderAlertButtons()}

core/src/components/alert/test/alert.spec.ts

@@ -0,0 +1,40 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { Alert } from '../alert';
+import { config } from '../../../global/config';
+
+describe('alert: custom html', () => {
+  it('should allow for custom html by default', async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
+    });
+
+    const content = page.body.querySelector('.alert-message');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).not.toBe(null);
+  });
+
+  it('should allow for custom html', async () => {
+    config.reset({ innerHTMLTemplatesEnabled: true });
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
+    });
+
+    const content = page.body.querySelector('.alert-message');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).not.toBe(null);
+  });
+
+  it('should not allow for custom html', async () => {
+    config.reset({ innerHTMLTemplatesEnabled: false });
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
+    });
+
+    const content = page.body.querySelector('.alert-message');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).toBe(null);
+  });
+});