Iframe Card

Card type: iframe

The iframe card displays external web content or inline HTML content inside a card using an <iframe>.

N.b. the embedded site must allow embedding via iframe, some sites block this.

To protect your notebook’s users against XSS attacks, most iframe features are disabled by default. If you trust the source you wish to embed, you can use the iframe_attributes parameter to override security-relevant HTML attributes such as sandbox and referrerPolicy. See examples below.

In addition to the common parameters the iframe card has the following configuration options:

Name	Type	Required	Default	Description
`source`	string	No	—	The URL to be embedded in iframe (including the protocol, e.g. `https://`)
`fill_card`	boolean	No	False	When set to `True`, the iframe will fill the entire card space including the header area. When `False` (default), the iframe will be positioned below the header.
`iframe_attributes`	dict	No	—	Override default iframe attributes (see below).
`iframe_attributes.sandbox`	string	No	`""`	Sets the iframe sandbox attribute. By default, all restrictions are enabled.
`iframe_attributes.referrerPolicy`	string	No	`no-referrer`	Controls what referrer information is sent. See referrerPolicy .
`iframe_attributes.allowFullScreen`	bool	No	False	Allows the iframe to go fullscreen. See allowfullscreen .
`iframe_attributes.allow`	string	No	—	Sets the iframe allow attribute for granular permissions (e.g., ‘fullscreen’). Default is unset.
`iframe_attributes.name`	string	No	—	Sets the iframe name attribute. Default is unset.
`iframe_attributes.srcdoc`	string	No	—	Sets the iframe srcdoc attribute for inline HTML. Default is unset.

Examples

1. Default. Most features disabled.


datacards.publish.card(
    type='iframe',
    source='https://example.com',
    label='External dashboard',
    fill_card=False,
    logic_view_size=(4,2)
)

2. Less Restrictive (e.g. allow forms, geolocation)


datacards.publish.card(
    type='iframe',
    source='https://docs.datacards.app',
    label='Less Restrictive',
    fill_card=False,
    logic_view_size=(4,2),
    iframe_attributes={
        'sandbox': 'allow-forms allow-scripts allow-modals allow-popups',
        'referrerPolicy': 'origin',
        'allowFullScreen': True,
        'allow': 'fullscreen geolocation microphone camera',
    }
)

3. Inline HTML using srcdoc


datacards.publish.card(
    type='iframe',
    # source can be omitted when using srcdoc
    label='Custom HTML',
    fill_card=False,
    logic_view_size=(4,2),
    iframe_attributes={
        'srcdoc': '<h1>Hello World!</h1><p>This is sandboxed HTML content.</p>',
    }
)