Présentation des règles relatives aux caractéristiques

Résumé

Les règles de fonctionnalité permettent aux développeurs Web d'activer, de désactiver et de modifier de manière sélective le comportement de certaines API et fonctionnalités Web dans le navigateur. C'est comme CSP, mais au lieu de contrôler la sécurité, il contrôle les fonctionnalités.

Les règles relatives aux fonctionnalités sont de petits accords d'acceptation entre le développeur et le navigateur, qui peuvent nous aider à atteindre nos objectifs de création (et de maintenance) d'applications Web de haute qualité.

Introduction

Créer pour le Web est une aventure ardue. Il est assez difficile de créer une application Web de pointe, qui optimise les performances et respecte les bonnes pratiques les plus récentes. Il est encore plus difficile de conserver cette expérience de qualité au fil du temps. Au fur et à mesure que votre projet évolue, les développeurs le rejoignent, de nouvelles fonctionnalités arrivent et le codebase s'agrandit. L'expérience géniale que vous avez acquise peut commencer à se détériorer et l'expérience utilisateur commence à en souffrir ! Les règles relatives aux fonctionnalités sont conçues pour vous aider à rester sur la bonne voie.

Elles vous permettent d'accepter un ensemble de "règles" que le navigateur applique à des fonctionnalités spécifiques utilisées sur votre site. Ces règles limitent les API auxquelles le site peut accéder ou modifient le comportement par défaut du navigateur pour certaines fonctionnalités.

Voici des exemples de ce que vous pouvez faire avec le règlement sur les caractéristiques:

  • Modifiez le comportement par défaut de autoplay sur les vidéos mobiles et tierces.
  • Empêchez un site d'utiliser des API sensibles telles que camera ou microphone.
  • Autorisez les iFrames à utiliser l'API fullscreen.
  • Bloquez l'utilisation des API obsolètes telles que les requêtes XHR et document.write() synchrones.
  • Assurez-vous que les images sont correctement dimensionnées (par exemple, pour éviter le thrashing de mise en page) et qu'elles ne sont pas trop grandes pour la fenêtre d'affichage (par exemple, vous gaspillez la bande passante de l'utilisateur).

Les règles sont un contrat conclu entre le développeur et le navigateur. Elles informent le navigateur de l'intention du développeur et nous aident à rester honnête lorsque notre application tente de déraper et de faire quelque chose de mal. Si le site ou le contenu tiers intégré tente d'enfreindre l'une des règles présélectionnées par le développeur, le navigateur remplace le comportement par une meilleure expérience utilisateur ou bloque complètement l'API.

Utiliser une règle de caractéristiques

Une règle de caractéristiques permet de contrôler les fonctionnalités de deux façons:

  1. Via l'en-tête HTTP Feature-Policy.
  2. Avec l'attribut allow sur les iFrames.

Le moyen le plus simple d'utiliser une règle de fonctionnalité consiste à envoyer l'en-tête HTTP Feature-Policy avec la réponse d'une page. La valeur de cet en-tête est une règle ou un ensemble de règles que le navigateur doit respecter pour une origine donnée:

Feature-Policy: <feature> <allow list origin(s)>

La liste d'autorisation de l'origine peut avoir plusieurs valeurs différentes:

  • *: cette fonctionnalité est autorisée dans les contextes de navigation de premier niveau et dans les contextes de navigation imbriqués (iFrame).
  • 'self': cette fonctionnalité est autorisée dans les contextes de navigation de premier niveau et les contextes de navigation imbriquée de même origine. Elle n'est pas autorisée dans les documents multi-origines dans les contextes de navigation imbriquée.
  • 'none': cette fonctionnalité n'est pas autorisée dans les contextes de navigation de premier niveau et n'est pas autorisée dans les contextes de navigation imbriquée.
  • <origin(s)>: origines spécifiques pour lesquelles la règle doit être activée (par exemple, https://example.com).

Exemple

Imaginons que vous souhaitiez empêcher tout le contenu d'utiliser l'API Geolocation sur votre site. Pour ce faire, envoyez une liste d'autorisation stricte de 'none' pour la fonctionnalité geolocation:

Feature-Policy: geolocation 'none'

Si un extrait de code ou un iFrame tente d'utiliser l'API Geolocation, le navigateur la bloque. Cela s'applique même si l'utilisateur a précédemment donné l'autorisation de partager sa position.

Ne pas respecter la règle de géolocalisation définie
Non-respect de la règle de géolocalisation définie.

Dans d'autres cas, il peut être judicieux d'assouplir cette règle un peu. Nous pouvons autoriser notre propre origine à utiliser l'API Geolocation, mais empêcher les contenus tiers d'y accéder en définissant 'self' dans la liste d'autorisation:

Feature-Policy: geolocation 'self'

Attribut iFrame allow

La deuxième façon d'utiliser une règle de fonctionnalité consiste à contrôler le contenu dans un iframe. Utilisez l'attribut allow afin de spécifier une liste de règles pour le contenu intégré:

<!-- Allow all browsing contexts within this iframe to use fullscreen. -->
<iframe src="https://example.com..." allow="fullscreen"></iframe>

<!-- Equivalent to: -->
<iframe src="https://example.com..." allow="fullscreen *"></iframe>

<!-- Allow only iframe content on a particular origin to access the user's location. -->
<iframe
  src="https://another-example.com/demos/..."
  allow="geolocation https://another-example.com"
></iframe>

Qu'en est-il des attributs iFrame existants ?

Certaines fonctionnalités contrôlées par une règle de fonctionnalité disposent d'un attribut permettant de contrôler leur comportement. Par exemple, <iframe allowfullscreen> est un attribut qui permet au contenu iFrame d'utiliser l'API HTMLElement.requestFullscreen(). Il existe également les attributs allowpaymentrequest et allowusermedia pour autoriser respectivement l'API Payment Request et getUserMedia().

Dans la mesure du possible, essayez d'utiliser l'attribut allow au lieu de ces anciens attributs. Dans les cas où vous devez assurer la rétrocompatibilité, l'utilisation de l'attribut allow avec un ancien attribut équivalent est parfaitement acceptable (par exemple, <iframe allowfullscreen allow="fullscreen">). Notez simplement que la règle la plus restrictive l'emporte. Par exemple, l'iFrame suivant ne serait pas autorisé à passer en plein écran, car allow="fullscreen 'none'" est plus restrictif que allowfullscreen:

<!-- Blocks fullscreen access if the browser supports feature policy. -->
<iframe allowfullscreen allow="fullscreen 'none'" src="..."></iframe>

Contrôler plusieurs règles à la fois

Vous pouvez contrôler plusieurs fonctionnalités simultanément en envoyant l'en-tête HTTP avec une liste d'instructions de règle séparées par ;:

Feature-Policy: unsized-media 'none'; geolocation 'self' https://example.com; camera *;

ou en envoyant un en-tête distinct pour chaque règle:

Feature-Policy: unsized-media 'none'
Feature-Policy: geolocation 'self' https://example.com
Feature-Policy: camera *;

Cet exemple effectuerait ce qui suit:

  • Interdit l'utilisation de unsized-media pour tous les contextes de navigation.
  • Interdit l'utilisation de geolocation pour tous les contextes de navigation, à l'exception de l'origine de la page et de https://example.com.
  • Autorise l'accès à camera pour tous les contextes de navigation.

Exemple : Définir plusieurs règles sur un iFrame

<!-- Blocks the iframe from using the camera and microphone
     (if the browser supports feature policy). -->
<iframe allow="camera 'none'; microphone 'none'"></iframe>

API JavaScript

Alors que Chrome 60 était compatible avec l'en-tête HTTP Feature-Policy et l'attribut allow dans les iFrames, l'API JavaScript a été ajoutée dans Chrome 74.

Cette API permet au code côté client de déterminer les fonctionnalités autorisées par une page, un frame ou un navigateur. Vous pouvez accéder à ses bonus sous document.featurePolicy pour le document principal ou sous frame.featurePolicy pour les iFrames.

Exemple

L'exemple ci-dessous illustre le résultat de l'envoi d'une règle de Feature-Policy: geolocation 'self' sur le site https://example.com:

/* @return {Array<string>} List of feature policies allowed by the page. */
document.featurePolicy.allowedFeatures();
// → ["geolocation", "midi",  "camera", "usb", "autoplay",...]

/* @return {boolean} True if the page allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature('geolocation');
// → true

/* @return {boolean} True if the provided origin allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature(
  'geolocation',
  'https://another-example.com/'
);
// → false

/* @return {Array<string>} List of feature policies allowed by the browser
regardless of whether they are in force. */
document.featurePolicy.features();
// → ["geolocation", "midi",  "camera", "usb", "autoplay",...]

/* @return {Array<string>} List of origins (used throughout the page) that are
   allowed to use the 'geolocation' feature. */
document.featurePolicy.getAllowlistForFeature('geolocation');
// → ["https://example.com"]

Liste des règles

Quelles fonctionnalités peuvent être contrôlées via une règle de caractéristiques ?

Il existe actuellement un manque de documentation sur les règles mises en œuvre et leur utilisation. Cette liste s'allonge également à mesure que les différents navigateurs adoptent les spécifications et implémentent différentes règles. La règle de fonctionnalité est une cible mouvante, et des documents de référence de qualité sont indispensables.

Pour le moment, il existe plusieurs façons de voir quelles fonctionnalités sont contrôlables.

        ["geolocation",
         "midi",
         "camera",
         "usb",
         "magnetometer",
         "fullscreen",
         "animations",
         "payment",
         "picture-in-picture",
         "accelerometer",
         "vr",
        ...
  • Consultez chromestatus.com pour connaître les règles implémentées ou envisagées dans Blink.

Pour savoir comment utiliser certaines de ces règles, consultez le dépôt GitHub de la spécification. Il contient des explications sur certaines des règles.

Questions fréquentes

Quand utiliser une règle de fonctionnalité ?

Toutes les règles sont facultatives. Par conséquent, utilisez des règles de fonctionnalité quand et là où cela est pertinent. Par exemple, si votre application est une galerie d'images, la règle maximum-downscaling-image vous permet d'éviter d'envoyer des images gigantesques aux fenêtres d'affichage mobiles.

D'autres règles telles que document-write et sync-xhr doivent être utilisées avec plus de précaution. Leur activation pourrait perturber le fonctionnement du contenu tiers, comme les annonces. En revanche, vous pouvez vérifier les règles relatives aux fonctionnalités afin de vous assurer que vos pages n'utilisent jamais ces API.

Est-ce que j'utilise une règle de fonctionnalité en développement ou en production ?

Les deux. Nous vous recommandons d'activer les règles pendant le développement et de les maintenir actives en production. Activer les règles pendant le développement peut vous aider à partir sur de bonnes bases. Cela vous aidera à détecter toute régression inattendue avant qu'elle ne se produise. Laissez les règles activées en production pour garantir une expérience utilisateur spécifique.

Existe-t-il un moyen de signaler les cas de non-respect des règles à mon serveur ?

Une API Reporting est en cours de développement. De la même manière que les sites peuvent activer la réception de rapports sur les cas de non-respect des CSP ou les abandons, vous pourrez recevoir des rapports sur les cas de non-respect des règles relatives aux fonctionnalités dans le monde réel.

Quelles sont les règles d'héritage pour le contenu iFrame ?

Les scripts (propriétaires ou tiers) héritent des règles de leur contexte de navigation. Cela signifie que les scripts de premier niveau héritent des stratégies du document principal.

Les éléments iframe héritent des stratégies de leur page parente. Si iframe possède un attribut allow, la règle la plus stricte entre la page parente et la liste allow l'emporte. Pour en savoir plus sur l'utilisation de iframe, consultez l'attribut allow sur les iFrames.

Non. La durée de vie d'une stratégie concerne une seule réponse de navigation sur une page. Si l'utilisateur accède à une nouvelle page, l'en-tête Feature-Policy doit être explicitement envoyé dans la nouvelle réponse pour que la règle s'applique.

Quels navigateurs sont compatibles avec le règlement sur les fonctionnalités ?

Consultez caniuse.com pour en savoir plus sur les navigateurs compatibles.

Pour le moment, Chrome est le seul navigateur compatible avec les règles de fonctionnalités. Cependant, comme toute la surface de l'API peut être activée ou détectable par des fonctionnalités, la règle de fonctionnalité se prête bien à des améliorations progressives.

Conclusion

Une règle de caractéristiques peut fournir une voie bien éclairée vers une meilleure expérience utilisateur et de bonnes performances. Elle s'avère particulièrement utile lors du développement ou de la maintenance d'une application, car elle permet d'éviter les pistolets potentiels avant qu'ils ne se faufilent dans votre codebase.

Autres ressources: