Merge pull request #2377 from omnivore-app/fix/recent-emails-frame

Put recent emails in an iframe

packages/web/next.config.js

@@ -6,7 +6,7 @@ const ContentSecurityPolicy = `
   font-src 'self' data: cdn.jsdelivr.net;
   form-action 'self' ${process.env.NEXT_PUBLIC_SERVER_BASE_URL};
   frame-ancestors 'none';
-  frame-src accounts.google.com platform.twitter.com www.youtube-nocookie.com;
+  frame-src self accounts.google.com platform.twitter.com www.youtube.com www.youtube-nocookie.com;
   manifest-src 'self';
   script-src 'self' 'unsafe-inline' 'unsafe-eval' accounts.google.com widget.intercom.io js.intercomcdn.com platform.twitter.com cdnjs.cloudflare.com cdn.jsdelivr.net cdn.segment.com;
   style-src 'self' 'unsafe-inline' accounts.google.com cdnjs.cloudflare.com;

packages/web/pages/settings/emails/recent.tsx

@@ -113,7 +113,7 @@ const ViewRecentEmailModal = (
           ;(document.activeElement as HTMLElement).blur()
         }}
       >
-        <VStack distribution="start">
+        <VStack distribution="start" css={{ height: '100%' }}>
           <ModalTitleBar title="View Email" onOpenChange={props.onOpenChange} />
           {props.display == 'text' ? (
             <Box
@@ -133,9 +133,16 @@ const ViewRecentEmailModal = (
                 height: '100%',
                 fontSize: '12px',
                 overflowY: 'scroll',
+                iframe: {
+                  width: '100%',
+                  height: '100%',
+                  display: 'block',
+                  border: 'none',
+                },
               }}
-              dangerouslySetInnerHTML={{ __html: props.recentEmail.html }}
-            ></Box>
+            >
+              <iframe srcDoc={props.recentEmail.html}></iframe>
+            </Box>
           )}
         </VStack>
       </ModalContent>