Merge pull request #45 from tryretool/exposeIframeProperties

[feat] Add iframe permissions

Author: kentwalters

README.md

@@ -20,7 +20,7 @@ import Retool from 'react-retool';
 function App() {
   const sample = { name: 'Sample data' }
   return (
-    <Retool 
+    <Retool
       url="https://retoolin.tryretool.com/embedded/public/f7607e1f-670a-4ebf-9a09-be54cf17181e"
       data={sample}
     />
@@ -40,6 +40,8 @@ export default App;
 
 `<Retool>` will accept an optional `onData` callback that will be called with the data of an event that is sent from the embedded Retool app. These events can be sent from a JavaScript query inside of Retool by using the `parent.postMessage()` syntax.
 
+`<Retool>` also accepts optional `allow` and `sandbox` parameters to configure permissions of the iframe used to embed the Retool app. `allow-scripts` and `allow-same-origin` are required in order to run Retool, so if `sandbox` is specified, `allow-scripts` and `allow-same-origin` will always be appended to ensure the Retool app works.
+
 ### Example
 
 Running `yarn start` will start an application with a basic Retool app embeded.

src/components/Retool.js

@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from "react";
 
-const Retool = ({ data, url, height, width, onData }) => {
+const MINIMUM_SANDBOX_PERMISSIONS = 'allow-scripts allow-same-origin'
+
+const Retool = ({ data, url, height, width, onData, sandbox, allow }) => {
   const embeddedIframe = useRef(null);
   const [elementWatchers, setElementWatchers] = useState({});
 
@@ -90,15 +92,19 @@ const Retool = ({ data, url, height, width, onData }) => {
     }
   };
 
+  const sandboxAttrib = typeof sandbox === 'string' ? `${MINIMUM_SANDBOX_PERMISSIONS} ${sandbox}` : sandbox === true ? MINIMUM_SANDBOX_PERMISSIONS : sandbox
+
   return (
     <iframe
+      allow={allow}
+      sandbox={sandboxAttrib}
       height={height ?? "100%"}
       width={width ?? "100%"}
       frameBorder="none"
       src={url}
       ref={embeddedIframe}
       title="retool"
-    ></iframe>
+    />
   );
 };