Les contenus intégrés sont le meilleur moyen de garder les utilisateurs sur votre site tout en partageant du contenu provenant d'autres pages ou sites. Il peut s'agir d'un tweet intégré, qui s'affiche dans le style et le format de Twitter. Il peut s'agir d'un site entièrement distinct intégré au vôtre, comme une boutique Shopify intégrée où les visiteurs peuvent effectuer un achat sans quitter votre site.
Plus que jamais, il est important que nos sites restent sécurisés lorsque nous intégrons du contenu.
Les développeurs peuvent intégrer du contenu sur un site Web de plusieurs façons. La technique la plus courante consiste à utiliser un <iframe>, qui vous permet d'intégrer n'importe quel contenu sur votre site avec une simple URL. Il est déjà possible d'ajouter l'attribut sandbox pour renforcer la sécurité d'un iframe.
Vous pouvez également utiliser un élément HTML proposé:
<fencedframe>est proposé comme un moyen de protéger la confidentialité lors de l'intégration de contenus tiers.<portal>est proposé pour des transitions de pages plus fluides.
Lisez la suite pour découvrir comment améliorer la sécurité de vos contenus intégrés.
Intégrer avec des iFrames
Les iFrames peuvent être utilisés pour tous types de cas d'utilisation, par exemple pour ajouter des cartes ou des formulaires à une page de contact, et afficher des annonces.
<iframe src="https://example.com/maps"></iframe>
Chaque iframe possède son propre contexte de navigation, avec son propre historique de session et son propre document. Le contexte qui intègre l'iFrame est appelé contexte de navigation parent.
Le contenu tiers affiché dans une iframe peut interagir avec le site parent via postMessage(). Cela permet aux développeurs d'envoyer des valeurs arbitraires entre les contextes de navigation. Le destinataire du message peut utiliser l'écouteur d'événements onmessage pour recevoir les valeurs.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
Sécurité renforcée avec l'attribut sandbox
Si du contenu malveillant est déployé dans un iFrame, il est possible que des actions non intentionnelles (telles qu'une exécution JavaScript ou l'envoi d'un formulaire) soient exécutées.
Pour éviter cela, l'attribut sandbox limite les API exécutables dans l'iFrame et désactive les fonctionnalités potentiellement dangereuses.
<iframe src="https://example.com" sandbox></iframe>
Le bac à sable peut rendre certaines API importantes pour votre contenu intégré indisponibles. Pour autoriser une API désactivée, vous pouvez ajouter explicitement un argument à l'attribut bac à sable.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
De nombreuses valeurs sont possibles pour la spécification sandbox, y compris allow-forms, allow-same-origin, allow-popups, etc.
Règles sur les autorisations
À mesure que des fonctionnalités de plus en plus puissantes ont été développées pour le Web, des stratégies d'autorisation ont été créées pour gérer les autorisations de toutes ces fonctionnalités. Une stratégie d'autorisations peut être appliquée à un site parent et au contenu d'une iFrame. Les autorisations accordées à un site parent peuvent également être accordées à l'iframe, à l'aide de l'attribut allow.
<iframe src="https://example.com" allow="fullscreen"></iframe>
Intégrer avec des cadres cloisonnés
Un frame clôturé (<fencedframe>) est un élément HTML proposé pour le contenu intégré, semblable à un iFrame. Contrairement à un iFrame, un frame clôturé limite la communication avec son contexte d'intégration pour permettre au frame d'accéder aux données intersites sans les partager avec le contexte d'intégration. De même, les données first party de la page parente ne peuvent pas être partagées avec le frame clôturé.
<fencedframe src="https://3rd.party.example"></fencedframe>
Les cadres clôturés sont une proposition de la Privacy Sandbox qui suggère que les sites de niveau supérieur doivent partitionner les données. De nombreuses propositions de la Privacy Sandbox visent à répondre aux cas d'utilisation intersites, sans cookies tiers ni autres mécanismes de suivi. Certaines API Privacy Sandbox peuvent nécessiter de sélectionner des documents à afficher dans un cadre clôturé.
Par exemple, un cadre clôturé sera créé pour le gagnant de l'enchère publicitaire de l'API FLEDGE. L'API FLEDGE fournit une source opaque, un schéma d'URI indépendant de l'emplacement, qui peut s'afficher dans un cadre clôturé. Les sources opaques permettent aux sites d'afficher du contenu sur leurs sites sans révéler l'URL de la source d'annonces au propriétaire du site.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
À terme, les frames délimités ne remplaceront pas les iFrames. Vous n'aurez pas besoin de les utiliser. Les cadres clôturés sont proposés pour un cadre plus privé à utiliser lorsque les données de différentes partitions de niveau supérieur doivent être affichées sur la même page.
Intégrer des rapports avec des portails
Portal (<portal>) est un élément HTML proposé avec un contexte de navigation indépendant, ce qui pourrait améliorer l'expérience de transition de page. Les portails intègrent du contenu comme des iFrames, mais l'utilisateur ne peut pas accéder au code du portail. Un portail est en lecture seule et les utilisateurs ne peuvent pas interagir avec lui.
Les portails offrent la faible complexité d'une application multipage avec les transitions fluides d'une application monopage. Ces transitions peuvent être animées, remplaçant rapidement le contenu dans la fenêtre du navigateur.
<portal src="https://example.com/"></portal>
La spécification du portail en est encore aux premiers stades de son développement.
Autres éléments HTML utilisés pour l'intégration
Au fil de l'histoire du Web, un certain nombre d'éléments HTML ont été proposés et des API ont été créées pour intégrer du contenu. Pendant un certain temps, il était courant de créer des sites avec plusieurs éléments <frame> et <frameset>. Les sites comportant plusieurs éléments <frameset> affichaient l'URL de la page parente dans la barre d'adresse, quelle que soit la source des nombreux cadres individuels. Il était donc difficile de partager des liens vers du contenu sur le site. Ces API sont désormais obsolètes.
Il fut un temps où les technologies de plug-in, telles que l'élément Java <applet>, étaient utilisées pour couvrir d'autres cas d'utilisation. Il a ensuite été remplacé par l'élément <object>. Ces deux éléments étaient couramment utilisés pour afficher des plug-ins Flash, mais aussi pour afficher d'autres éléments HTML (similaires aux iFrames).
D'autres éléments, tels que <canvas>, <audio>, <video> et <svg>, ont rendu obsolètes les éléments <object> et <applet>.
Bien que <object> et <embed> ne soient pas encore officiellement obsolètes, il est préférable de les éviter, en particulier car ils présentent des comportements étranges.
<applet> a été supprimé de la spécification HTML en 2017.
Conclusion
Vous pouvez intégrer de manière sécurisée du contenu sur n'importe quel site Web à l'aide de la spécification iframe existante. D'autres éléments HTML, y compris <fencedframe> et <portal>, ont été proposés pour améliorer la sécurité et le style. Nous continuerons de vous faire part des progrès réalisés sur la proposition de cadres avec clôture au fur et à mesure.