Thèmes Canvas

Un thème Canvas peut réécrire entièrement la mise en page, l'interaction et les graphiques de la page d'état publique. Le HTML d'entrée tourne dans une iframe avec sandbox="allow-scripts" et sans allow-same-origin, sous sa propre CSP.

Différences avec les thèmes CSS

Capacité	Thème CSS	Thème Canvas
Mise en page	DOM hôte	entièrement auto-dessinée
Données	DOM hôte existant	instantané nie-sla:status + requêtes d'historique restreintes
Ressources	chargées par la page hôte	embarquées dans le ZIP (polices, images, scripts, styles)
Hauteur	la page elle-même	400-12000, mise à jour possible à l'exécution

Manifest

{
  "schema": "nie-sla-theme-v1",
  "id": "example-canvas",
  "name": "Example Canvas",
  "version": "1.0.0",
  "type": "theme",
  "mode": "canvas",
  "entry": "index.html",
  "permissions": ["status:read"],
  "height": 1000,
  "author": "Developer",
  "description": "A full-layout NIE-SLA theme.",
  "license": "MIT",
  "files": ["manifest.json", "index.html", "theme.js", "assets/logo.webp"]
}

permissions doit être exactement ["status:read"]. height est la hauteur initiale et peut être mis à jour à l'exécution via le protocole de messages.

Frontière de permissions

Un thème Canvas ne peut pas fetch directement des réseaux externes, lire le DOM hôte, les cookies ou le Web Storage, soumettre des formulaires, ouvrir une navigation de niveau supérieur, créer des Workers ou imbriquer des frames. Polices, images, code et styles voyagent tous dans le ZIP. Il ne peut pas non plus lire l'API admin, les jetons Agent, la configuration de notification ou les bindings Cloudflare. status:read signifie lire les status, checks, metrics, pings et latency publics via le proxy hôte, pas un accès URL arbitraire.

Scénarios d'acceptation

• Aucune cible, une seule cible, beaucoup de cibles et des noms très longs.
• Sondes Cloudflare en échec pendant que l'Agent est en ligne, et l'inverse.
• warnings[] non vide, historique vide, champs de température manquants.
• Pas de débordement horizontal dans l'iframe à 320/375/768/1440 pixels.
• prefers-reduced-motion, focus clavier, contraste et états lecteurs d'écran.
• Délais de requête, HTTP 429, rechargement de thème et instantanés d'état dupliqués.
• Tout le contenu reste accessible quand la hauteur dynamique est bornée à 400-12000.

Le format complet des messages est dans le protocole de messages.