iFrame-widget (Embed)

Je Power BI-dashboard, je onderhoudsmonitor, je bedrijfsvideo. Allemaal ergens anders. En dus zag bijna niemand ze.

Met de iFrame- en videowidget haal je externe content gewoon je intranet in. Een dashboard staat live op de startpagina en klap je open naar volledig scherm. Een video speelt af waar hij hoort: in een widget, een kennisbankartikel, een nieuwsbericht of op een groepspagina.

Veilig blijft het ook. Externe domeinen laden alleen als jouw beheerder ze toestaat in de CSP-instellingen, en Embrace neemt standaard extra security maatregelen. In dit artikel:

• Tutorial
• Voorbeelden
• Kenmerken
• Inrichting en configuratie
• Content Security Policy (CSP)
• Beveiliging
• FAQ

Tutorial

Toon data vanuit externebronnen direct op je social intranet startpagina en/of in je kennisbank en nieuws. Denk aan PowerBI of Tableau data, Sociale media, teamkalenders (Outlook/Google), Projectplanning (Monday/Asana/Jira), of CRM-dashboards zoals Salesforce. De mogelijkheden zijn eindeloos! Bekijk onderstaande tutorial voor meer informatie.

Voorbeelden

Het is ook mogelijk om zelf widgets te maken met de iFrame/Embed widget. Denk aan kantoorlijsten met muziek vanuit Spotify of Soundcloud, financiële informatie zoals aandelen of wisselkoersen of een YouTube afspeellijst. Of een social media feed vanuit bijvoorbeeld Elfsight waarin je posts vanuit LinkedIn, X en Instagram toont. In de rest van dit artikel lees je hoe je dit configureert.

Kenmerken

• Je toont een externe website in het portaal via een iframe.
• Je gebruikt een titel als je dat wil.
• Je kunt een knop tonen om de pagina te openen in een nieuw tabblad. Deze knop is alleen zichtbaar als je de titel toont.
• Je stelt de hoogte in pixels in.
• De widget gebruikt automatisch de breedte van het widget area.
• Je kunt een "volledig scherm knop" aanzetten. Het volledig scherm opent in een modal overlay die je weer kunt sluiten. Zie ook onder- en bovenstaande schermafbeeldingen.
• Je ziet een foutmelding als de weergave wordt geblokkeerd door CSP instellingen.
• De widget is beschikbaar als geplaatste widget, gebruikerswidget en in groepen.

Inrichting en configuratie

Widget toevoegen

1. Ga naar Portals > Widgets.
2. Voeg een nieuwe iFrame widget toe.
3. Vul de externe URL in.
4. Stel een titel in als je dat wil.
5. Stel de hoogte in pixels in.
6. Activeer de volledig scherm knop als je dat wil.
7. Sla de widget op.

Widget plaatsen als geplaatste widget

1. Ga naar Portals > Suite Portalen.
2. Open het gewenste dashboard, bijvoorbeeld General dashboard.
3. Plaats de widget.
4. Controleer of de externe website zichtbaar is in de widget.
5. Publiceer het portaal.

Content Security Policy (CSP)

Niet alle externe websites kun je tonen. Bij een blokkade zie je deze melding:

Deze inhoud kan niet worden weergegeven vanwege beveiligingsinstellingen. Controleer uw Content Security Policy (CSP) configuratie om frame-src voor deze URL toe te staan.

• Sommige websites blokkeren iframe weergave met hun eigen beveiliging. Dit pas je niet aan binnen Embrace.
• Embrace blokkeert ook zelf externe domeinen om veiligheidsredenen. We gebruiken hiervoor een Content Security Policy, CSP, om domeinen toe te staan. In de meeste gevallen staat de website die je wil tonen nog niet in de standaard CSP. Dan voeg je de URL als extra domein toe aan de CSP. Je voegt domeinen toe via de CSP editor binnen Management. De CSP editor is alleen beschikbaar voor beheerders met de CSP Manager rol. 

Lees meer over de CSP editor in de documentatie hierover.

Beveiliging

Als je externe content inlaadt met de iFrame-widget, past Embrace automatisch een aantal vaste beveiligingsinstellingen toe. Die kun je als beheerder niet aanpassen. Ze zorgen ervoor dat het portaal en de bezoeker beschermd zijn tegen acties van de ingesloten pagina.

De sandbox

Elk iframe werkt binnen een sandbox. De ingesloten pagina mag het volgende:

• Scripts: de pagina mag JavaScript uitvoeren. Dit is nodig omdat de meeste dashboards, players en webapps anders niet werken. Technisch: allow-scripts
• Formulieren: de pagina mag formulieren versturen, bijvoorbeeld een zoek- of inlogformulier. Technisch: allow-forms
• Popups: de pagina mag een link of popup in een nieuw venster openen. Technisch: allow-popups
• Eigen origin: de ingesloten site mag zijn eigen cookies, sessie en opslag gebruiken. Dit is nodig om in te loggen of persoonlijke content te tonen. Technisch: allow-same-origin

Alles wat hier niet bij staat, is geblokkeerd. Dit kan de ingesloten pagina dus niet:

• De portaalpagina omleiden of overnemen: de bezoeker kan niet ongemerkt naar een andere pagina worden gestuurd, bijvoorbeeld een phishingpagina. Technisch: top-navigation is uitgeschakeld.
• Systeemdialogen tonen: geen opdringerige of misleidende pop-upvensters (alert, confirm, prompt).
• Bestanden downloaden: de ingesloten pagina kan geen download starten.
• Pointer lock, presentatie en schermoriëntatie vergrendelen.
• Uit de sandbox breken via popups: een geopend venster valt onder dezelfde beperkingen.

Apparaten, privacy en weergave

• Gevoelige apparaatfuncties zijn geblokkeerd: de ingesloten pagina kan geen camera, microfoon, locatie, bewegingssensor of betaal-API gebruiken. Technisch: 
  allow="accelerometer 'none'; camera 'none'; microphone 'none'; geolocation 'none'; payment 'none'"
• Geen referrer: de ingesloten site ziet niet vanaf welke portaalpagina de bezoeker komt. Technisch: 
  referrerpolicy="no-referrer"
• Weergave: volledig scherm loopt via de eigen knop van de widget, niet via de volledig-schermmodus van de browser. De inhoud wordt pas geladen als die in beeld komt. Technisch: 
  loading="lazy"

Let op: de sandbox beschermt het portaal, maar niet tegen een onbetrouwbare website die je zelf insluit. Ingesloten scripts blijven draaien. Sluit daarom alleen domeinen in die je vertrouwt. De widget bepaalt zelf niet welke adressen zijn toegestaan; dat regel je in de CSP-instellingen via de regel frame-src. Staat een domein daar niet in, dan blokkeert de browser het en ziet de bezoeker een melding dat de pagina niet getoond kan worden vanwege beveiligingsrestricties (CSP). Lees meer over de CSP-instellingen in de documentatie.

FAQ

• De iFrame widget staat niet in Portals Widgets
  Als de widget niet in de widgetlijst staat, neem je contact op met Service & Support.
• De iFrame widget in de mobiele app
  De widget is momenteel alleen beschikbaar in de browser en niet in de mobiele app.
• De website wordt niet weergegeven
  Dit heeft twee mogelijke oorzaken:
  1. Het domein is niet toegestaan binnen de Content Security Policy, CSP, van Embrace. Voeg dan het domein toe aan de CSP via de CSP editor.
  2. De externe website staat iframe weergave niet toe. Dit kunnen we niet oplossen.
• Controleren of een website iframe weergave toestaat
  Je kunt dit controleren met een iframe tester, bijvoorbeeld: iframetester.com