Allow HTML in Toast content with allowUnsafeHtml props

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.
 

src/components/VtToast.vue

@@ -1,11 +1,21 @@
 <template>
   <div ref="el" :class="classes" @click="clickHandler">
     <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' && !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)"
-        v-else
         :toast-id="id"
         v-bind="getProp(content, 'props', {})"
         v-on="getProp(content, 'listeners', {})"
@@ -48,6 +58,7 @@ import ProgressBar from "./VtProgressBar.vue"
 
 interface ToastProps {
   content: ToastOptionsAndContent["content"]
+  allowUnsafeHtml?: ToastOptionsAndContent["allowUnsafeHtml"]
   id?: ToastOptionsAndContent["id"]
   accessibility?: ToastOptionsAndContent["accessibility"]
   bodyClassName?: ToastOptionsAndContent["bodyClassName"]
@@ -75,6 +86,7 @@ interface ToastProps {
 
 const props = withDefaults(defineProps<ToastProps>(), {
   id: 0,
+  allowUnsafeHtml: TOAST_DEFAULTS.allowUnsafeHtml,
   accessibility: TOAST_DEFAULTS.accessibility,
   bodyClassName: TOAST_DEFAULTS.bodyClassName,
   closeButton: TOAST_DEFAULTS.closeButton,

src/ts/propValidators.ts

@@ -15,6 +15,7 @@ const asFactory = <T>(f: T) => (() => f) as unknown as T
 
 export const TOAST_DEFAULTS: Required<InferDefaults<Readonly<ToastOptions>>> = {
   id: 0,
+  allowUnsafeHtml: false,
   accessibility: () => ({
     toastRole: "alert",
     closeButtonLabel: "close",

src/types/toast.ts

@@ -94,6 +94,10 @@ export declare interface ToastOptions extends BaseToastOptions {
    *  ID of the toast.
    */
   id?: ToastID
+  /**
+   *  If unsafe HTML is allowed as content.
+   */
+  allowUnsafeHtml?: boolean
   /**
    *  Type of the toast.
    *

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()
 

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"

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"