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:
Embedding an IFrame in the Sidebar
Add the IFrame brick directly to the sidebar
Add a Sidebar Panel Starter Brick
In the Brick Actions Pane, remove the Render Document Brick
Add a IFrame brick
Configure the URL and other brick configuration
Add an IFrame brick in the Document Builder
In the Design View, use the 3-dot menu to add a Brick element
In the Brick Actions pane, add the IFrame brick
Configure the URL and other brick configuration
Example: Embedding a Weather Map
Locate the embed code creator for your application: https://embed.windy.com/config/map
Generate the HTML code:
Select the URL value from the
src
attributeProvide 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:
Add a Construct URL brick
Configure the Construct URL with the base URL and provide the URL search parameters
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:
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:
Last updated