Set up an iFrame component

Level: intermediate

note

This functionality is available for Creatio 8.3.3 and later.

The iFrame component lets users view and interact with external services, custom HTML, or internal tools without switching between systems. Use it to embed external or dynamic content directly into Freedom UI pages without custom development.

The iFrame component supports two content sources:

• "URL" — loads an external resource into the iFrame.
• "HTML" — renders custom content stored in the system.

To display URL content correctly, make sure the external source meets the following requirements:

• The source allows embedding in an iFrame.
• The link uses the HTTPS protocol.
• The source domain is on the trusted sources list of your Content Security Policy (CSP). Typically, you need at least the connect-src and frame-src CSP directives. Learn more: Set up content security policy.

Set up iFrame content

1. Open the form page in Freedom UI Designer.
2. Drag the iFrame component to the canvas.
3. Click to open the iFrame settings area.
4. Go to the General block.
5. Select the source type in the Content type field. Available options are "URL" and "HTML".
6. Specify the Content to display parameter:
   • For the "URL" content source, select a column that stores a link or enter a URL (for example, https://mysitename.com).
   • For the "HTML" content source, select a column that stores HTML.
7. Save the changes.

As a result, the iFrame will display the configured content on the Freedom UI page at runtime.

Set up iFrame permissions

The iFrame component includes a Permissions block that controls how embedded content behaves. By default, no permissions are granted to keep a secure baseline configuration. Enable only the features that your use case requires.

1. Select the iFrame component on the canvas.

2. Click to open the iFrame settings area.

3. Go to the Permissions block.

4. Fill out the Allowed features field.

   This enables specific browser capabilities for the embedded content, such as camera, microphone, or fullscreen mode.

5. Fill out the Sandbox permissions field.

   This removes specific sandbox restrictions from the embedded content. Grant only the permissions the embedded content requires.

6. Save the chages.

As a result, the iFrame will apply only the permissions you specified. Other sandbox restrictions remain active.

Learn more: Permissions-Policy header (MDN documentation), iFrame sandbox attribute (MDN documentation).

Troubleshoot common problems

Even when the iFrame component is set up correctly, embedded content may not display or may behave unexpectedly. Usually, the cause is a security restriction, a configuration gap, or a missing permission.

When something fails, the placeholder shown inside the iFrame at runtime and the errors logged in the browser console usually point to the underlying cause.

Source does not allow embedding

If you see a browser error like yoursite.com refused to connect, the target site is blocking rendering inside an iFrame. The source site controls this behavior through HTTP headers, such as X-Frame-Options or Content-Security-Policy: frame-ancestors, and the restriction cannot be overridden from Creatio. To resolve the issue, use a different embeddable source.

Component is not set up

If the iFrame is on the page but no content is displayed and the "Nothing to show yet" placeholder appears at runtime, the component is missing required configuration. To fix the issue, open the iFrame settings area and make sure the Content type and Content to display fields are filled out.

Content is blocked by Content Security Policy

If the "Content Unavailable" placeholder is displayed at runtime, or if the browser console shows a Content is blocked error, the source domain is not on the trusted sources list of your Content Security Policy.

1. Click → Security → Content Security Policy.
2. Open the Violations log tab.
3. Find the blocked entry that matches the source used in the iFrame.
4. Add the source domain together with the blocked directive (for example, connect-src or frame-src) to the trusted sources list.

Important

If the error does not disappear after adding the directive, repeat the steps above. CSP directives are blocked one at a time, and a new entry may appear in the Violations log after each fix.

Learn more: Set up content security policy.

iFrame permissions are missing

If embedded content loads but specific features such as fullscreen, camera, microphone, or geolocation do not work, the iFrame is missing the required permissions. Different sources require different combinations of permissions. Refer to the documentation of the embedded service or check the browser console errors. Common cases include:

• Script execution is blocked with the Blocked script execution in '<URL>' because the document's frame is sandboxed and the 'allow-scripts' permission is not set error. To fix the issue, add the required value to the Sandbox permissions field.
• Fullscreen mode triggers the Permissions policy violation: fullscreen is not allowed in this document error. To fix the issue, add the required feature to the Allowed features field.

After updating the permissions, save the page and reload the runtime page to apply the changes.

---

See also

Overview of Freedom UI Designer and its elements

Set up the app UI

Set up content security policy