Webpage card

The webpage card shows another web page inside the dashboard. In the card picker it is called Webpage, and in YAML its type is iframe, because that is what it is: an iframe in a card.

Use it for things Home Assistant has no card for, but that live on a web page: a local weather radar, a dashboard of another system on the network, or the status page of a device. Prefer a real card whenever there is one. A card follows the theme, the language, and the state of Home Assistant. An embedded page does none of that, and it scrolls on its own, inside the dashboard.

The card has no padding and no title by default. The page fills it from edge to edge, with the rounded corners of the card.

With title, the card gets a header above the page. Use it when the page itself does not make clear what it is.

Outside the sections view, the height of the card comes from aspect_ratio: the height as a percentage of the width, like 50%, or a ratio, like 16:9. Without it, the card is half as high as it is wide. In the sections view, the grid decides the size instead, and the aspect ratio is ignored.

With hide_background, the card has no background, border, or shadow. Use it for a page that has its own background, so it looks like part of the dashboard rather than a page in a box.

Not every page can be embedded. Many websites tell browsers not to show them in an iframe, and then the card stays empty. There is nothing the card can do about that.

When Home Assistant is served over HTTPS, the page must use HTTPS as well. Browsers block the mix, so instead of an empty card, the card shows an error that explains why.

• Pick a page that works at the size of a card, ideally one made to be embedded.
• Remember that the page runs inside Home Assistant. Only embed pages you trust.

• url (string, required): the address of the page to show.
• title (string): a title above the page.
• aspect_ratio (string): the height of the card, as a percentage of the width or as a ratio. Defaults to 50%. Ignored in the sections view and the panel view.
• hide_background (boolean): removes the background, border, and shadow of the card. Defaults to false.
• allow (string): the permissions policy of the iframe, like fullscreen; camera. Defaults to fullscreen.
• allow_open_top_navigation (boolean): lets a link in the page, selected by the user, open in the whole window. Defaults to false.
• disable_sandbox (boolean): removes the sandbox of the iframe. Defaults to false.

type: iframe
url: "https://www.home-assistant.io"
aspect_ratio: "75%"

The card lives in src/panels/lovelace/cards/hui-iframe-card.ts, and the element is <hui-iframe-card>. It renders an <iframe> inside an <ha-card>. The aspect ratio becomes a padding-top on the wrapper, with the iframe positioned absolutely on top.

The iframe is sandboxed by default, with the permissions in IFRAME_SANDBOX from src/util/iframe.ts: forms, pop-ups, scripts, and the same origin among them. The card throws Invalid URL for addresses that sanitize to about:blank, like javascript: URLs, because the sandbox keeps the same origin.

In the sections view, the card takes the full width and 4 rows, and can shrink to 3 columns and 2 rows.

Source