Le contenu intégré est le meilleur moyen de conserver 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.
Il est plus important que jamais que nos sites restent sécurisés lorsque nous y 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 à l'aide d'une simple URL. Il est déjà possible d'ajouter l'attribut sandbox pour sécuriser un iFrame.
Vous pouvez également utiliser un élément HTML proposé :
<fencedframe>est proposé comme un moyen de préserver la confidentialité lors de l'intégration de contenu tiers.<portal>est proposé pour des transitions de page plus fluides.
Lisez la suite pour découvrir comment améliorer la sécurité de vos contenus intégrés.
Intégrer des rapports avec des iFrames
Les iFrames peuvent être utilisés pour toutes sortes de cas d'utilisation, comme l'ajout de cartes ou de formulaires à une page de contact, et l'affichage d'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 un 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 involontaires (telles qu'une exécution JavaScript ou l'envoi d'un formulaire) puissent être 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 indisponibles certaines API importantes pour votre contenu intégré. Pour autoriser une API désactivée, vous pouvez ajouter explicitement un argument à l'attribut "sandbox".
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
Il existe plusieurs valeurs possibles pour la spécification sandbox, y compris allow-forms, allow-same-origin, allow-popups et plus encore.
Règles sur les autorisations
À mesure que des fonctionnalités de plus en plus puissantes ont été développées pour le Web, des règles d'autorisation ont été créées pour gérer les autorisations de chacune d'elles. Une règle d'autorisation peut être appliquée à un site parent et au contenu d'un 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 frames cloisonnés
Un cadre clôturé (<fencedframe>) est un élément HTML proposé pour le contenu intégré, semblable à un iframe. Contrairement à un iFrame, un Fenced Frame limite la communication avec son contexte d'intégration pour permettre au frame d'accéder aux données multisites sans les partager avec le contexte d'intégration. De même, les données first party sur la page du parent ne peuvent pas être partagées avec le cadre isolé.
<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 premier niveau partitionnent 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 que certains documents soient affichés dans un cadre clôturé.
Par exemple, un frame isolé sera créé pour l'annonce gagnante de l'enchère de l'API FLEDGE. L'API FLEDGE fournira une source opaque, un schéma URN indépendant de l'emplacement, qui peut s'afficher dans un cadre clôturé. Les sources opaques permettent aux sites d'afficher du contenu sans révéler l'URL de la source de l'annonce au propriétaire du site.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
En fin de compte, les fenced frames ne remplaceront pas les iframes. Vous n'aurez pas à les utiliser. Les cadres clôturés sont proposés pour un cadre plus privé à utiliser lorsque des données provenant de différentes partitions de premier niveau doivent être affichées sur la même page.
Intégrer avec des portails
Portal (<portal>) est un élément HTML proposé avec un contexte de navigation indépendant, 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 les intégrations
Au cours de l'histoire du Web, un certain nombre d'éléments HTML et d'API ont été proposés pour intégrer du contenu. Pendant un certain temps, il était courant de créer des sites avec plusieurs éléments <frame> et un élément <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.
À une époque, les technologies de plug-in, telles que l'élément Java <applet>, étaient également 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 les plug-ins Flash, mais aussi d'autres éléments HTML (comme les iFrames).
D'autres éléments, tels que <canvas>, <audio>, <video> et <svg>, ont rendu les éléments <object> et <applet> obsolètes.
Bien que <object> et <embed> ne soient pas encore officiellement obsolètes, il est préférable de les éviter, surtout parce qu'ils présentent des comportements étranges.
<applet> a été supprimé de la spécification HTML en 2017.
Conclusion
Vous pouvez intégrer du contenu de manière sécurisée 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 à vous informer de l'avancement de la proposition concernant les cadres clôturés.