feat(escape toast html content)

ithaka · Sep 24, 2024 · 120b7a4 · 120b7a4
1 parent 8c70f6b
commit 120b7a4
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/packages/pharos/src/components/toast/pharos-toast.wc.stories.jsx b/packages/pharos/src/components/toast/pharos-toast.wc.stories.jsx
@@ -29,7 +29,7 @@ export const Base = {
           const event = new CustomEvent('pharos-toast-open', {
             detail: {
               content:
-                'The item has moved to your <storybook-pharos-link href="#" is-on-background bold>Workspace</storybook-pharos-link>.',
+                'hehe <div> i am evil </div> ahahah.',
               returnElements: [document.querySelector('#success-toast-button')],
             },
           });

diff --git a/packages/pharos/src/components/toast/pharos-toaster.ts b/packages/pharos/src/components/toast/pharos-toaster.ts
@@ -174,7 +174,12 @@ export class PharosToaster extends ScopedRegistryMixin(PharosElement) {
     // unsafeHTML will render content in the scope of the current component,
     // so any components not explicitly registered in elementDefinitions above will not render.
     const toastContentElement = document.createElement('div');
-    toastContentElement.innerHTML = toast.content;
+    console.log("erm: ", toast.content);
+    console.log("what the sigma: ", encodeURIComponent(toast.content))
+
+
+
+    toastContentElement.innerHTML = this._escapeToastContent(toast.content);
 
     return html`<pharos-toast
       id="${toast.id}"
@@ -196,4 +201,27 @@ export class PharosToaster extends ScopedRegistryMixin(PharosElement) {
       </div>
     `;
   }
+
+  private _escapeToastContent(input: string): string {
+    // For XSS protection, we need to escape any HTML that is not wrapped in a "-pharos-" tag
+    const escapeChars = (str: string) => str.replace(/&/g, '&amp;')
+                                    .replace(/</g, '&lt;')
+                                    .replace(/>/g, '&gt;')
+                                    .replace(/"/g, '&quot;')
+                                    .replace(/'/g, '&#39;');
+
+    // Check if the input string contains any tag with "-pharos-"
+    const isWrappedWithPharosTag = (str: string) => {
+        const tagPattern = /<\/?[^<]*-pharos-[^<]*?>/;
+        return tagPattern.test(str);
+    };
+
+    // If the input contains a "-pharos-" tag, return it unchanged
+    if (isWrappedWithPharosTag(input.trim())) {
+        return input;
+    }
+
+    // Escape the input string if it does not contain a "-pharos-" tag
+    return escapeChars(input);
+  }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -22945,7 +22945,7 @@ __metadata:
     supports-preserve-symlinks-flag: "npm:^1.0.0"
   bin:
     resolve: bin/resolve
-  checksum: 10c0/0446f024439cd2e50c6c8fa8ba77eaa8370b4180f401a96abf3d1ebc770ac51c1955e12764cde449fde3fff480a61f84388e3505ecdbab778f4bef5f8212c729
+  checksum: 10c0/a5d4624e47af0b29f164b755b3d997a59e550891058c69ff6d460241a699e0e70bfcfa4ea5d8e61a5842f4dd8df7d1ce8024340d26ac26c4d4e9fa75636abbcb
   languageName: node
   linkType: hard