IFrame Plugin

Published on April 25th, 2022

Introduction

This is a plugin that renders an Iframe card that can be added to your component/homepage.

Add IFrame card to your Component

  1. In Roadie, find and select the service via the Component Catalog or Search. Once you are there, please click the cog item.

    cogwheel

  2. Click the plus sign to add a new Card. plus

  3. Select EntityIFrameCard from the list. card

    Click add.

You should now see a card like this: no props

This can be configured with this section.

Add IFrame card to your HomePage

Setup

To use this plugin make sure you already have the Backstage Home plugin enabled.

Add IFrame card to your homepage

  1. To enable this plugin go to your Home page via the sidebar.

    Once you are on the home page click on the cogwheel icon.

    cogwheel

  2. Click the plus sign to add a new Card. plus

  3. Select HomePageIFrameCard from the list. add card

    Click add

You should now see a card like this: iframe homepage

This can be configured with this section.

Configure Iframe props

Now configure the props of the plugin to display the correct url for your Iframe.

  1. Click on the wrench icon to edit the props of the component (see image below).

wrench

Then enter the following props.

props

{
  "src": "<your src>",
  "title": "<card title>"
}
  • src is url location of the iframe (without this, it will render text)
  • title the title you want to associate the iframe with (optional)
  • height the height of the iframe tag (optional)
  • width the wifth of the iframe tag(optional)
  1. Click Save

Now it should load and render the iframe card as per your specifications.

Based on what you enter, the card should now look similar to this. card

Note

Authentication

This plugin does not support authenticated methods. You can alternatively embed credentials in the url like so

https://username:[email protected]

CSP

Content Security Policy (CSP) is a layer of security added to web applications to avoid certain attacks like Cross site scripting (XSS). This is done by returning a header Content-Security-Policy on the server side. It restricts the access to the WebApp by adding a policy. This policy is then validated on the browser to ensure that no malicious attacks can occur on the domain.

Since this is controlled by the WebPage Admins, it may happen that you are unable to load the content you wish in your IFrame. This is a limitation of this plugin.

For more information on this plugin, please visit here.

References