feat: preview content in an iframe (#22008)

* feat: preview content

* fix: pr suggestions

* fix: pr suggestions

* fix: iframe border

examples/getstarted/config/middlewares.js

@@ -5,7 +5,17 @@ const responseHandlers = require('./src/response-handlers');
 module.exports = [
   'strapi::logger',
   'strapi::errors',
-  'strapi::security',
+  {
+    name: 'strapi::security',
+    config: {
+      contentSecurityPolicy: {
+        useDefaults: true,
+        directives: {
+          'frame-src': ["'self'"], // URLs that will be loaded in an iframe (e.g. Content Preview)
+        },
+      },
+    },
+  },
   'strapi::cors',
   'strapi::poweredBy',
   'strapi::query',

packages/core/content-manager/admin/src/preview/components/PreviewContent.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import { Box } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+
+import { usePreviewContext } from '../pages/Preview';
+
+const PreviewContent = () => {
+  const previewUrl = usePreviewContext('PreviewContent', (state) => state.url);
+
+  const { formatMessage } = useIntl();
+
+  return (
+    <Box
+      src={previewUrl}
+      title={formatMessage({
+        id: 'content-manager.preview.panel.title',
+        defaultMessage: 'Preview',
+      })}
+      width="100%"
+      height="100%"
+      borderWidth={0}
+      tag="iframe"
+    />
+  );
+};
+
+export { PreviewContent };

packages/core/content-manager/admin/src/preview/pages/Preview.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Page, useQueryParams, useRBAC, createContext } from '@strapi/admin/strapi-admin';
-import { Box, FocusTrap, Portal } from '@strapi/design-system';
+import { Box, Flex, FocusTrap, Portal } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
@@ -11,6 +11,7 @@ import { DocumentRBAC } from '../../features/DocumentRBAC';
 import { type UseDocument, useDocument } from '../../hooks/useDocument';
 import { useDocumentLayout } from '../../hooks/useDocumentLayout';
 import { buildValidParams } from '../../utils/api';
+import { PreviewContent } from '../components/PreviewContent';
 import { PreviewHeader } from '../components/PreviewHeader';
 import { useGetPreviewUrlQuery } from '../services/preview';
 
@@ -127,7 +128,10 @@ const PreviewPage = () => {
         meta={documentResponse.meta}
         schema={documentResponse.schema}
       >
-        <PreviewHeader />
+        <Flex direction="column" height="100%" alignItems={'stretch'}>
+          <PreviewHeader />
+          <PreviewContent />
+        </Flex>
       </PreviewProvider>
     </>
   );