Fix propTypes for EmbedFrame, add sandbox/allow to PreviewFrame

Author: catarak

client/modules/IDE/components/PreviewFrame.jsx

@@ -22,13 +22,20 @@ function PreviewFrame({ fullView }) {
   });
 
   const frameUrl = previewUrl;
-  const sandboxAttributes =
-    'allow-scripts allow-pointer-lock allow-popups allow-forms allow-modals allow-downloads allow-same-origin';
+  const sandboxAttributes = `allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups 
+    allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation`;
+  const allow =
+    'accelerometer; autoplay; camera; encrypted-media; geolocation; gyroscope; microphone; magnetometer; midi; vr;';
   return (
     <Frame
       title="sketch preview"
       src={frameUrl}
       sandbox={sandboxAttributes}
+      allow={allow}
+      scrolling="auto"
+      allowtransparency
+      allowpaymentrequest
+      allowFullScreen
       frameBorder="0"
       ref={iframe}
       fullView={fullView}

client/modules/Preview/EmbedFrame.jsx

@@ -256,25 +256,24 @@ function EmbedFrame({ files, isPlaying, basePath }) {
   }
 
   useEffect(renderSketch, [files, isPlaying]);
-  const sandboxAttributes =
-    'allow-scripts allow-pointer-lock allow-popups allow-forms allow-modals allow-downloads allow-same-origin';
   return (
     <Frame
       aria-label="Sketch Preview"
       role="main"
       frameBorder="0"
       ref={iframe}
-      sandbox={sandboxAttributes}
     />
   );
 }
 
 EmbedFrame.propTypes = {
-  files: PropTypes.arrayOf({
-    id: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-    content: PropTypes.string.isRequired
-  }).isRequired,
+  files: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      content: PropTypes.string.isRequired
+    })
+  ).isRequired,
   isPlaying: PropTypes.bool.isRequired,
   basePath: PropTypes.string.isRequired
 };