---
title: Feature Policy
slug: Web/HTTP/Feature_Policy
tags:
  - Feature Policy
  - Feature-Policy
  - HTTP
  - Introduction
  - Overview
  - Reference
  - Security
  - Sécurité
  - access
  - accès
  - delegation
  - header
  - permission
translation_of: Web/HTTP/Feature_Policy
---
<div>{{HTTPSidebar}}</div>

<p class="summary"><span class="seoSummary">Feature Policy ("réglementation des fonctionnalités" en français) permet aux développeurs web d'activer, de modifier ou de désactiver spécifiquement le comportement de certaines fonctionnalités et API dans le navigateur. Elle est similaire à {{Glossary("CSP", "Content Security Policy")}} mais contrôle les fonctionnalités plus que la sécurité.</span></p>

<div class="note">
<p>L'en-tête <code>Feature-Policy</code> a maintenant été renommé <code>Permissions-Policy</code> dans la spécification, et cet article va possiblement être modifié en conséquence.</p>
</div>

<h2 id="En_résumé">En résumé</h2>

<p>Feature Policy est un mécanisme vous permettant de déclarer explicitement quelles fonctionnalités sont utilisées ou non par votre site web. Ceci vous permet donc de mettre en place des bonnes pratiques en limitant les fonctionnalités disponibles, et ce bien que votre code source évoluera avec le temps et que du contenu externe puisse être intégré postérieurement et plus sainement.</p>

<p>Avec Feature Policy, vous pouvez opter pour un ensemble de "règles" que le navigateur imposera à certaines fonctionnalités utilisées sur un site web. Ces règles restreignent quelles API le site peut utiliser ou comment il peut modifier le comportement par défaut du navigateur pour utiliser certaines fonctionnalités.</p>

<p>Par exemple, voici des choses que vous pourrez faire avec Feature Policy :</p>

<ul>
 <li>Changer le comportement par défaut de la lecture automatique sur mobile ou pour les vidéos de source externe,</li>
 <li>Vous interdire d'utiliser les API sensitives comme l'appareil photographique ou le microphone.</li>
 <li>Permettre aux iframes d'utiliser l'<a href="/en-US/docs/Web/API/Fullscreen_API">API plein écran</a>.</li>
 <li>Empêcher l'utilisateur d'API obsolètes comme les <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XHR synchrones</a> ou {{domxref("document.write()")}}.</li>
 <li>Vous assurer que les images sont dimensionnées correctement et ne sont pas trop grosses pour le cadre de la fenêtre.</li>
</ul>

<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>

<p>Feature Policy vous permet de contrôler quelles origines peuvent utiliser quelles fonctionnalités, à la fois au niveau supérieur de navigation et dans cadres embarqués. Essentiellement, vous devez écrire une règle qui fournit une liste d'origines permises pour chaque fonctionnalité. Celles contrôlées par Feature Policy ne seront activées que dans les documents ou cadres si leur origine respective est présente dans la liste de permissions associée à cette fonctionnalité.</p>

<p>Pour chaque fonctionnalités contrôlée, le navigateurs entretient une liste d'origines (dite "liste de permissions" ou <em>allowlist</em>) pour lesquelles la fonctionnalité est activée. Si vous ne spécifiez aucune règle pour une fonctionnalité, alors la liste de permissions par défaut sera utilisée. Celle-ci est spécifique à chaque fonctionnalité.</p>

<h3 id="Écrire_une_règle">Écrire une règle</h3>

<p>Une règle est composée d'un ensemble de directives individuelles. Chaque directive est une combinaison d'un nom de fonctionnalités et d'une liste de permissions pour les origines qui pourront utiliser la fonctionnalité.</p>

<h3 id="Appliquer_votre_règle">Appliquer votre règle</h3>

<p>Feature Policy fournit deux manières d'appliquer des règles pour contrôler les fonctionnalités :</p>

<ul>
 <li>L'en-tête HTTP {{httpheader("Feature-Policy")}}.</li>
 <li>L'attribut {{HTMLElement("iframe","<code>allow</code>","#Attributes")}} sur les iframes.</li>
</ul>

<p>La principale différence entre les deux est que que l'attribut ne contrôle les fonctionnalités que dans l'iframe tandis que l'en-tête les contrôle dans la réponse et chacun des contenus imbriqués dans la page.</p>

<p>Pour plus de détails, voir <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Utiliser Feature Policy</a>.</p>

<h3 id="Déterminer_la_règle">Déterminer la règle</h3>

<p>Les scripts peuvent demander programmatiquement à savoir quelles règles s'appliquent au moyen de l'objet {{DOMxRef("FeaturePolicy")}} avec {{DOMxRef("Document.featurePolicy")}} ou {{DOMxRef("HTMLIFrameElement.featurePolicy")}}.</p>

<h2 id="Types_de_fonctionnalités_contrôlables">Types de fonctionnalités contrôlables</h2>

<p>Bien que Feature Policy fournit un moyen de contrôler de multiples fonctionnalités en utilisant une syntaxe constante, le comportement des fonctionnaltiés contrôlées varie et dépend de plusieurs facteurs.</p>

<p>Le principe général est qu'il devrait y avoir un moyen intuitif et fiable pour les développeurs web de savoir quand une fonctionnalité dont ils ont besoin est désactivée. Les fonctionnalités récemment introduites peuvent fournir une API explicitement conçue pour signaler un tel cas, mais celles préexistantes et qui ont intégré tardivement Feature Policy utilisent typiquement des mécanismes plus anciens, par exemple :</p>

<ul>
 <li>Retourner "permission denied" pour les API JavaScript qui requièrent une élévation de privilèges de la part de l'utilisateur,</li>
 <li>Retourner <code>false</code> ou jeter une erreur depuis une API JavaScript qui permet d'accéder à une fonctionnalité,</li>
 <li>Modifier les valeurs par défaut ou les options qui contrôlent le comportement de la fonctionnalité.</li>
</ul>

<p>L'ensemble actuel des fonctionnalités contrôlables se résume donc à deux grandes catégories :</p>

<ul>
 <li>Imposer des bonnes pratiques pour une bonne expérience d'utilisation,</li>
 <li>Fournir un contrôle granulaire sur les fonctionnalités sensitives ou puissantes.</li>
</ul>

<h3 id="Bonnes_pratiques_pour_une_bonne_expérience_dutilisation">Bonnes pratiques pour une bonne expérience d'utilisation</h3>

<p>Il y a plusieurs fonctionnalités contrôlables pour vous aider à mettre en place de bonnes pratiques afin d'assurer de bonnes performances et une expérience d'utilisation agréable.</p>

<p>Dans la plupart des cas, les fonctionnalités contrôlables sont celles qui, si utilisées, vont affecter négativement l'expérience d'utilisation. Pour éviter de faire dysfonctionner un site web déjà existant, ces fonctionnalités autorisent par défaut leur usage par toutes les origines. Une bonne pratique est donc d'utiliser des règles qui désactivent ces fonctionnalités pour certaines origines.</p>

<p>La liste de ces fonctionnalités est :</p>

<ul>
 <li>Animations de rafraichissement de l'affichage,</li>
 <li>Formats d'image du passé,</li>
 <li>Images surdimensionnées,</li>
 <li>Scripts synchrones,</li>
 <li>Requêtes XMLHTTPRequest sychrones,</li>
 <li>Images non optimisées,</li>
 <li>Médias non dimensionnés.</li>
</ul>

<h3 id="Contrôle_granulaire_sur_certaines_fonctionnalités">Contrôle granulaire sur certaines fonctionnalités</h3>

<p>Le web fournit des fonctionnalités et API que peuvent affecter l'anonymat, la vie privée et la sécurité si leur usage est abusif. Dans certains cas, vous pourriez avoir envie de limiter strictement la manière dont de telles fonctionnalités sont utilisées sur un site web. Il y a des moyens de permettre à des fonctionnalités d'être activées ou désactivées pour des origines ou des cadres spécifiques dans un site web. Quand ils sont disponibles, les moyens intègrent avec l'API Permissions ou des mécanismes propres à eux-mêmes la possibilité de vérifier si la fonctionnalité est disponible.</p>

<p>Les fonctionnalités incluent (voir la <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy#Directives">liste des Features</a>) :</p>

<ul>
 <li>Accéléromètre</li>
 <li>Capteur de luminosité ambiante</li>
 <li>Lecture automatique</li>
 <li>Appareil photographique</li>
 <li>Médias chiffrés</li>
 <li>Plein écran</li>
 <li>Géolocalisation</li>
 <li>Gyroscope</li>
 <li>Magnétomètre</li>
 <li>Microphone</li>
 <li>MIDI</li>
 <li>PaymentRequest</li>
 <li>Picture-in-picture</li>
 <li>USB</li>
 <li>Web Share API</li>
 <li>VR / XR</li>
</ul>

<h2 id="Exemples">Exemples</h2>

<ul>
 <li><a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Utiliser Feature Policy</a></li>
 <li>Voir <a href="http://feature-policy-demos.appspot.com/">Démonstrations de Feature Policy</a> pour un exemple d'utilisation de plusieurs règles.</li>
</ul>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</th>
  </tr>
  <tr>
   <td>{{SpecName("Feature Policy","#feature-policy-http-header-field","Feature-Policy")}}</td>
   <td>{{Spec2("Feature Policy")}}</td>
   <td>Définition initiale. Définit l'en-tête {{httpheader("Feature-Policy")}}. Les directives sont définies dans la spécification pour les fonctionnalités qu'elles contrôlent. Voir les pages individuelles des directives pour plus de détails.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>



<p>{{Compat("http.headers.Feature-Policy")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Utiliser Feature Policy</a></li>
 <li>{{HTTPHeader("Feature-Policy")}} HTTP header</li>
 <li>{{HTMLElement("iframe","<code>allow</code>","#Attributes")}} attribute on iframes</li>
 <li><a href="https://developers.google.com/web/updates/2018/06/feature-policy">Introduction à Feature Policy</a></li>
 <li><a href="https://www.chromestatus.com/features#component%3A%20Blink%3EFeaturePolicy">Feature policies sur www.chromestatus.com</a></li>
 <li><a href="https://chrome.google.com/webstore/detail/feature-policy-tester-dev/pchamnkhkeokbpahnocjaeednpbpacop">Feature-Policy Tester (extension Chrome Developer Tools)</a></li>
 <li><a href="/en-US/docs/Web/Privacy">Anonymat, permissions et informations sur la sécurité</a></li>
</ul>