Atlas Forms
iFrame Viewer
The iframe-viewer control embeds an external URL inside a sandboxed iframe within the form. Use it to display live web pages, embedded dashboards (Grafana, Power BI, Tableau), external documentation, or legacy internal tools as context panels alongside a form.
Minimal Example
{
"id": "external-dashboard",
"type": "iframe-viewer",
"label": "Live Dashboard",
"width": "full",
"settings": {
"src": "https://dashboards.example.com/embed/kpi",
"height": "500px"
}
}Settings Reference
| Setting | Type | Default | Description |
|---|---|---|---|
src | string | — | URL to embed. Supports template expressions: {{context.reportUrl}} |
height | string (CSS) | "400px" | iframe height |
width | string (CSS) | "100%" | iframe width |
sandbox | string | "" | Space-separated sandbox permission tokens (see table below). Empty string = maximum restriction. |
allowFullscreen | boolean | false | Allow the embedded page to enter fullscreen mode |
scrolling | auto | yes | no | auto | iframe scroll behaviour |
loading | eager | lazy | eager | Browser lazy-load hint for below-the-fold iframes |
title | string | — | Accessible title attribute for the iframe element |
Sandbox Permission Tokens
| Token | What It Allows | Risk Level |
|---|---|---|
allow-scripts | JavaScript execution in the iframe | Medium |
allow-forms | Form submission inside the iframe | Low |
allow-same-origin | Treat content as same origin — can access parent cookies | High — use sparingly |
allow-popups | Open new windows from within the iframe | Medium |
allow-top-navigation | Navigate the top-level frame | High — avoid |
allow-downloads | Trigger file downloads | Low |
Embedding a Grafana Dashboard
Grafana supports anonymous embedding via the /d-solo/ route. The embedded panel requires allow-scripts for its React UI to run:
{
"id": "grafana-panel",
"type": "iframe-viewer",
"label": "Infrastructure Health",
"width": "full",
"settings": {
"src": "https://grafana.internal/d-solo/abc123/health?orgId=1&panelId=2",
"height": "400px",
"sandbox": "allow-scripts allow-same-origin",
"allowFullscreen": true,
"title": "Infrastructure Health Panel"
}
}Dynamic URL from Context
{
"id": "report-viewer",
"type": "iframe-viewer",
"settings": {
"src": "{{context.report.embedUrl}}",
"height": "600px",
"sandbox": "allow-scripts",
"loading": "lazy"
}
}X-Frame-Options Limitation
Many websites set the X-Frame-Options: DENY or X-Frame-Options: SAMEORIGIN HTTP header, which prevents embedding. If the iframe shows a blank panel or a browser error, the target site has blocked embedding. Solutions:
- Use your own internal services (Grafana, Metabase, custom portals) which you control.
- For external sites, prefer a
pdf-vieweror a direct link instead of an iframe. - Proxy the content through your backend if you own the content.
Never use allow-same-origin with allow-scripts together
Combining
allow-same-origin and allow-scripts effectively removes the sandbox — the iframe can read the parent's cookies and localStorage. Only do this for fully trusted internal content hosted on your own domain.