From 482bafcdef70798983bc8a4d238f4f12c7d833fa Mon Sep 17 00:00:00 2001
From: Parsha Pourkhomami <aghaparsha+github@gmail.com>
Date: Sun, 31 May 2020 16:17:20 -0700
Subject: [PATCH] feat: Add iframeSandbox config (#157)

Co-authored-by: mhensley-nw <mhensley@nerdwallet.com>
Co-authored-by: mattcompiles <mattjones701@gmail.com>
---
 README.md                                    | 3 +++
 examples/seek-style-guide/playroom.config.js | 1 +
 lib/start.js                                 | 3 +++
 src/Playroom/Frames/Iframe.tsx               | 3 +++
 src/index.d.ts                               | 1 +
 5 files changed, 11 insertions(+)

diff --git a/README.md b/README.md
index 8984492d..c765d037 100644
--- a/README.md
+++ b/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
diff --git a/examples/seek-style-guide/playroom.config.js b/examples/seek-style-guide/playroom.config.js
index f75b5204..c36f39f9 100644
--- a/examples/seek-style-guide/playroom.config.js
+++ b/examples/seek-style-guide/playroom.config.js
@@ -47,4 +47,5 @@ module.exports = {
         ],
       },
     }),
+  iframeSandbox: 'allow-scripts',
 };
diff --git a/lib/start.js b/lib/start.js
index 7517dffe..51db9804 100644
--- a/lib/start.js
+++ b/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);
diff --git a/src/Playroom/Frames/Iframe.tsx b/src/Playroom/Frames/Iframe.tsx
index 01c19a68..0b9e3418 100644
--- a/src/Playroom/Frames/Iframe.tsx
+++ b/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) {
diff --git a/src/index.d.ts b/src/index.d.ts
index e59e1a66..abcc9d58 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -11,6 +11,7 @@ interface PlayroomConfig {
   storageKey?: string;
   webpackConfig?: () => void;
   baseUrl?: string;
+  iframeSandbox?: string;
 }
 
 interface InternalPlayroomConfig extends PlayroomConfig {