From f0689f06c6110a04b47e2e3aae02d0990ab731f4 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 27 Mar 2023 13:15:02 +0000
Subject: [PATCH 1/2] fix(many): innerHTML is disabled by default

---
 BREAKING.md                                       | 5 +++++
 core/src/components/alert/test/basic/index.html   | 6 ++++++
 core/src/components/loading/test/basic/index.html | 6 ++++++
 core/src/components/toast/test/basic/index.html   | 6 ++++++
 core/src/utils/config.ts                          | 2 +-
 5 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/BREAKING.md b/BREAKING.md
index 9726b59b11d..01b7efca6ab 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/basic/index.html b/core/src/components/alert/test/basic/index.html
index 7ae66082d9e..429223fa36f 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/loading/test/basic/index.html b/core/src/components/loading/test/basic/index.html
index 40ffdefe41e..4ff53fdac98 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/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html
index 7bff4bdb735..866f2c38a97 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/utils/config.ts b/core/src/utils/config.ts
index 09572467e10..a4de594271f 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;

From c2c2b699c0fe3dac2595b6003a06f92fc589d673 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 27 Mar 2023 13:45:52 +0000
Subject: [PATCH 2/2] update default case tests

---
 core/src/components/alert/test/alert.spec.ts                | 4 ++--
 .../test/infinite-scroll-content.spec.ts                    | 4 ++--
 core/src/components/loading/test/loading.spec.ts            | 4 ++--
 .../refresher-content/test/refresher-content.spec.ts        | 6 +++---
 core/src/components/toast/test/toast.spec.ts                | 4 ++--
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/core/src/components/alert/test/alert.spec.ts b/core/src/components/alert/test/alert.spec.ts
index af4e6543f18..e5b2960849e 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/infinite-scroll-content/test/infinite-scroll-content.spec.ts b/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts
index af66a7694f0..251ef264928 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/loading.spec.ts b/core/src/components/loading/test/loading.spec.ts
index af9b15ac0db..152ed87b09c 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 bdf6832e94d..8153fabb095 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/toast.spec.ts b/core/src/components/toast/test/toast.spec.ts
index 44ef078dfc1..1f25432e547 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 () => {