IFrame Plugin | Roadie

Introduction

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

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

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

Once you are on the home page click on the cogwheel icon.
Click the plus sign to add a new Card.
Select HomePageIFrameCard from the list.

Click add

You should now see a card like this:

This can be configured with this section.

Configure Iframe Homepage props

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

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

Then enter the following 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)

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.

Add IFrame card to your Component

In Roadie, find and select the service via the Component Catalog or Search. Once you are there, please click the cog item.
Click the plus sign to add a new Card.
Select EntityIFrameCard from the list.

Click add.

You should now see a card like this:

It works in the same way as the Homepage IFrame card except that it can take the option src or srcFromAnnotation.

src is url location of the iframe
srcFromAnnotation is a refernce to an entity annotation containing a source url for the iframe.

In Roadie, click the ‘Edit Sidebar’ link in the sidebar
Click the plus sign to add a new Page.
Select IFramePage from the list.
Define your link title, URL and select the icon you want to use
Set up props like shown below

Click add.

It works in the same way as the Homepage IFrame card except the props it expects are divided into props for the page, and props for the iframe itself.

Top level “title” prop defines the title of the page itself. Props encapsulated into an “iframe” object define properties for the iframe. Possible options are

src, required
height, optional. Either pixels or percentages (800px/100%). Defaults to 100%
width, optional. Either pixels or percentages (800px/100%). Defaults to 100%
title, optional.

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

Content Security Policies