---
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]]