Embed Web Apps via IFrames

Embed context-aware web applications on any page using inline frames (IFrames)

IFrames (Inline Frames) are an web affordance to securely embed content from one web application in another page.

For security, most web applications by default instruct the web browser to deny embedding their content within another page.

Therefore, to embed content, for your web application, refer to the web application's instructions for generating an embed code.

This page describes general instructions for embedding content using IFrames. For application specific instructions, see the following pages:

• Embed a Retool App

• Streamlit

• Embedding the Automation Co-Pilot

Embedding an IFrame in the Sidebar

Add the IFrame brick directly to the sidebar

1. Add a Sidebar Panel Starter Brick

2. In the Brick Actions Pane, remove the Render Document Brick

3. Add a IFrame brick

4. Configure the URL and other brick configuration

Adding the IFrame brick directly to the sidebar

Add an IFrame brick in the Document Builder

1. In the Design View, use the 3-dot menu to add a Brick element

2. In the Brick Actions pane, add the IFrame brick

3. Configure the URL and other brick configuration

Example: Embedding a Weather Map

1. Locate the embed code creator for your application: https://embed.windy.com/config/map
2. Generate the HTML code:

<iframe 
  width="650" 
  height="450" 
  src="https://embed.windy.com/embed.html?type=map&location=coordinates&metricRain=default&metricTemp=default&metricWind=default&zoom=5&overlay=wind&product=ecmwf&level=surface&lat=42.359&lon=-71.041" 
  frameborder="0">
</iframe>

1. Select the URL value from the src attribute

2. Provide the URL as input to the IFrame brick

Frequently Asked Questions

How do I dynamically construct the IFrame URL?

To dynamically construct the IFrame URL based on page context:

1. Add a Construct URL brick

2. Configure the Construct URL with the base URL and provide the URL search parameters

3. Pass the constructed URL to the URL input of the IFrame brick

How do websites block/deny embedding as an IFrame?

Web applications can instruct the browser to block embedding using one or more of the following approaches in the response:

• X-Frame-Deny response header
• frame-ancestors Content Security Policy

Check your web application's documentation for affordances for embeddable widgets/pages specifically designed for embedding.

Why do websites block embedding?

Websites most frequently block embedding to prevent Clickjacking vulnerabilities

What Referer header does Chrome include in iframe requests?

Chrome will not include a Referer header in iframe requests because the request is made cross-origin.

What security headers does Chrome include in the iframe request?

To help protect against cross-original vulnerabilities, Chrome includes the sec- headers:

• sec-fetch-dest: iframe
• sec-fetch-mode: navigate
• sec-fetch-site: cross-site