From 05f53ccfcebb4d98ac7bfc43bff5064d6892aa7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= <mrsebastienleblanc@icloud.com>
Date: Fri, 5 Nov 2021 18:51:40 -0400
Subject: [PATCH 1/6] [FIX] Allow HTML in Toast content

---
 src/components/VtToast.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/VtToast.vue b/src/components/VtToast.vue
index b69985e..d0820b7 100644
--- a/src/components/VtToast.vue
+++ b/src/components/VtToast.vue
@@ -7,11 +7,10 @@
     @mouseleave="hoverPlay"
   >
     <Icon v-if="icon" :custom-icon="icon" :type="type" />
-    <div :role="accessibility.toastRole || 'alert'" :class="bodyClasses">
-      <template v-if="typeof content === 'string'">{{ content }}</template>
+    <div v-if="typeof content === 'string'" v-html="content" :role="accessibility.toastRole || 'alert'" :class="bodyClasses"></div>
+    <div v-else :role="accessibility.toastRole || 'alert'" :class="bodyClasses">
       <component
         :is="getVueComponentFromObj(content)"
-        v-else
         :toast-id="id"
         v-bind="hasProp(content, 'props') ? content.props : {}"
         v-on="hasProp(content, 'listeners') ? content.listeners : {}"

From de5bcb28f0120bf3f2e66083190a3e40896a5d5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= <sebastien.leblanc@libeo.com>
Date: Fri, 6 May 2022 13:44:35 -0400
Subject: [PATCH 2/6] [FEATURE] allowUnsafeHtml props

---
 src/components/VtToast.vue | 3 ++-
 src/ts/propValidators.ts   | 4 ++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/VtToast.vue b/src/components/VtToast.vue
index d0820b7..2e66805 100644
--- a/src/components/VtToast.vue
+++ b/src/components/VtToast.vue
@@ -7,7 +7,8 @@
     @mouseleave="hoverPlay"
   >
     <Icon v-if="icon" :custom-icon="icon" :type="type" />
-    <div v-if="typeof content === 'string'" v-html="content" :role="accessibility.toastRole || 'alert'" :class="bodyClasses"></div>
+    <div v-if="typeof content === 'string' && !allowUnsafeHtml" :role="accessibility.toastRole || 'alert'" :class="bodyClasses" v-text="content"></div>
+    <div v-else-if="typeof content === 'string' && allowUnsafeHtml" :role="accessibility.toastRole || 'alert'" :class="bodyClasses" v-html="content"></div>
     <div v-else :role="accessibility.toastRole || 'alert'" :class="bodyClasses">
       <component
         :is="getVueComponentFromObj(content)"
diff --git a/src/ts/propValidators.ts b/src/ts/propValidators.ts
index e8ee71e..56cca82 100644
--- a/src/ts/propValidators.ts
+++ b/src/ts/propValidators.ts
@@ -100,6 +100,10 @@ const CORE_TOAST = {
   closeButton: CLOSE_BUTTON.component,
   closeButtonClassName: CLOSE_BUTTON.classNames,
   showCloseButtonOnHover: CLOSE_BUTTON.showOnHover,
+  allowUnsafeHtml: {
+      type: Boolean,
+      default: false,
+  },
   accessibility: {
     type: Object as PropType<NonNullable<PluginOptions["accessibility"]>>,
     default: () => ({

From be3151464bfccfcd15cca434b2fec168188bb212 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= <sebastien.leblanc@libeo.com>
Date: Fri, 6 May 2022 15:07:59 -0400
Subject: [PATCH 3/6] [FIX] Incorrect type for allowUnsafeHtml and make it
 facultative

---
 src/components/VtToast.vue | 2 +-
 src/types/toast.ts         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/VtToast.vue b/src/components/VtToast.vue
index 52d5a1f..a7645b0 100644
--- a/src/components/VtToast.vue
+++ b/src/components/VtToast.vue
@@ -58,7 +58,7 @@ import ProgressBar from "./VtProgressBar.vue"
 
 interface ToastProps {
   content: ToastOptionsAndContent["content"]
-  allowUnsafeHtml: ToastOptionsAndContent["allowUnsafeHtml"]
+  allowUnsafeHtml?: ToastOptionsAndContent["allowUnsafeHtml"]
   id?: ToastOptionsAndContent["id"]
   accessibility?: ToastOptionsAndContent["accessibility"]
   bodyClassName?: ToastOptionsAndContent["bodyClassName"]
diff --git a/src/types/toast.ts b/src/types/toast.ts
index 60e2cf5..499caac 100644
--- a/src/types/toast.ts
+++ b/src/types/toast.ts
@@ -97,7 +97,7 @@ export declare interface ToastOptions extends BaseToastOptions {
   /**
    *  If unsafe HTML is allowed as content.
    */
-  allowUnsafeHtml?: false
+  allowUnsafeHtml?: boolean
   /**
    *  Type of the toast.
    *

From 0978a4edcbfb8b9fe48bf83da14f7942d1f3fe41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= <sebastien.leblanc@libeo.com>
Date: Fri, 6 May 2022 15:11:30 -0400
Subject: [PATCH 4/6] [FIX] Update snapshots after using v-text instead
 interpolation

---
 .../__snapshots__/VtToast.spec.ts.snap         | 18 ------------------
 .../VtToastContainer.spec.ts.snap              |  6 ------
 2 files changed, 24 deletions(-)

diff --git a/tests/unit/components/__snapshots__/VtToast.spec.ts.snap b/tests/unit/components/__snapshots__/VtToast.spec.ts.snap
index c7e525a..10c3fe6 100644
--- a/tests/unit/components/__snapshots__/VtToast.spec.ts.snap
+++ b/tests/unit/components/__snapshots__/VtToast.spec.ts.snap
@@ -21,9 +21,7 @@ exports[`VtToast snapshots renders 1`] = `
     class="Vue-Toastification__toast-body"
     role="alert"
   >
-    
     content
-    
   </div>
   <button
     aria-label="close"
@@ -59,9 +57,7 @@ exports[`VtToast ui closeButton = false removes it 1`] = `
     class="Vue-Toastification__toast-body"
     role="alert"
   >
-    
     content
-    
   </div>
   <!--v-if-->
   <div
@@ -92,9 +88,7 @@ exports[`VtToast ui has all default sub components 1`] = `
     class="Vue-Toastification__toast-body"
     role="alert"
   >
-    
     content
-    
   </div>
   <button
     aria-label="close"
@@ -118,9 +112,7 @@ exports[`VtToast ui icon = false removes it 1`] = `
     class="Vue-Toastification__toast-body"
     role="alert"
   >
-    
     content
-    
   </div>
   <button
     aria-label="close"
@@ -156,9 +148,7 @@ exports[`VtToast ui renders custom aria role and button aria label 1`] = `
     class="Vue-Toastification__toast-body"
     role="status"
   >
-    
     content
-    
   </div>
   <button
     aria-label="text"
@@ -234,9 +224,7 @@ exports[`VtToast ui renders default aria role and button aria label 1`] = `
     class="Vue-Toastification__toast-body"
     role="alert"
   >
-    
     content
-    
   </div>
   <button
     aria-label="close"
@@ -272,9 +260,7 @@ exports[`VtToast ui renders ltr by default 1`] = `
     class="Vue-Toastification__toast-body"
     role="alert"
   >
-    
     content
-    
   </div>
   <button
     aria-label="close"
@@ -310,9 +296,7 @@ exports[`VtToast ui renders rtl if set 1`] = `
     class="Vue-Toastification__toast-body"
     role="alert"
   >
-    
     content
-    
   </div>
   <button
     aria-label="close"
@@ -348,9 +332,7 @@ exports[`VtToast ui timeout = false removes progress bar 1`] = `
     class="Vue-Toastification__toast-body"
     role="alert"
   >
-    
     content
-    
   </div>
   <button
     aria-label="close"
diff --git a/tests/unit/components/__snapshots__/VtToastContainer.spec.ts.snap b/tests/unit/components/__snapshots__/VtToastContainer.spec.ts.snap
index 386d1ce..e77608e 100644
--- a/tests/unit/components/__snapshots__/VtToastContainer.spec.ts.snap
+++ b/tests/unit/components/__snapshots__/VtToastContainer.spec.ts.snap
@@ -156,9 +156,7 @@ exports[`VtToastContainer snapshots with toasts 1`] = `
           class="Vue-Toastification__toast-body"
           role="alert"
         >
-          
           info
-          
         </div>
         <button
           aria-label="close"
@@ -192,9 +190,7 @@ exports[`VtToastContainer snapshots with toasts 1`] = `
           class="Vue-Toastification__toast-body"
           role="alert"
         >
-          
           default
-          
         </div>
         <button
           aria-label="close"
@@ -254,9 +250,7 @@ exports[`VtToastContainer snapshots with toasts 1`] = `
           class="Vue-Toastification__toast-body"
           role="alert"
         >
-          
           error
-          
         </div>
         <button
           aria-label="close"

From b81f6ff7beee58914ee655edeb93d39bde9f7c70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= <sebastien.leblanc@libeo.com>
Date: Fri, 6 May 2022 16:31:10 -0400
Subject: [PATCH 5/6] [FEATURE] Add test

---
 tests/unit/components/VtToastContainer.spec.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/tests/unit/components/VtToastContainer.spec.ts b/tests/unit/components/VtToastContainer.spec.ts
index 0739e44..a1801bf 100644
--- a/tests/unit/components/VtToastContainer.spec.ts
+++ b/tests/unit/components/VtToastContainer.spec.ts
@@ -147,6 +147,19 @@ describe("VtToastContainer", () => {
       expect(wrapper.findComponent(VtToast).text()).toEqual(`${message} close`)
     })
 
+    it("creates html toast", async () => {
+      const { wrapper, toast } = await mountToastContainer()
+      expect(wrapper.findAllComponents(VtToast).length).toBe(0)
+
+      const message = "I'm a <b>toast</b>"
+      toast.info(message, { allowUnsafeHtml: true })
+      await nextTick()
+
+      expect(
+        wrapper.find(".Vue-Toastification__toast-body").element.innerHTML
+      ).toEqual(message)
+    })
+
     it("creates toast in a different position", async () => {
       const { wrapper, toast } = await mountToastContainer()
 

From 284a813ea57eb9af2aea8d7e4dc8094742de5275 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= <sebastien.leblanc@libeo.com>
Date: Fri, 6 May 2022 16:39:18 -0400
Subject: [PATCH 6/6] [FEATURE] Update docs

---
 README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/README.md b/README.md
index 214989f..de525e3 100644
--- a/README.md
+++ b/README.md
@@ -275,6 +275,12 @@ toast("Persistent toast", { timeout: false })
 app.use(Toast, { timeout: 2000 });
 ```
 
+### Using unsafe HTML
+```js
+toast("I am <b>Toast</b>", { allowUnsafeHtml: true });
+```
+> Note: This can lead to Cross-Site Scripting (XSS) attacks. If you are certain the content passed to `v-html` is sanitized HTML you can use `allowUnsafeHtml`.
+
 ### Using a custom component
 Passing strings as the toast content is not enough? You can render anything inside the toast using custom components! Vue Toastification accepts both Vue Components and JSX templates as parameters.