Module 9 — Les sources externes : regards de l’extérieur | Faites entrer HTML

Parfois, la vérité ne vient pas d’ici.
Elle est hébergée ailleurs.
On l’intègre, mais on garde un œil dessus.

🎯 Objectifs d’apprentissage

À la fin de ce module, vous serez capable de :

Intégrer du contenu multimédia externe
Utiliser les iframes avec discernement
Comprendre les enjeux de sécurité
Rester conforme aux règles d’accessibilité

🪟 Les iframes — Une fenêtre sur l’extérieur

Une iframe, c’est une fenêtre intégrée vers un autre site.
Ce qui s’y passe n’est pas sous votre contrôle.

🧱 Structure de base

<iframe 
    src="https://exemple.com"
    width="600"
    height="400"
    title="Archive externe : base de données publique"
    allowfullscreen>
</iframe>

🔍 Rôle des attributs

src : source externe
width / height : dimensions
title : description obligatoire pour l’accessibilité
allowfullscreen : autorise le plein écran si nécessaire

♿ Accessibilité — Donner du contexte

<iframe
    src="https://cartes-archives.com"
    title="Carte interactive des incidents recensés">
</iframe>

Le lecteur d’écran ne voit pas le contenu
Il lit le title
Sans titre, l’iframe est incompréhensible

Une source sans description est une source douteuse.

🔐 Sécurité — Méfiance systématique

Intégrer du contenu externe, c’est inviter quelqu’un dans votre enquête.

🛡️ L’attribut `sandbox`

<iframe
    src="https://exemple.com"
    sandbox
    title="Contenu isolé">
</iframe>

Par défaut, sandbox :

Bloque les scripts
Empêche les formulaires
Interdit les pop-ups
Isole le contenu

🔓 Autoriser uniquement ce qui est nécessaire

<iframe
    src="https://exemple.com"
    sandbox="allow-scripts allow-same-origin"
    title="Statistiques externes">
</iframe>

Règle d’or : 👉 tout interdire, puis autoriser au cas par cas.

🎛️ Permissions — Le contrôle fin

Certains contenus demandent plus :

<iframe
    src="https://media.externe.com"
    allow="fullscreen; autoplay"
    title="Vidéo d’archive">
</iframe>

allow contrôle les fonctionnalités
Limiter strictement les permissions
Ne jamais faire confiance par défaut

⚠️ Bonnes pratiques — Règles du terrain

❌ Éviter les iframes inutiles
❌ Ne jamais intégrer une source non fiable
✅ Toujours un title
✅ Toujours réfléchir à la sécurité
✅ Tester sur mobile

Une iframe mal maîtrisée peut compromettre toute la scène.

🧠 Alternatives aux iframes

Avant d’intégrer :

Lien externe simple
Capture d’écran
API (si disponible)
Contenu natif HTML

Parfois, ne pas intégrer, c’est la meilleure décision.

Fin du module 9. Les sources externes sont sous surveillance.

Module 9 — Les sources externes : regards de l’extérieur