fix(many): innerHTML is disabled by default (#27029)

BREAKING CHANGE:

The `innerHTMLTemplatesEnabled` Ionic Config now defaults to `false`. Developers can set this option to `true` if they would like to continue to use custom HTML features in `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast`.

Author: liamdebeasi

BREAKING.md

@@ -35,6 +35,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Textarea](#version-7x-textarea)
   - [Toggle](#version-7x-toggle)
   - [Virtual Scroll](#version-7x-virtual-scroll)
+- [Config](#version-7x-config)
 - [Types](#version-7x-types)
   - [Overlay Attribute Interfaces](#version-7x-overlay-attribute-interfaces)
 - [JavaScript Frameworks](#version-7x-javascript-frameworks)
@@ -297,6 +298,10 @@ Developers using the component will need to migrate to a virtual scroll solution
 
 Any references to the virtual scroll types from `@ionic/core` have been removed. Please remove or replace these types: `Cell`, `VirtualNode`, `CellType`, `NodeChange`, `HeaderFn`, `ItemHeightFn`, `FooterHeightFn`, `ItemRenderFn` and `DomRenderFn`.
 
+<h2 id="version-7x-config">Config</h2>
+
+- `innerHTMLTemplatesEnabled` defaults to `false`. Developers who wish to use the `innerHTML` functionality inside of `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast` must set this config to `true` and properly sanitize their content.
+
 <h2 id="version-7x-types">Types</h2>
 
 <h4 id="version-7x-overlay-attribute-interfaces">Overlay Attribute Interfaces</h4>

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

@@ -3,15 +3,15 @@ import { Alert } from '../alert';
 import { config } from '../../../global/config';
 
 describe('alert: custom html', () => {
-  it('should allow for custom html by default', async () => {
+  it('should not 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);
+    expect(content.querySelector('button.custom-html')).toBe(null);
   });
 
   it('should allow for custom html', async () => {

core/src/components/alert/test/basic/index.html

@@ -58,6 +58,12 @@
     </ion-app>
 
     <script>
+      window.Ionic = {
+        config: {
+          innerHTMLTemplatesEnabled: true,
+        },
+      };
+
       async function openAlert(opts) {
         const alert = await alertController.create(opts);
         await alert.present();

core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts

@@ -3,15 +3,15 @@ import { InfiniteScrollContent } from '../infinite-scroll-content';
 import { config } from '../../../global/config';
 
 describe('infinite-scroll-content: custom html', () => {
-  it('should allow for custom html by default', async () => {
+  it('should not allow for custom html by default', async () => {
     const page = await newSpecPage({
       components: [InfiniteScrollContent],
       html: `<ion-infinite-scroll-content loading-text="<button class='custom-html'>Custom Text</button>"></ion-infinite-scroll-content>`,
     });
 
     const content = page.body.querySelector('.infinite-loading-text');
     expect(content.textContent).toContain('Custom Text');
-    expect(content.querySelector('button.custom-html')).not.toBe(null);
+    expect(content.querySelector('button.custom-html')).toBe(null);
   });
 
   it('should allow for custom html', async () => {

core/src/components/loading/test/basic/index.html

@@ -100,6 +100,12 @@
       </ion-content>
     </ion-app>
     <script>
+      window.Ionic = {
+        config: {
+          innerHTMLTemplatesEnabled: true,
+        },
+      };
+
       async function openLoading(opts) {
         const loading = await loadingController.create(opts);
         await loading.present();

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

@@ -3,15 +3,15 @@ import { Loading } from '../loading';
 import { config } from '../../../global/config';
 
 describe('alert: custom html', () => {
-  it('should allow for custom html by default', async () => {
+  it('should not allow for custom html by default', async () => {
     const page = await newSpecPage({
       components: [Loading],
       html: `<ion-loading message="<button class='custom-html'>Custom Text</button>"></ion-loading>`,
     });
 
     const content = page.body.querySelector('.loading-content');
     expect(content.textContent).toContain('Custom Text');
-    expect(content.querySelector('button.custom-html')).not.toBe(null);
+    expect(content.querySelector('button.custom-html')).toBe(null);
   });
 
   it('should allow for custom html', async () => {

core/src/components/refresher-content/test/refresher-content.spec.ts

@@ -3,19 +3,19 @@ import { RefresherContent } from '../refresher-content';
 import { config } from '../../../global/config';
 
 describe('refresher-content: custom html', () => {
-  it('should allow for custom html by default', async () => {
+  it('should not allow for custom html by default', async () => {
     const page = await newSpecPage({
       components: [RefresherContent],
       html: `<ion-refresher-content pulling-text="<button class='custom-pulling-html'>Custom Pulling Text</button>" refreshing-text="<button class='custom-refreshing-html'>Custom Refreshing Text</button>"></ion-refresher-content>`,
     });
 
     const pullingContent = page.body.querySelector('.refresher-pulling-text');
     expect(pullingContent.textContent).toContain('Custom Pulling Text');
-    expect(pullingContent.querySelector('button.custom-pulling-html')).not.toBe(null);
+    expect(pullingContent.querySelector('button.custom-pulling-html')).toBe(null);
 
     const refreshingContent = page.body.querySelector('.refresher-refreshing-text');
     expect(refreshingContent.textContent).toContain('Custom Refreshing Text');
-    expect(refreshingContent.querySelector('button.custom-refreshing-html')).not.toBe(null);
+    expect(refreshingContent.querySelector('button.custom-refreshing-html')).toBe(null);
   });
 
   it('should allow for custom html', async () => {

core/src/components/toast/test/basic/index.html

@@ -195,6 +195,12 @@
       </ion-content>
     </ion-app>
     <script>
+      window.Ionic = {
+        config: {
+          innerHTMLTemplatesEnabled: true,
+        },
+      };
+
       window.addEventListener('ionToastDidDismiss', function (e) {
         console.log('didDismiss', e);
       });

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

@@ -3,7 +3,7 @@ import { Toast } from '../toast';
 import { config } from '../../../global/config';
 
 describe('alert: custom html', () => {
-  it('should allow for custom html by default', async () => {
+  it('should not allow for custom html by default', async () => {
     const page = await newSpecPage({
       components: [Toast],
       html: `<ion-toast message="<button class='custom-html'>Custom Text</button>"></ion-toast>`,
@@ -12,7 +12,7 @@ describe('alert: custom html', () => {
     const toast = page.body.querySelector('ion-toast');
     const content = toast.shadowRoot.querySelector('.toast-message');
     expect(content.textContent).toContain('Custom Text');
-    expect(content.querySelector('button.custom-html')).not.toBe(null);
+    expect(content.querySelector('button.custom-html')).toBe(null);
   });
 
   it('should allow for custom html', async () => {

core/src/utils/config.ts

@@ -249,4 +249,4 @@ export const getMode = (): Mode => {
   return 'md';
 };
 
-export const ENABLE_HTML_CONTENT_DEFAULT = true;
+export const ENABLE_HTML_CONTENT_DEFAULT = false;