feat: Add iframeSandbox config (#157)

Co-authored-by: mhensley-nw <mhensley@nerdwallet.com>
Co-authored-by: mattcompiles <mattjones701@gmail.com>

README.md

@@ -68,6 +68,7 @@ module.exports = {
   webpackConfig: () => ({
     // Custom webpack config goes here...
   }),
+  iframeSandbox: 'allow-scripts',
 };
 ```
 
@@ -81,6 +82,8 @@ export { Button } from '../Button'; // Re-exporting a named export
 // etc...
 ```
 
+The `iframeSandbox` option can be used to set the [`sandbox` attribute](https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/) on Playroom's iframe. A minimum of `allow-scripts` is required for Playroom to work.
+
 Now that your project is configured, you can start a local development server:
 
 ```bash

examples/seek-style-guide/playroom.config.js

@@ -47,4 +47,5 @@ module.exports = {
         ],
       },
     }),
+  iframeSandbox: 'allow-scripts',
 };

lib/start.js

@@ -17,6 +17,9 @@ module.exports = async (config, callback) => {
     compress: true,
     inline: true,
     watchOptions: { ignored: /node_modules/ },
+    // Added to prevent Webpack HMR from breaking when iframeSandbox option is used
+    // See: https://github.com/webpack/webpack-dev-server/issues/1604
+    disableHostCheck: true,
   };
 
   const compiler = webpack(webpackConfig);

src/Playroom/Frames/Iframe.tsx

@@ -12,6 +12,8 @@ interface IframeProps extends AllHTMLAttributes<HTMLIFrameElement> {
   intersectionRootRef: MutableRefObject<Element | null>;
 }
 
+const playroomConfig = (window.__playroomConfig__ = __PLAYROOM_GLOBAL__CONFIG__);
+
 export default function Iframe({
   intersectionRootRef,
   style,
@@ -52,6 +54,7 @@ export default function Iframe({
   return (
     <iframe
       ref={iframeRef}
+      sandbox={playroomConfig.iframeSandbox}
       onLoad={() => setLoaded(true)}
       onMouseEnter={() => {
         if (src !== renderedSrc) {

src/index.d.ts

@@ -11,6 +11,7 @@ interface PlayroomConfig {
   storageKey?: string;
   webpackConfig?: () => void;
   baseUrl?: string;
+  iframeSandbox?: string;
 }
 
 interface InternalPlayroomConfig extends PlayroomConfig {