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 { intersectionRootRef: MutableRefObject; } +const playroomConfig = (window.__playroomConfig__ = __PLAYROOM_GLOBAL__CONFIG__); + export default function Iframe({ intersectionRootRef, style, @@ -52,6 +54,7 @@ export default function Iframe({ return (