SandBox – Automattic Design System

This component provides an isolated environment for arbitrary HTML via iframes.

Import

import { SandBox } from '@wordpress/components';

Name	Type	Default	Description
`allowSameOrigin`	`boolean`	`false`	Whether to include `allow-same-origin` in the iframe’s sandbox attribute. When true, nested iframes (such as third-party embeds) can access their own origin’s cookies and storage. Only enable this for content that is NOT directly user-controlled, such as server-fetched oEmbed previews. @default false
`html`	`string`		The HTML to render in the body of the iframe document. @default ”
`title`	`string`		The `<title>` of the iframe document. @default ”
`type`	`string`		The CSS class name to apply to the `<html>` and `<body>` elements of the iframe.
`styles`	`string[]`		An array of CSS strings to inject into the `<head>` of the iframe document. @default []
`scripts`	`string[]`		An array of script URLs to inject as `<script>` tags into the bottom of the `<body>` of the iframe document. @default []
`onFocus`	`React.DOMAttributes< HTMLIFrameElement >[ 'onFocus' ]`		The `onFocus` callback for the iframe.
`tabIndex`	`HTMLElement[ 'tabIndex' ]`		The `tabindex` the iframe should receive. @default 0

const Default = () => <SandBox onFocus={fn()} html="<p>Arbitrary HTML content</p>" />;