Sandbox and Security in iFrame in Gutenberg

Control sandbox permissions and referrer policy for embedded iFrames in Gutenberg using the Custom iFrame WordPress plugin.

Overview

Custom iFrame lets you control the security settings for any embedded iFrame in Gutenberg. Use sandbox permissions to restrict what the embedded content can do, and set a referrer policy to control what information is sent to the embedded site.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

Basic sandbox and referrer policy settings are free. Advanced Embed Security options require Custom iFrame Pro.

Requirements

Custom iFrame plugin installed and active
WordPress with the Gutenberg block editor

What Is the iFrame Sandbox?

The sandbox attribute restricts what an embedded page can do inside your site. By default, Custom iFrame embeds content without a sandbox, so the content behaves as it normally would.

Enabling sandbox restrictions can:

Prevent the embedded page from running scripts
Block the embedded page from submitting forms
Stop popups and redirects from opening
Prevent the embed from accessing top-level navigation

Enable restrictions only when you need them. Overly restrictive sandbox settings can break the embedded content.

Step 1: Add the Custom iFrame Block

Open your page in the block editor

Go to the page or post where you want the embed. Click Edit to open the Gutenberg block editor.

Add the Custom iFrame block

Click the Add Block button. Search for Custom iFrame. Click the block to add it to the page.

Paste the embed URL

In the right panel, paste the URL of the content you want to embed into the Source URL field.

Step 2: Configure Sandbox Permissions

Find the Security section

In the block settings panel on the right, scroll to the Security or Sandbox section.

Enable sandbox restrictions

Toggle Enable Sandbox to on. A list of permission toggles appears.

Allow only the permissions you need

Turn on only the permissions the embedded content requires:

Allow Scripts: Let the embedded page run JavaScript.
Allow Same Origin: Treat the embed as same-origin. Required for many interactive embeds.
Allow Forms: Let the embedded page submit forms.
Allow Popups: Let the embed open new windows or tabs.
Allow Modals: Let the embed show alert, confirm, or prompt dialogs.
Allow Top Navigation: Let the embed redirect the top-level page.
Allow Presentation: Allow the embed to use the Presentation API.

Enabling sandbox without turning on Allow Scripts and Allow Same Origin will break most interactive embeds. Start with both enabled and remove permissions only if needed.

Step 3: Set the Referrer Policy

Find the Referrer Policy setting

In the Security section, find the Referrer Policy dropdown.

Choose a policy

Select the policy that fits your privacy requirements:

No Referrer: Send no referrer information to the embedded site.
No Referrer When Downgrade: Send referrer for HTTPS-to-HTTPS only. Default browser behavior.
Origin: Send only the origin (domain), not the full URL path.
Origin When Cross Origin: Send full URL for same-origin, domain only for cross-origin.
Same Origin: Send referrer only when the embed is on the same origin.
Strict Origin: Send origin for HTTPS-to-HTTPS only.
Strict Origin When Cross Origin: Recommended for most sites.
Unsafe URL: Always send the full URL. Not recommended.

Step 4: Publish

Click Update or Publish. Your sandbox and referrer policy settings are now active on the embedded iFrame.

For all block settings, see the Set Up Custom iFrame in Gutenberg guide.

This guide showed you how to configure sandbox permissions and referrer policy in Gutenberg using the Custom iFrame plugin. These settings let you control exactly what the embedded content can do inside your site.

FAQ

It can, if you restrict permissions the embed needs. Most interactive embeds require Allow Scripts and Allow Same Origin at minimum. Start with those enabled and test the embed before removing other permissions.

Sandbox controls what actions the embedded page can take inside your site (run scripts, open popups, submit forms). Referrer policy controls what URL information your site sends to the embedded domain when the iFrame loads.

Strict Origin When Cross Origin is the recommended default for most sites. It sends the origin (domain) for cross-origin requests but sends the full URL for same-origin requests.

No. Sandbox settings are security constraints applied by the browser. They do not affect page load speed or the rendering of the embedded content.

Was this page helpful?

Last updated today

Built with Documentation.AI