Protéger votre site avec la politique des fonctionnalités

L'une des fonctionnalités de la plate-forme Web mise en évidence lors du récent Chrome Dev Summit était la politique des fonctionnalités, qui vise à "permettre aux auteurs de sites d'activer et de désactiver de manière sélective l'utilisation de diverses fonctionnalités et API du navigateur". Dans cet article, je vais jeter un œil à ce que cela signifie pour les développeurs Web, avec quelques exemples pratiques.

Dans son article d'introduction sur le site Google Developers, Eric Bidelman décrit la politique relative aux fonctionnalités comme suit :

"Les politiques de fonctionnalités elles-mêmes sont de petits accords opt-in entre le développeur et le navigateur qui peuvent aider à favoriser nos objectifs de création (et de maintenance) d'applications Web de haute qualité."

La spécification a été développée chez Google par dans le cadre de l'activité Web Platform Incubator Group. L'objectif de la politique des fonctionnalités est que nous, en tant que développeurs Web, puissions déclarer notre utilisation d'une fonctionnalité de la plate-forme Web, explicitement au navigateur. Ce faisant, nous concluons un accord sur notre utilisation ou non de cette fonctionnalité particulière. Sur cette base, le navigateur peut agir pour bloquer certaines fonctionnalités ou nous signaler qu'une fonctionnalité qu'il ne s'attendait pas à voir est utilisée.

Les exemples pourraient inclure :

1. J'embarque une iframe et je ne souhaite pas que le site embarqué puisse accéder à la caméra de mon visiteur ;
2. Je souhaite détecter les situations dans lesquelles des images non optimisées sont déployées sur mon site via le CMS ;
3. De nombreux développeurs travaillent sur mon projet et j'aimerais savoir s'ils utilisent des API obsolètes telles que document.write .

Toutes ces choses peuvent être suivies, bloquées ou signalées dans le cadre de la politique des fonctionnalités.

Comment utiliser la politique des fonctionnalités

Pour utiliser la politique de fonctionnalité, le navigateur doit savoir deux choses : pour quelle fonctionnalité vous créez une stratégie et comment vous souhaitez que cette fonctionnalité soit gérée.

 Feature-Policy: <directive> <allowlist>

La <directive> est le nom de la fonctionnalité sur laquelle vous définissez la stratégie.

La liste actuelle des fonctionnalités (provenant de la présentation donnée lors du Chrome Dev Summit) est la suivante :

• accéléromètre
• détecteur de lumière ambiante
• lecture automatique
• appareil photo
• document-écriture
• média crypté
• plein écran
• géolocalisation
• gyroscope
• animations de mise en page
• chargement paresseux
• formats d'image hérités
• magnétomètre
• midi
• images-surdimensionnées
• Paiement
• image dans l'image
• conférencier
• script de synchronisation
• sync-xhr
• images non optimisées
• média non dimensionné
• USB
• défilement vertical
• réalité virtuelle

La <allowlist> détaille comment la fonctionnalité peut être utilisée - le cas échéant - et prend une ou plusieurs des valeurs suivantes.

• *
  La politique la plus libérale, indiquant que la fonctionnalité sera autorisée dans ce document, et toutes les iframes provenant de ce domaine ou d'ailleurs. Ne peut être utilisé que comme valeur unique car cela n'a aucun sens de tout activer et également de transmettre une liste de domaines, par exemple.
• self
  La fonctionnalité sera disponible dans le document et tous les iframes, cependant, les iframes doivent avoir la même origine.
• src
  Applicable uniquement lors de l'utilisation d'un attribut iframe allow . Cela autorise une fonctionnalité tant que le document qui y est chargé provient de la même origine que l'URL dans l'attribut src de l'iframe.
• none
  Désactive la fonctionnalité pour le document et tous les iframes imbriqués. Ne peut être utilisé que comme valeur unique.
• <origin(s)>
  La fonctionnalité est autorisée pour des origines spécifiques ; cela signifie que vous pouvez spécifier une liste de domaines où la fonctionnalité est autorisée. La liste des domaines est séparée par des espaces.

Il existe deux méthodes par lesquelles vous pouvez activer les stratégies de fonctionnalités sur votre site : vous pouvez envoyer un en-tête HTTP ou utiliser l'attribut allow sur un iframe.

En-tête HTTP

L'envoi d'un en-tête HTTP signifie que vous pouvez activer une stratégie de fonctionnalité pour la page ou le site entier définissant cet en-tête, ainsi que tout ce qui est intégré dans le site. Les en-têtes peuvent être définis pour l'ensemble de votre site sur le serveur Web ou peuvent être envoyés à partir de votre application.

Par exemple, si je voulais empêcher l'utilisation de l'API de géolocalisation et que j'utilisais le serveur web NGINX, je pourrais modifier les fichiers de configuration de mon site dans NGINX pour ajouter l'en-tête suivant, ce qui empêcherait tout document de mon site et tout iframe intégré à l'aide de l'API de géolocalisation.

 add_header Feature-Policy "geolocation none;";

Plusieurs politiques peuvent être définies dans un seul en-tête. Pour empêcher la géolocalisation et le vibreur mais autoriser unsized-media du domaine example.com , je pourrais définir ce qui suit :

 add_header Feature-Policy "vibrate none; geolocation none; unsized-media https://example.com;";

L'attribut allow sur les iFrames

Si nous sommes principalement concernés par ce qui se passe avec le contenu d'un iframe, nous pouvons utiliser la politique de fonctionnalité sur l'iframe lui-même ; cela bénéficie d'un support de navigateur légèrement meilleur au moment de la rédaction avec Chrome et Safari prenant en charge cette utilisation.

Si j'intègre un site et que je ne souhaite pas que ce site utilise des API de géolocalisation, de caméra ou de microphone, mon iframe ressemblera à l'exemple suivant :

 <iframe allow="geolocation 'none'; camera 'none'; microphone 'none'">

Vous connaissez peut-être déjà les attributs individuels qui contrôlent le contenu des iframes allowfullscreen , allowpaymentrequest et allowusermedia . Ceux-ci peuvent être remplacés par l'attribut d' allow de la politique de fonctionnalité et, pour des raisons de compatibilité du navigateur, vous pouvez utiliser les deux sur un iframe. Si vous utilisez les deux attributs, le plus restrictif s'appliquera. L'article de Google montre un exemple d'iframe qui utilise allowfullscreen - ce qui signifie que l'iframe est autorisé à entrer en plein écran, mais qu'ensuite une politique de fonctionnalité conflictuelle de fullscreen none . Ceux-ci sont en conflit, donc la politique la plus restrictive l'emporte et cet iframe ne serait pas autorisé à entrer en plein écran.

 <iframe allowfullscreen allow="fullscreen 'none'" src="...">

L'élément iframe possède également un attribut sandbox conçu pour gérer la prise en charge de nombreuses fonctionnalités. Cette fonctionnalité a également été ajoutée à la politique de sécurité du contenu avec une valeur de sandbox à sable qui désactive toutes les fonctionnalités du bac à sable, qui peuvent ensuite être réactivées de manière sélective. Il existe un croisement entre les fonctionnalités du bac à sable et celles contrôlées par la stratégie de fonctionnalité, et la stratégie de fonctionnalité ne cherche pas à dupliquer les valeurs déjà couvertes par le bac à sable. Cependant, il résout certaines des limites du bac à sable en adoptant une approche plus fine de la gestion de ces politiques, plutôt que de tout désactiver globalement comme un seul grand ensemble de politiques.

Politique de fonctionnalité et API de création de rapports

Les violations de la politique de fonctionnalité peuvent être signalées via l'API de rapport, ce qui signifie que vous pouvez développer un ensemble complet de politiques de suivi de l'utilisation des fonctionnalités sur votre site. Cela serait complètement transparent pour vos utilisateurs, mais vous donnerait une énorme quantité d'informations sur la façon dont les fonctionnalités étaient utilisées.

Prise en charge du navigateur pour la stratégie de fonctionnalités

Actuellement, la prise en charge de la politique de fonctionnalités par les navigateurs est limitée à Chrome, cependant, dans de nombreux cas où vous utilisez la politique de fonctionnalités pendant le développement et lors de la prévisualisation des sites, cela ne pose pas nécessairement de problème.

Bon nombre des cas d'utilisation que je vais décrire ci-dessous sont utilisables dès maintenant, sans causer d'impact aux visiteurs du site qui utilisent des navigateurs sans support.

Quand utiliser la politique de fonctionnalité

J'aime vraiment l'idée de pouvoir utiliser la politique des fonctionnalités pour aider à sauvegarder les décisions prises lors du développement du site. Des décisions qui peuvent bien être consignées dans des documents comme un budget de performance, ou dans le cadre d'un audit RGPD, mais qui deviennent alors quelque chose qu'il ne faut pas oublier de préserver tout au long de la vie du site. Ce n'est pas toujours facile lorsque plusieurs personnes travaillent sur un site ; des personnes qui n'ont peut-être pas été impliquées lors de cette prise de décision initiale, ou qui peuvent simplement ne pas être au courant des exigences. Nous pensons beaucoup aux tiers qui parviennent à impacter notre site d'une manière ou d'une autre, cependant, nos sites ont parfois besoin d'être protégés de nous-mêmes !

Garder un œil sur les tiers

Vous pouvez empêcher un site tiers d'accéder à la caméra ou au microphone à l'aide d'une stratégie de fonctionnalité sur l'iframe avec l'attribut allow . Si la raison de l'intégration de ce site n'a rien à voir avec ces fonctionnalités, leur désactivation signifie que le site ne peut jamais commencer à les demander. Cela pourrait ensuite être lié à vos processus pour assurer la conformité GDPR. Lorsque vous auditez l'impact de votre site sur la confidentialité, vous pouvez intégrer des processus pour verrouiller l'accès des tiers au moyen d'une politique de fonctionnalités, ce qui vous offre, à vous et à vos visiteurs, une sécurité et une tranquillité d'esprit supplémentaires.

Cette utilisation repose sur la prise en charge par le navigateur de la politique de fonctionnalité pour bloquer l'utilisation. Cependant, vous pouvez utiliser le mode de rapport Feature Policy pour vous informer de l'utilisation de ces API si le tiers changeait ce qu'il allait faire. Cela vous donnerait un avertissement très rapide - essentiellement dès que la première personne utilisant Chrome accède au site.

Activation sélective des fonctionnalités

Nous pourrions également souhaiter activer de manière sélective certaines fonctionnalités qui sont normalement bloquées. Peut-être souhaitons-nous autoriser une iframe chargeant du contenu depuis un autre site à utiliser la fonction de géolocalisation dans le navigateur. Chrome par défaut bloque cela, mais si vous chargez du contenu à partir d'un site de confiance, vous pouvez activer la demande d'origine croisée à l'aide de la politique de fonctionnalités. Cela signifie que vous pouvez activer en toute sécurité des fonctionnalités lors du chargement de contenu à partir d'un autre domaine sous votre contrôle.

Saisir l'utilisation d'API obsolètes et de fonctionnalités peu performantes

La stratégie de fonctionnalité peut être exécutée en mode rapport uniquement. Il peut ensuite suivre l'utilisation de certaines fonctionnalités et vous faire savoir quand elles sont trouvées sur le site. Cela peut être utile dans de nombreux scénarios. Si vous avez un site très volumineux avec beaucoup de code hérité, l'activation de la politique des fonctionnalités vous aiderait à localiser les endroits qui nécessitent une attention particulière. Si vous travaillez avec une grande équipe (en particulier si les développeurs utilisent souvent des bibliothèques de code tierces), la politique de fonctionnalité peut détecter des éléments que vous préférez ne pas voir sur le site.

Gérer les images mal optimisées

Alors que la plupart des articles que j'ai vus sur la politique des fonctionnalités se concentrent sur les aspects de sécurité et de confidentialité, les fonctionnalités d'optimisation d'image m'ont vraiment séduit, en tant que personne qui traite beaucoup de contenu généré par des utilisateurs techniques et non techniques. La politique de fonctionnalité peut être utilisée pour aider à protéger l'expérience utilisateur ainsi que les performances de votre site en empêchant le téléchargement d'images trop volumineuses ou non optimisées par les visiteurs.

Dans un monde idéal, votre CMS s'occuperait de la gestion des images, en veillant à ce que les images soient judicieusement redimensionnées, optimisées pour le Web et le contexte dans lequel elles seront affichées. Cependant, la vraie vie est rarement ce monde idéal, et donc parfois le travail de redimensionnement et l'optimisation des images est laissée aux éditeurs de contenu pour s'assurer qu'ils ne téléchargent pas d'énormes images sur le Web. C'est particulièrement un problème si vous utilisez un CMS statique sans couche de gestion de contenu au-dessus. Même en tant que personne technique, il est très facile d'oublier de redimensionner cette capture d'écran géante ou cette image de caméra que vous avez insérée dans un dossier en tant qu'espace réservé.

Actuellement derrière un drapeau dans Chrome se trouvent des fonctionnalités qui peuvent aider. L'idée derrière ces fonctionnalités est de mettre en évidence les images problématiques afin qu'elles puissent être corrigées - sans casser complètement le site.

La unsized-media non dimensionné recherche les images ou les vidéos dont la taille n'est pas définie dans le code HTML ou CSS. Lorsqu'un élément multimédia non dimensionné se charge, il peut entraîner la redistribution du contenu de la page.

Afin d'empêcher tout média non dimensionné d'être ajouté au site, définissez l'en-tête suivant. Les médias seront alors affichés avec une taille par défaut de 300×150 pixels. Vous verrez votre site se charger de petits médias, et réaliserez que vous avez un problème à régler.

 Feature-Policy: unsized-media 'none'

Voir une démo (nécessite Chrome Canary avec les fonctionnalités expérimentales de la plate-forme Web).

La stratégie de fonctionnalité oversized-images vérifie que les images ne sont pas beaucoup plus grandes que leur conteneur. Si c'est le cas, un espace réservé sera affiché à la place. Cette politique est extrêmement utile pour vérifier que vous n'envoyez pas d'énormes images de bureau à vos utilisateurs mobiles.

 Feature-Policy: oversized-images 'none'

Voir une démo (nécessite Chrome Canary avec les fonctionnalités expérimentales de la plate-forme Web).

La unoptimized-images vérifie si la taille des données des images en octets n'est pas supérieure à 0,5 fois plus grande que sa zone de rendu en pixels. Si cette politique est activée et que les images la violent, un espace réservé sera affiché à la place de l'image.

 Feature-Policy: unoptimized-images 'none'

Voir une démo (nécessite Chrome Canary avec les fonctionnalités expérimentales de la plate-forme Web).

Test et création de rapports sur la politique des fonctionnalités

Chrome DevTools affichera un message pour vous informer que certaines fonctionnalités ont été bloquées ou activées par une politique de fonctionnalité. Si vous avez activé la politique des fonctionnalités sur votre site, vous pouvez vérifier que cela fonctionne.

La prise en charge de la politique de fonctionnalité a également été ajoutée au site des en-têtes de sécurité, ce qui signifie que vous pouvez les vérifier avec des en-têtes tels que la politique de sécurité du contenu sur votre site - ou d'autres sites sur le Web.

Il existe une extension Chrome DevTools qui vous permet d'activer et de désactiver différentes politiques de fonctionnalité (également un excellent moyen de vérifier vos pages sans avoir à configurer d'en-tête).

Si vous souhaitez intégrer vos politiques de fonctionnalités à l'API de création de rapports, vous trouverez plus d'informations sur la manière de procéder ici.

Lectures complémentaires et ressources

J'ai trouvé un certain nombre de ressources, dont beaucoup que j'ai utilisées lors de la recherche de cet article. Ceux-ci devraient vous donner tout ce dont vous avez besoin pour commencer à implémenter la politique de fonctionnalités dans vos propres applications. Si vous utilisez déjà la politique de sécurité du contenu, cela semble être une étape logique supplémentaire vers le contrôle du fonctionnement de votre site avec le navigateur afin de garantir la sécurité et la confidentialité des personnes utilisant votre site. Vous avez l'avantage supplémentaire de pouvoir utiliser la politique des fonctionnalités pour vous aider à rester au courant des éléments nuisibles aux performances ajoutés à votre site au fil du temps.

• Spécification de la stratégie de fonctionnalité
• Présentation de la politique relative aux fonctionnalités
• Vue depuis le sommet des développeurs Chrome
• Politique relative aux fonctionnalités sur MDN
• Puis-je utiliser la politique des fonctionnalités
• Démos de politique de fonctionnalités
• Configurer les en-têtes Feature-Policy, Referrer-Policy et Content Security Policy dans Nginx