Files
wiki/Catalogue-Self-Hosted/apps/app-homarr-iframes.md
T
2026-06-09 18:40:21 +02:00

4.6 KiB
Raw Blame History


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)

# 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 WidgetsIframe).

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

🔗 Pages Liées