Fermer

décembre 12, 2018

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

Protéger votre site avec une politique de fonctionnalités - Smashing Magazine


À propos de l'auteur

Rachel Andrew est non seulement la rédactrice en chef de Smashing Magazine, mais également une développeuse Web, une écrivaine et une conférencière. Elle est l'auteur de nombreux ouvrages, notamment…
Pour en savoir plus sur Rachel

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: