Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Add iframeSandbox config #157

Merged
merged 12 commits into from
May 31, 2020
Merged

feat: Add iframeSandbox config #157

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
1cfb771
Webpack config + iframe sandboxing
parshap May 21, 2020
53ca7d7
Update comment
parshap May 21, 2020
1480c37
Fixing weird spacing webstorm insisted upon
mhensley-nw May 13, 2020
7afe3d4
Default to 'allow-scripts'
parshap May 21, 2020
6f80796
Lint
parshap May 21, 2020
8c041df
Add iframeSandbox config to example config
parshap May 21, 2020
4063b81
Add types
parshap May 21, 2020
63a4722
Add docs
parshap May 21, 2020
e7b5776
Move example config
parshap May 22, 2020
678f99d
fix: Remove "allow-scripts" default sandbox
parshap May 30, 2020
570a67e
fix: update example
parshap May 31, 2020
7bc2b2d
Merge branch 'master' into iframe-sandbox
mattcompiles May 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ module.exports = {
webpackConfig: () => ({
// Custom webpack config goes here...
}),
iframeSandbox: true,
};
```

Expand All @@ -79,6 +80,8 @@ export { Button } from '../Button'; // Re-exporting a named export
// etc...
```

The `iframeSandbox` option can be used to control the `sandbox` attribute on Playroom's iframe. A value of `true` will set `sandbox="allow-scripts"` or a custom string value can be used.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wanted to document this feature somewhere, but let me know if this is too distracting to be upfront in the readme and you'd like to move it elsewhere.


Now that your project is configured, you can start a local development server:

```bash
Expand Down
1 change: 1 addition & 0 deletions cypress/projects/basic/playroom.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@ module.exports = {
snippets: './snippets',
outputPath: './dist',
openBrowser: false,
iframeSandbox: true,
mattcompiles marked this conversation as resolved.
Show resolved Hide resolved
};
3 changes: 3 additions & 0 deletions lib/start.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
13 changes: 13 additions & 0 deletions src/Playroom/Frames/Iframe.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,18 @@ interface IframeProps extends AllHTMLAttributes<HTMLIFrameElement> {
intersectionRootRef: MutableRefObject<Element | null>;
}

const playroomConfig = (window.__playroomConfig__ = __PLAYROOM_GLOBAL__CONFIG__);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wasn't sure if I should read the config in this component or if the value should be read elsewhere and passed as a prop. I tried to follow existing patterns, which looked like it's ok for components to read config.


const getIframeSandboxAttribute = (
iframeSandboxConfig: string | boolean | undefined
): string | undefined => {
if (iframeSandboxConfig === true) {
return 'allow-scripts';
} else if (typeof iframeSandboxConfig === 'string') {
return iframeSandboxConfig;
}
};

export default function Iframe({
intersectionRootRef,
style,
Expand Down Expand Up @@ -52,6 +64,7 @@ export default function Iframe({
return (
<iframe
ref={iframeRef}
sandbox={getIframeSandboxAttribute(playroomConfig.iframeSandbox)}
onLoad={() => setLoaded(true)}
onMouseEnter={() => {
if (src !== renderedSrc) {
Expand Down
1 change: 1 addition & 0 deletions src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ interface PlayroomConfig {
storageKey?: string;
webpackConfig?: () => void;
baseUrl?: string;
iframeSandbox?: string | boolean;
}

interface InternalPlayroomConfig extends PlayroomConfig {
Expand Down