✨ Add more iFrame attributes (#869)

src/widgets/iframe/IFrameTile.tsx

@@ -22,6 +22,34 @@ const definition = defineWidget({
       type: 'switch',
       defaultValue: false,
     },
+    allowScrolling: {
+      type: 'switch',
+      defaultValue: true,
+    },
+    allowTransparency: {
+      type: 'switch',
+      defaultValue: false,
+    },
+    allowPayment: {
+      type: 'switch',
+      defaultValue: false,
+    },
+    allowAutoPlay: {
+      type: 'switch',
+      defaultValue: false,
+    },
+    allowMicrophone: {
+      type: 'switch',
+      defaultValue: false,
+    },
+    allowCamera: {
+      type: 'switch',
+      defaultValue: false,
+    },
+    allowGeolocation: {
+      type: 'switch',
+      defaultValue: false,
+    },
   },
   component: IFrameTile,
 });
@@ -54,13 +82,43 @@ function IFrameTile({ widget }: IFrameTileProps) {
     );
   }
 
+  const allowedPermissions: string[] = [];
+
+  if (widget.properties.allowTransparency) {
+    allowedPermissions.push('transparency');
+  }
+
+  if (widget.properties.allowFullScreen) {
+    allowedPermissions.push('fullscreen');
+  }
+
+  if (widget.properties.allowPayment) {
+    allowedPermissions.push('payment');
+  }
+
+  if (widget.properties.allowAutoPlay) {
+    allowedPermissions.push('autoplay');
+  }
+
+  if (widget.properties.allowCamera) {
+    allowedPermissions.push('camera');
+  }
+
+  if (widget.properties.allowMicrophone) {
+    allowedPermissions.push('microphone');
+  }
+
+  if (widget.properties.allowGeolocation) {
+    allowedPermissions.push('geolocation');
+  }
+
   return (
     <Container h="100%" w="100%" maw="initial" mah="initial" p={0}>
       <iframe
         className={classes.iframe}
         src={widget.properties.embedUrl}
         title="widget iframe"
-        allowFullScreen={widget.properties.allowFullScreen}
+        allow={allowedPermissions.join(' ')}
       >
         <Text>Your Browser does not support iframes. Please update your browser.</Text>
       </iframe>