From b7e46038e0eee611bb9f5d83772804e83b19a63d Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 27 Mar 2023 12:07:00 -0400
Subject: [PATCH] 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`.
---
 BREAKING.md                                                 | 5 +++++
 core/src/components/alert/test/alert.spec.ts                | 4 ++--
 core/src/components/alert/test/basic/index.html             | 6 ++++++
 .../test/infinite-scroll-content.spec.ts                    | 4 ++--
 core/src/components/loading/test/basic/index.html           | 6 ++++++
 core/src/components/loading/test/loading.spec.ts            | 4 ++--
 .../refresher-content/test/refresher-content.spec.ts        | 6 +++---
 core/src/components/toast/test/basic/index.html             | 6 ++++++
 core/src/components/toast/test/toast.spec.ts                | 4 ++--
 core/src/utils/config.ts                                    | 2 +-
 10 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/BREAKING.md b/BREAKING.md
index 9726b59b11..01b7efca6a 100644
--- a/BREAKING.md
+++ b/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>
diff --git a/core/src/components/alert/test/alert.spec.ts b/core/src/components/alert/test/alert.spec.ts
index af4e6543f1..e5b2960849 100644
--- a/core/src/components/alert/test/alert.spec.ts
+++ b/core/src/components/alert/test/alert.spec.ts
@@ -3,7 +3,7 @@ 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>`,
@@ -11,7 +11,7 @@ describe('alert: custom html', () => {
 
     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 () => {
diff --git a/core/src/components/alert/test/basic/index.html b/core/src/components/alert/test/basic/index.html
index 7ae66082d9..429223fa36 100644
--- a/core/src/components/alert/test/basic/index.html
+++ b/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();
diff --git a/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts b/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts
index af66a7694f..251ef26492 100644
--- a/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts
+++ b/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts
@@ -3,7 +3,7 @@ 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>`,
@@ -11,7 +11,7 @@ describe('infinite-scroll-content: custom html', () => {
 
     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 () => {
diff --git a/core/src/components/loading/test/basic/index.html b/core/src/components/loading/test/basic/index.html
index 40ffdefe41..4ff53fdac9 100644
--- a/core/src/components/loading/test/basic/index.html
+++ b/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();
diff --git a/core/src/components/loading/test/loading.spec.ts b/core/src/components/loading/test/loading.spec.ts
index af9b15ac0d..152ed87b09 100644
--- a/core/src/components/loading/test/loading.spec.ts
+++ b/core/src/components/loading/test/loading.spec.ts
@@ -3,7 +3,7 @@ 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>`,
@@ -11,7 +11,7 @@ describe('alert: custom html', () => {
 
     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 () => {
diff --git a/core/src/components/refresher-content/test/refresher-content.spec.ts b/core/src/components/refresher-content/test/refresher-content.spec.ts
index bdf6832e94..8153fabb09 100644
--- a/core/src/components/refresher-content/test/refresher-content.spec.ts
+++ b/core/src/components/refresher-content/test/refresher-content.spec.ts
@@ -3,7 +3,7 @@ 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>`,
@@ -11,11 +11,11 @@ describe('refresher-content: custom html', () => {
 
     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 () => {
diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html
index 7bff4bdb73..866f2c38a9 100644
--- a/core/src/components/toast/test/basic/index.html
+++ b/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);
       });
diff --git a/core/src/components/toast/test/toast.spec.ts b/core/src/components/toast/test/toast.spec.ts
index 44ef078dfc..1f25432e54 100644
--- a/core/src/components/toast/test/toast.spec.ts
+++ b/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 () => {
diff --git a/core/src/utils/config.ts b/core/src/utils/config.ts
index 09572467e1..a4de594271 100644
--- a/core/src/utils/config.ts
+++ b/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;