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

Résumé

Les Règles relatives aux fonctionnalités permettent aux développeurs Web d'activer, de désactiver et de modifier 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é, contrôle des fonctionnalités.

Les règles relatives aux fonctionnalités constituent de petits accords d'acceptation conclus entre les développeurs et navigateur peuvent nous aider à atteindre nos objectifs de développement (et de maintien) des applications Web de qualité.

Introduction

Créer pour le Web est une aventure ardue. Il est assez difficile de créer Web qui améliore les performances et respecte les bonnes pratiques les plus récentes. Il est même plus difficile de maintenir cette expérience de qualité au fil du temps. Au fur et à mesure que votre projet évolue, les développeurs font appel à eux, de nouvelles fonctionnalités arrivent et le codebase s'enrichit. Cela Une expérience de qualité que vous avez obtenue peut commencer à se détériorer et l'expérience utilisateur commence à souffrir ! Les règles relatives aux fonctionnalités sont conçues pour vous aider à rester sur la bonne voie.

Avec les règles relatives aux fonctionnalités, vous activez un ensemble de "règles" qui s'appliquent au navigateur appliquer sur des fonctionnalités spécifiques utilisées sur votre site. Ces règles limitent les API auxquelles le site peut accéder ou pour lesquelles le comportement par défaut du navigateur est modifié ; certaines fonctionnalités.

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

  • Modifier 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 ne sont pas est trop grande pour la fenêtre d'affichage (par exemple, la bande passante de l'utilisateur est gaspillée) ;

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

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 caractéristiques consiste à envoyer le code HTTP Feature-Policy avec la réponse d'une page. La valeur de cet en-tête est une règle 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 en naviguant dans les contextes (iFrame).
  • 'self': cette fonctionnalité est autorisée dans les contextes de navigation de premier niveau. dans les contextes de navigation imbriqués de même origine. Non autorisé en multi-origine des documents dans des contextes de navigation imbriquée.
  • 'none': cette fonctionnalité n'est pas autorisée dans les contextes de navigation de premier niveau et non autorisées 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

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

Feature-Policy: geolocation 'none'

Si un extrait de code ou un cadre iFrame tente d'utiliser l'API Geolocation, le navigateur le bloque. Cela est vrai même si l'utilisateur a déjà donné l'autorisation de partager sa position.

<ph type="x-smartling-placeholder">
</ph> Ne pas respecter la règle de géolocalisation définie
Ne respecte pas 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 à utiliser l'API Geolocation, mais à empêcher les contenus tiers 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 un iframe. Utilisez l'attribut allow pour spécifier une liste de règles pour 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éjà d'un pour contrôler leur comportement. Exemple : <iframe allowfullscreen> est un attribut qui permet au contenu iFrame d'utiliser l'attribut API HTMLElement.requestFullscreen(). Il y a aussi allowpaymentrequest et Attributs allowusermedia pour autoriser API Payment Request et getUserMedia() respectivement.

Essayez d'utiliser l'attribut allow à la place de ces anciens attributs. des attributs lorsque cela est possible. Pour les cas où vous devez prendre en charge compatibilité utilisant 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 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

Plusieurs fonctionnalités peuvent être contrôlées en même temps en envoyant l'en-tête HTTP. avec une liste d'instructions de stratégie 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 la propre origine de la page et 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

Chrome 60 prend désormais en charge l'en-tête HTTP Feature-Policy et allow sur 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 page, cadre ou navigateur. Vous pouvez accéder à ses bonus sous document.featurePolicy pour le document principal ou frame.featurePolicy pour iFrame.

Exemple

L'exemple ci-dessous illustre les résultats de l'envoi d'une stratégie 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 ?

À l'heure actuelle, la documentation concernant les règles mises en œuvre est insuffisante et comment les utiliser. Cette liste s'allonge également au fil du temps, à mesure que les différents navigateurs d'adopter les spécifications et d'implémenter les différentes règles. La règle de fonctionnalité va évoluer des documents cibles et de bonnes documents de référence seront certainement nécessaires.

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 la page chromestatus.com pour connaître les règles qui ont été implémentés ou sont pris en compte dans Blink.

Pour savoir comment utiliser certaines de ces règles, consultez les 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. Pour Par exemple, si votre application est une galerie d'images, l'élément maximum-downscaling-image vous évitera d'envoyer des images gigantesques aux fenêtres d'affichage mobiles.

D'autres règles comme document-write et sync-xhr doivent être utilisées avec d'autres règles d'attention. Leur activation pourrait perturber le fonctionnement du contenu tiers, comme les annonces. Le Vous pouvez vérifier instinctivement comment vérifier que vos pages n'utilise jamais ces API de mauvaise qualité !

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 maintenir de stratégies actives en production. L'activation des règles pendant le développement vous aider à bien démarrer. Cela vous aidera à détecter toute erreur inattendue des régressions avant qu'elles ne se produisent. Laisser les règles activées en production pour garantir une certaine UX aux utilisateurs.

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

Une API Reporting est en cours de préparation ! De la même manière que les sites peuvent activer la réception de rapports sur Non-respect de CSP ou abandons, vous recevoir des signalements de non-respect des règles relatives aux fonctionnalités.

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 navigation. le contexte. 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 l'élément iframe comporte un allow, la règle la plus stricte définie entre la page parente et l'allow de la liste, des victoires. Pour en savoir plus sur l'utilisation de iframe, consultez les Attribut allow sur les cadres iFrame.

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ée dans la nouvelle réponse pour que la stratégie s’applique.

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

Consultez les dernières actualités sur caniuse.com plus d'informations sur la compatibilité des navigateurs.

Pour le moment, Chrome est le seul navigateur compatible avec les règles de fonctionnalités. Toutefois, Étant donné que toute la surface de l'API peut être activée ou détectable, Feature Policy se prête bien à une amélioration progressive.

Conclusion

Une politique de caractéristiques peut aider à fournir une voie bien éclairée vers une meilleure expérience utilisateur et de bonnes performances. C'est particulièrement utile lors du développement ou de la maintenance d'une application car cela permet d'éviter les pistolets potentiels avant qu'ils se faufilent dans votre codebase.

Autres ressources: