108 lines
4.2 KiB
Plaintext
108 lines
4.2 KiB
Plaintext
---
|
|
title: "iFrame"
|
|
description: "Embed any content from the internet. Some websites may restrict access."
|
|
hide_title: true
|
|
---
|
|
|
|
import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
|
|
|
|
import { AddingWidget } from "@site/src/components/widgets/adding";
|
|
import { WidgetConfig } from "@site/src/components/widgets/configuration";
|
|
import { WidgetHeader } from "@site/src/components/widgets/header";
|
|
import { iframeWidget } from ".";
|
|
|
|
<WidgetHeader widget={iframeWidget} categories={["Embed"]} />
|
|
|
|
If your application is not supported natively by Homarr, you can integrate it using the iframe widget.
|
|
It uses the [iframe element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe),
|
|
which embeds the desired page in the browser.
|
|
This means, no traffic is routed through Homarr (and the URL must be reachable from the client).
|
|
|
|
### Screenshots
|
|
|
|
import wikipediaHomepage from "./img/wikipedia.png";
|
|
import youtubeStream from "./img/nasa-iss-stream.png";
|
|
|
|
<div>
|
|
<img src={wikipediaHomepage} alt="iframe wikipedia-homepage" width={128 * 3} />
|
|
<img src={youtubeStream} alt="iframe youtube-iss-stream" width={128 * 3} />
|
|
</div>
|
|
|
|
<WidgetInteractionGuide advancedView={false} />
|
|
|
|
### Adding the widget
|
|
|
|
<AddingWidget />
|
|
|
|
### Limitations
|
|
|
|
Although you can integrate many websites, some may not work.
|
|
This is because the administrators of those sites disallow iframes
|
|
for security reasons, as users could easily be tricked
|
|
by embedding the original site on a malicious page.
|
|
|
|
Some proxies disallow iframes by default for this reason.
|
|
You can use https://iframetest.com to check whether the site allows iframes.
|
|
|
|
If you manage all of your own applications, you can usually change that by configuring
|
|
the `Content-Security-Policy` header and its `frame-ancestors` directive. The obsolete
|
|
`X-Frame-Options: ALLOW-FROM` directive is not supported by modern browsers.
|
|
|
|
For example, to allow your site to be embedded in iframes from specific domains:
|
|
|
|
**Apache (.htaccess or httpd.conf):**
|
|
|
|
```apache
|
|
Header set Content-Security-Policy "frame-ancestors 'self' https://trusted-domain.com"
|
|
```
|
|
|
|
**Nginx:**
|
|
|
|
```nginx
|
|
add_header Content-Security-Policy "frame-ancestors 'self' https://trusted-domain.com";
|
|
```
|
|
|
|
### Example URLs
|
|
|
|
- **Wikipedia homepage:** https://en.wikipedia.org/wiki/Main_Page
|
|
- **Any YouTube video or stream:** https://www.youtube.com/embed/dQw4w9WgXcQ?si=MWUbbG66UNTla_Ni
|
|
|
|
### Configuration
|
|
|
|
<WidgetConfig configuration={iframeWidget.configuration} />
|
|
|
|
### Transparent iframes
|
|
|
|
To create a transparent iframe like below you can use the following html code and load it into your iframe:
|
|
|
|
```html
|
|
<html style="color-scheme: dark;">
|
|
<body style="background: none; display: flex; justify-content: center; align-items: center;">
|
|
<img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/homarr.svg" width="90" height="90" />
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
|
|
|
|
### Third-party content
|
|
|
|
:::warning
|
|
|
|
The content below is an overview of third-party projects. All support requests/problems must be redirected to the appropriate repository.
|
|
We cannot guarantee the functionality nor security of these tools.
|
|
|
|
:::
|
|
|
|
### homarr-iframes from Diogo Valentim
|
|
|
|
The project [homarr-iframes](https://github.com/diogovalentte/homarr-iframes) has iframes designed to be used with Homarr, these iframes offer a minimalist view of other systems:
|
|
|
|
- [Vikunja](https://github.com/go-vikunja/vikunja): overview of your tasks with links to them.
|
|
- [Linkwarden](https://github.com/linkwarden/linkwarden): overview of your bookmarks with links to them.
|
|
- [Cinemark Brazil](https://www.cinemark.com.br): overview of the movies in Cinemark theaters in your city (_only in Brazil_).
|
|
|
|
|
|
|
|
You can [configure the iframes appearance and behavior](https://github.com/diogovalentte/homarr-iframes?tab=readme-ov-file#adding-to-homarr) using query arguments when adding them to your dashboard, like selecting the iframe theme and limit of items to show, and other options specific to each iframe.
|