feat: notifications are displayed using iframe

usebruno · Feb 13, 2025 · 528f822 · 528f822
1 parent 31c1183
commit 528f822
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/bruno-app/package.json b/packages/bruno-app/package.json
@@ -24,6 +24,7 @@
     "codemirror": "5.65.2",
     "codemirror-graphql": "2.1.1",
     "cookie": "0.7.1",
+    "dompurify": "^3.2.4",
     "escape-html": "^1.0.3",
     "file": "^0.2.2",
     "file-dialog": "^0.0.8",

diff --git a/packages/bruno-app/src/components/Notifications/index.js b/packages/bruno-app/src/components/Notifications/index.js
@@ -11,7 +11,7 @@ import {
 import { useDispatch, useSelector } from 'react-redux';
 import { humanizeDate, relativeDate } from 'utils/common';
 import ToolHint from 'components/ToolHint';
-import { useTheme } from 'providers/Theme';
+import DOMPurify from 'dompurify';
 
 const PAGE_SIZE = 5;
 
@@ -22,7 +22,6 @@ const Notifications = () => {
   const [showNotificationsModal, setShowNotificationsModal] = useState(false);
   const [selectedNotification, setSelectedNotification] = useState(null);
   const [pageNumber, setPageNumber] = useState(1);
-  const { storedTheme } = useTheme();
 
   const notificationsStartIndex = (pageNumber - 1) * PAGE_SIZE;
   const notificationsEndIndex = pageNumber * PAGE_SIZE;
@@ -66,6 +65,13 @@ const Notifications = () => {
     dispatch(markNotificationAsRead({ notificationId: notification?.id }));
   };
 
+  const getSanitizedDescription = (description) => {
+    return DOMPurify.sanitize(encodeURIComponent(description), {
+      ALLOWED_TAGS: ['a', 'ul', 'img', 'li', 'div', 'span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      ALLOWED_ATTR: ['href', 'style', 'target', 'src', 'alt']
+    });
+  };
+
   const modalCustomHeader = (
     <div className="flex flex-row gap-8">
       <div>NOTIFICATIONS</div>
@@ -179,10 +185,11 @@ const Notifications = () => {
                   <div className="w-full notification-date text-xs mb-4">
                     {humanizeDate(selectedNotification?.date)}
                   </div>
-                  <div
-                    className="flex w-full flex-col flex-wrap h-fit"
-                    dangerouslySetInnerHTML={{ __html: selectedNotification?.description }}
-                  ></div>
+                  <iframe
+                    src={`data:text/html,${getSanitizedDescription(selectedNotification?.description)}`}
+                    sandbox=""
+                    style={{ width: '100%', height: '100%' }}
+                  ></iframe>
                 </div>
               </div>
             ) : (

diff --git a/packages/bruno-electron/src/index.js b/packages/bruno-electron/src/index.js
@@ -33,6 +33,7 @@ const contentSecurityPolicy = [
   "script-src * 'unsafe-inline' 'unsafe-eval'",
   "connect-src * 'unsafe-inline'",
   "font-src 'self' https:",
+  "frame-src data:",
   // this has been commented out to make oauth2 work
   // "form-action 'none'",
   // we make an exception and allow http for images so that