104 lines
4.6 KiB
Markdown
104 lines
4.6 KiB
Markdown
---
|
||
title: Homarr iFrames
|
||
created: 2026-06-07
|
||
updated: 2026-06-07
|
||
type: app
|
||
tags: [catalogue, dashboard, homarr, iframe, complement]
|
||
confidence: medium
|
||
contested: false
|
||
sources: [https://selfh.st/apps/?tag=Dashboard, https://github.com/homarr-labs/homarr-iframes]
|
||
---
|
||
|
||
# 📊 Homarr iFrames
|
||
|
||
> Complément pour **Homarr** : ajouter des iframes configurables pour intégrer n'importe quel service dans le dashboard, même sans intégration native.
|
||
|
||
## 📋 Informations Générales
|
||
|
||
| Attribut | Valeur |
|
||
|----------|--------|
|
||
| **Nom** | Homarr iFrames |
|
||
| **Slug** | homarr-iframes |
|
||
| **Description** | Module complémentaire pour Homarr : tuiles iframe configurables (services sans intégration native) |
|
||
| **Site officiel** | https://github.com/homarr-labs/homarr-iframes |
|
||
| **Repository** | https://github.com/homarr-labs/homarr-iframes |
|
||
| **Stars** | 115 ⭐ |
|
||
| **Licence** | MIT |
|
||
| **Langage principal** | TypeScript (module Homarr) |
|
||
| **Catégorie** | Dashboard |
|
||
| **Tags** | [catalogue, dashboard, homarr, iframe, complement] |
|
||
|
||
## 📝 Description
|
||
|
||
À l'origine, Homarr ne supportait qu'un nombre limité d'intégrations natives (Sonarr, Radarr, Plex…). Pour les services **sans connecteur officiel**, il fallait ruser avec des iframes brutes, ce qui donnait un rendu moyen. **Homarr iFrames** comble ce manque : un module complémentaire qui ajoute une **tuile iframe configurable** (taille, URL, rafraîchissement, lazy load) à n'importe quel dashboard Homarr.
|
||
|
||
Le besoin est simple mais réel :
|
||
|
||
- **Embarquer un Grafana** avec un panel spécifique, sans qu'il prenne tout l'écran.
|
||
- **Intégrer un Uptime Kuma** avec sa status page sur un sous-ensemble de services.
|
||
- **Afficher un Pi-hole** dans un coin du dashboard.
|
||
- **Montrer une vue Home Assistant** sans ouvrir un nouvel onglet.
|
||
|
||
⚠️ **Statut du projet** : à noter que la fonctionnalité iframe est désormais **intégrée nativement** dans Homarr récent (≥ 1.0) sous forme de widget. Le module historique garde donc un intérêt surtout pour les **anciennes installations Homarr** ou pour des usages spécifiques (customisation avancée non exposée dans l'UI native).
|
||
|
||
C'est une pièce de musée utile : typique des extensions qui naissent d'un manque, puis sont absorbées par le projet principal. Toujours utilisable, mais à considérer comme un **fallback** plutôt qu'un must-have.
|
||
|
||
## 🚀 Installation
|
||
|
||
### Via Docker (recommandé, mode legacy)
|
||
|
||
```yaml
|
||
# docker-compose.yml — exemple pour une instance Homarr existante
|
||
services:
|
||
homarr-iframes:
|
||
image: ghcr.io/homarr-labs/homarr-iframes:latest
|
||
container_name: homarr-iframes
|
||
restart: unless-stopped
|
||
environment:
|
||
- HOMARR_URL=http://homarr:7575
|
||
ports:
|
||
- "7580:8080"
|
||
```
|
||
|
||
> ℹ️ En pratique, ajouter directement le **widget iframe natif** dans Homarr 1.x via l'UI (catégorie *Widgets* → *Iframe*).
|
||
|
||
### Installation manuelle
|
||
|
||
Cloner, `pnpm install && pnpm build`, intégrer le bundle dans le dossier `public/widgets/` de l'instance Homarr cible.
|
||
|
||
## ⚙️ Configuration
|
||
|
||
- **URL cible** : adresse complète de la page à embarquer (attention au `X-Frame-Options: DENY` côté cible).
|
||
- **Dimensions** : largeur / hauteur en pixels ou en unités de grille Homarr.
|
||
- **Lazy loading** : ne charge l'iframe que si la tuile est visible (perf).
|
||
- **Refresh** : intervalle de rechargement forcé (en secondes).
|
||
- **Auth** : transmission de headers d'auth si Homarr est en SSO (avancé).
|
||
|
||
## 🔗 Alternatives
|
||
|
||
- **Widget iframe natif Homarr** — la voie officielle depuis 2024, suffit dans 90 % des cas.
|
||
- **Glance** — propose des tuiles *iframe widget* en natif.
|
||
- **Dashy** — widget iframe configurable depuis longtemps.
|
||
|
||
## 🔒 Sécurité
|
||
|
||
- **En-tête `X-Frame-Options`** : beaucoup de services refusent l'embarquement (protection contre le clickjacking). Vérifier que la cible autorise `ALLOW-FROM` ou utilise `Content-Security-Policy: frame-ancestors`.
|
||
- **Same-origin** : l'iframe hérite du contexte du parent. Ne pas embarquer de services contenant des secrets.
|
||
- **Lazy loading** : limiter le nombre d'iframes simultanées pour éviter de plomber le navigateur.
|
||
- **HTTPS cohérent** : parent et iframe doivent partager le même schéma pour éviter les mixed-content.
|
||
|
||
## 📚 Ressources
|
||
|
||
- Repository : https://github.com/homarr-labs/homarr-iframes
|
||
- Documentation Homarr : https://homarr.dev/docs
|
||
|
||
## 🔗 Pages Liées
|
||
|
||
- [[cat-dashboard]]
|
||
- [[app-homarr]] — projet principal
|
||
- [[app-glance]] — concurrent avec iframe natif
|
||
- [[app-traefik]] — reverse proxy
|
||
- [[app-grafana]] — exemple de service à embarquer
|
||
- [[recettes-docker-compose]]
|
||
- [[securisation-home-lab]]
|