Protéger votre site avec une politique de fonctionnalités

Une stratégie de fonctionnalités peut protéger votre site contre les tiers en utilisant des API qui ont des implications en matière de sécurité et de confidentialité, ainsi que de votre propre équipe qui ajoute des API obsolètes ou des images mal optimisées. Trouver comment.

L'une des fonctionnalités de la plate-forme Web soulignées lors du récent Sommet sur le développement de Chrome était la stratégie de fonctionnalités, qui visait à «permettre aux auteurs de sites d'activer et de désactiver de manière sélective l'utilisation de diverses fonctionnalités de navigateur et d'API». Regardez ce que cela signifie pour les développeurs Web, avec quelques exemples pratiques.

Dans son article d'introduction sur le site des développeurs de Google, Eric Bidelman décrit la politique de fonctionnalité comme suit:

«Les règles de fonctionnalité elles-mêmes. Il existe peu d'accords optionnels entre développeur et navigateur qui peuvent nous aider à atteindre nos objectifs de création (et de maintenance) d'applications Web de haute qualité. ”

La ​​spécification a été élaborée par Google dans le cadre de l'activité du groupe d'incubateurs de plate-forme Web. L'objectif de Feature Policy est pour nous, développeurs Web, de pouvoir énoncer explicitement notre utilisation d'une fonctionnalité de plate-forme Web au navigateur. Ce faisant, nous concluons un accord sur notre utilisation ou non de cette fonctionnalité. Sur cette base, le navigateur peut bloquer certaines fonctionnalités ou nous signaler qu'une fonctionnalité qu'il ne s'attendait pas à voir est utilisée.

Les exemples peuvent inclure:

1. J'intègre une iframe et je ne souhaite pas le site intégré pour pouvoir accéder à la caméra de mon visiteur;
2. Je souhaite capturer les situations où des images non optimisées sont déployées sur mon site via le système de gestion de contenu;
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 stratégie de fonctionnalité.

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

 Feature-Policy:  

The est le nom de la fonctionnalité sur laquelle vous définissez la politique.

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

• accéléromètre
• capteur de lumière ambiante
• autoplay
• ] camera
• document-write
• support crypté
• plein écran
• géolocalisation
• gyroscope
• layout-animations
• lazyload
• legacy-image-images
• magnétomètre
• magnétomètre
• ] midi
• images surdimensionnées
• paiement
• image dans l’image
• haut-parleur
• sync-script
• sync-xhr
• images non optimisées
• unsized-media
• ] usb
• défilement vertical
• vr

Le document explique comment cette fonction peut être utilisée – le cas échéant – et prend une ou plusieurs des valeurs suivantes:

• * [19659048] La politique la plus libérale, indiquant que la fonctionnalité sera autorisée dans ce document, ainsi que tous les iframes, qu'ils appartiennent à ce domaine ou ailleurs. Ne peut être utilisé que comme une valeur unique, car il n’a aucun sens de tout activer mais également de transmettre une liste de domaines, par exemple.
• self
  La fonctionnalité sera disponible dans le document et dans tous les iframes, toutefois, les iframes doivent avoir la même origine.
• src
  Uniquement applicable lors de l'utilisation d'un attribut iframe allow . Cela permet à une fonctionnalité tant que le document chargé y a une origine identique à celle de l’URL de l’attribut src de l’iframe.
• none
  Désactive la fonctionnalité du document et les iframes imbriqués. Ne peut être utilisé que comme valeur unique.
• 
  Cette fonction est autorisée pour des origines spécifiques; Cela signifie que vous pouvez spécifier une liste de domaines dans lesquels la fonctionnalité est autorisée. La liste des domaines est séparée par des espaces.

Vous pouvez activer les stratégies de fonctionnalité sur votre site de deux manières: vous pouvez envoyer un en-tête HTTP ou utiliser l'attribut allow sur un iframe. [19659057] L'envoi d'un en-tête HTTP signifie que vous pouvez activer une stratégie de fonctionnalité pour la page ou l'intégralité du site en définissant cet en-tête, ainsi que tout élément intégré au site. Les en-têtes peuvent être définis pour l'ensemble de votre site sur le serveur Web ou peuvent être envoyés depuis 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 pouvais éditer le les fichiers de configuration de mon site dans NGINX afin d'ajouter l'en-tête suivant, ce qui empêcherait l'utilisation de l'API de géolocalisation dans les documents de mon site et dans les iframe incorporés.

 politique_de_lorsation "géolocalisation aucune;"; 

Plusieurs politiques peut être défini dans un seul en-tête. Pour éviter la géolocalisation et les vibrations, mais autoriser les médias non dimensionnés du domaine example.com Je pourrais définir ce qui suit:

 add_header Feature-Policy "vibreur aucun; géolocalisation aucun; non spécifié - media http://example.com; "; 

Les permettent les attributs sur les iFrames

Si nous nous intéressons principalement à ce qui se passe avec le contenu dans une iframe, nous pouvons utiliser la politique de fonction sur la iframe lui-même; cela profite d'une prise en charge légèrement meilleure du navigateur au moment de l'écriture, 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 les API de géolocalisation, de caméra ou de microphone, mon iframe ressemblera à exemple suivant:

Vous connaissez peut-être déjà les attributs individuels qui contrôlent le contenu des iframes allowfullscreen permettentpaiementquestment et allowecermedia . Ceux-ci peuvent être remplacés par l'attribut Feature Policy allow . Pour des raisons de compatibilité de navigateur, vous pouvez utiliser les deux sur une iframe. Si vous utilisez les deux attributs, le plus restrictif s'appliquera. L'article de Google montre un exemple d'iframe utilisant allowfullscreen . Autrement dit, l'iframe est autorisé à accéder au plein écran, mais à une politique de fonctionnalité en conflit de plein écran none . Celles-ci entrent en conflit, de sorte que la politique la plus restrictive l'emporte et que cette iframe ne serait pas autorisée à passer en plein écran.

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 qui désactive toutes les fonctionnalités de sandbox, qui peuvent ensuite être réactivées de manière sélective. Il existe un chevauchement 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 stratégies, plutôt que de tout désactiver globalement en tant que grand ensemble de stratégies.

Fonction API et création de rapports API

Les violations de règles peuvent être signalées via l'API de rapport ce qui signifie que vous pouvez développer un ensemble complet de règles permettant de suivre l'utilisation des fonctionnalités sur votre site. Cela serait totalement transparent pour vos utilisateurs, mais vous fournirait une énorme quantité d'informations sur l'utilisation des fonctionnalités.

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

Actuellement, la prise en charge du navigateur pour la fonctionnalité est limitée à Toutefois, dans de nombreux cas où vous utilisez la stratégie de fonctionnalités lors du développement et lors de la prévisualisation des sites, ce n'est pas nécessairement un problème.

La plupart des cas d'utilisation que je vais décrire ci-dessous sont utilisables maintenant, sans que cela ait un impact sur les visiteurs du site. qui utilisent des navigateurs sans assistance.

Quand utiliser la stratégie de fonctionnalité

J'aime beaucoup l'idée de pouvoir utiliser la stratégie de fonctionnalité pour aider à sauvegarder les décisions prises lors du développement du site. Les décisions qui peuvent bien être consignées dans des documents tels que le budget de performance ou dans le cadre d’un audit GDPR, mais qui deviennent alors un élément 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 participé à la prise de décision initiale ou qui peuvent simplement ne pas connaître les exigences. Nous pensons beaucoup aux tiers qui parviennent à avoir un impact sur notre site, cependant, parfois, nos sites doivent être protégés!

Surveiller les tiers

Vous pourriez empêcher un site tiers d'accéder à la caméra ou au microphone. l'utilisation 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é au RGP . Lors de l'audit de l'impact de votre site sur la confidentialité, vous pouvez créer des processus permettant de verrouiller l'accès des tiers à l'aide de la politique de fonctionnalités, ce qui vous procure, à vous et à vos visiteurs, une sécurité et une tranquillité d'esprit accrues.

Cet usage se fient à la prise en charge par le navigateur de la stratégie de fonctionnalité pour bloquer l’utilisation. Toutefois, vous pouvez utiliser le mode de génération de rapports de stratégie d'objet pour vous informer de l'utilisation de ces API si le tiers modifiait ses tâches. Cela vous donnerait un aperçu très rapide, essentiellement dès que le premier utilisateur de Chrome serait sur le site.

Activation sélective des fonctionnalités

Nous pourrions également vouloir activer de manière sélective certaines fonctionnalités qui sont normalement bloquées. Peut-être souhaitons-nous permettre à un iframe chargeant du contenu provenant d'un autre site d'utiliser la fonctionnalité de géolocalisation dans le navigateur. Chrome le bloque par défaut, mais si vous chargez du contenu depuis un site de confiance, vous pouvez activer la demande d’origine croisée à l’aide de la stratégie de fonctionnalité. Cela signifie que vous pouvez activer les fonctionnalités en toute sécurité lorsque vous chargez du contenu provenant d'un autre domaine sous votre contrôle.

Utilisation attrayante 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 avertir lorsqu'elles se trouvent sur le site. Cela peut être utile dans de nombreux scénarios. Si vous avez un très grand site avec beaucoup de code hérité, l'activation de la stratégie de fonctionnalité vous aiderait à localiser les lieux 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 stratégie de fonctionnalité peut intercepter des éléments que vous préférez ne pas voir sur le site.

Traitement des images mal optimisées

Parmi les articles que j'ai vus sur Feature Policy se concentrent sur les aspects de sécurité et de confidentialité, les fonctionnalités relatives à l'optimisation des images m'ont vraiment attirée, car je traite beaucoup de contenu généré par des utilisateurs techniques et non techniques. La stratégie de fonctionnalités peut être utilisée pour protéger l'expérience utilisateur ainsi que les performances de votre site en empêchant les visiteurs de télécharger des images trop volumineuses - ou non optimisées -.

Dans un monde idéal, votre CMS gérerait la gestion des images, les images ont été sensiblement redimensionnées, optimisées pour le Web et le contexte dans lequel elles seront affichées. Cependant, la vie réelle est rarement ce monde idéal, de sorte que le redimensionnement et l'optimisation des images sont parfois laissés à la charge des éditeurs de contenu pour s'assurer qu'ils ne téléchargent pas images énormes sur le web. Cela est particulièrement problématique si vous utilisez un CMS statique sans couche de gestion de contenu. Même en tant que technicien, il est très facile d'oublier de redimensionner cette capture d'écran ou cette image d'appareil photo géante que vous avez insérée dans un dossier en tant qu'espace réservé.

Actuellement, un indicateur dans Chrome est utile. 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 politique de fonctionnalité non-dimensionnée recherche des images ou des vidéos sans taille. définir dans le HTML ou CSS. Lors du chargement d’un élément multimédia non dimensionné, le contenu de la page peut être refondu.

Pour éviter l’ajout de tout média non dimensionné au site, définissez l’en-tête suivant. Le média sera alors affiché avec une taille par défaut de 300 × 150 pixels. Vous verrez votre site se charger avec de petits supports et vous réaliserez que vous avez un problème à résoudre.

 Feature-Policy: unsized-media 'none'

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

Les images surdimensionnées vérifient que les images ne sont pas trop grandes. récipient. S'ils le sont, 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.

 Politique de fonctionnalité: images surdimensionnées 'aucune'

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

La règle unoptimized-images vérifie si la taille des données des images en octets n’est pas plus de 0,5 fois plus grand que sa zone de rendu en pixels. Si cette stratégie est activée et que les images le violent, un espace réservé s'affiche à la place de l'image.

 Feature-Policy: non optimisé-images 'none'

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

Test et création de rapports sur la stratégie relative aux fonctionnalités

Chrome DevTools affiche un message vous informant que certaines fonctionnalités ont été utilisées. bloqué ou activé par une stratégie de fonctionnalité. Si vous avez activé la stratégie de fonctionnalité sur votre site, vous pouvez vérifier que cela fonctionne.

La prise en charge de la stratégie de fonctionnalité a également été ajoutée au site Security Headers ce qui signifie que vous pouvez les vérifier en même temps. des en-têtes tels que la stratégie de sécurité du contenu de votre site - ou d’autres sites sur le Web.

Il existe une Chrome DevTools Extension qui vous permet d’activer ou de désactiver différentes stratégies de fonctionnalité (également un excellent moyen de vérifier votre

Si vous souhaitez intégrer vos stratégies de composant à l’API de reporting, vous trouverez des informations complémentaires sur la procédure à suivre ici . [19659100] Lectures complémentaires et ressources

J'ai trouvé un certain nombre de ressources, dont beaucoup ont été utilisées lors de la recherche dans cet article. Celles-ci devraient vous fournir tout ce dont vous avez besoin pour commencer à mettre en œuvre la stratégie de fonctionnalités dans vos propres applications. Si vous utilisez déjà la stratégie de sécurité du contenu, cela semble une étape logique supplémentaire dans 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 en outre l'avantage de pouvoir utiliser la stratégie de fonctionnalité pour vous aider à maîtriser les éléments nuisant à la performance ajoutés à votre site au fil du temps.

(il)