Le contenu intégré est le meilleur moyen de retenir les utilisateurs sur votre site, tout en partageant le contenu 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.
Aujourd'hui plus que jamais, il est primordial que nos sites restent sécurisés lorsque nous y intégrons du contenu.
Il existe plusieurs façons pour les développeurs d'intégrer du contenu sur un site Web. 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 seule URL. Il est déjà possible d'ajouter l'attribut sandbox pour renforcer la sécurité d'un iFrame.
Vous pouvez également utiliser l'élément HTML proposé:
<fencedframe>est proposé pour intégrer du contenu tiers tout en protégeant la confidentialité.<portal>est proposé pour des transitions de page plus fluides.
Poursuivez votre lecture pour découvrir comment améliorer la sécurité de votre contenu intégré.
Intégrer à des iFrames
Les iFrames peuvent être utilisés pour toutes sortes de cas d'utilisation, tels que 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);
})
Renforcer la sécurité avec l'attribut sandbox
Si du contenu malveillant est déployé dans un iFrame, il est possible que des actions inattendues (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 de bac à sable.
<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, etc.
Règles relatives aux autorisations
À mesure que des fonctionnalités de plus en plus puissantes sont développées pour le Web, des règles d'autorisation ont été créées afin de gérer les autorisations pour chacune d'elles. Une règle d'autorisation peut être appliquée à un site parent et au contenu 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 cloisonné (<fencedframe>) est un élément HTML proposé pour du contenu intégré, semblable à un iFrame. Contrairement à un iFrame, un frame cloisonné limite la communication avec son contexte d'intégration afin de lui permettre d'accéder aux données intersites sans les partager avec le contexte d'intégration. De même, les données first party sur la page parent ne peuvent pas être partagées avec le frame cloisonné.
<fencedframe src="https://3rd.party.example"></fencedframe>
Fenced Frames est une proposition de la Privacy Sandbox qui suggère que les sites de premier niveau 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 de la Privacy Sandbox peuvent exiger que certains documents s'affichent dans un frame cloisonné.
Par exemple, un frame cloisonné sera créé pour le gagnant de l'enchère publicitaire de l'API FLEDGE. L'API FLEDGE fournit une source opaque, un schéma URN indépendant de l'emplacement, qui peut s'afficher dans une image cloisonnée. Les sources opaques permettent aux sites d'afficher du contenu 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>
En fin de compte, les cadres cloisonnés ne remplaceront pas les cadres iFrame. Vous n'aurez pas besoin de les utiliser. Les cadres cloisonnés sont proposés pour un frame plus privé lorsque les données de différentes partitions de niveau supérieur doivent être affichées sur la même page.
Intégrer à 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 des pages. Les portails intègrent du contenu de type iFrame, 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 ce dernier.
Les portails offrent la faible complexité d'une application multipage avec les transitions fluides d'une application monopage. Vous pouvez animer ces transitions pour remplacer rapidement le contenu de la fenêtre du navigateur.
<portal src="https://example.com/"></portal>
La spécification du portail n'en est qu'à ses débuts.
Autres éléments HTML utilisés pour les intégrations
Au cours de l'historique 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. Il était donc difficile de partager des liens vers des contenus sur le site. Ces API sont depuis obsolètes.
Autrefois, des technologies de plug-in, telles que l'élément Java <applet>, étaient utilisées pour couvrir d'autres cas d'utilisation. Cet élément a été remplacé par l'élément <object>. Ces deux éléments étaient généralement utilisés pour afficher les plug-ins Flash, mais également pour afficher d'autres éléments HTML (semblables aux 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, d'autant plus 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 à partager l'état d'avancement de la proposition de Fenced Frames.
Image principale de Jackson So