Inleiding tot het functiebeleid

Samenvatting

Met Feature Policy kunnen webontwikkelaars het gedrag van bepaalde API's en webfuncties in de browser selectief in-, uitschakelen en wijzigen. Het is net als CSP , maar in plaats van de beveiliging te controleren, controleert het de functies!

Het functiebeleid zelf is een kleine opt-in-overeenkomst tussen ontwikkelaar en browser die kan helpen onze doelstellingen van het bouwen (en onderhouden) van webapps van hoge kwaliteit te verwezenlijken.

Invoering

Bouwen voor het web is een rotsachtig avontuur. Het is al moeilijk genoeg om een ​​eersteklas web-app te bouwen die topprestaties levert en gebruik maakt van de nieuwste best practices. Het is nog moeilijker om die ervaring in de loop van de tijd geweldig te houden. Naarmate uw project evolueert, komen ontwikkelaars aan boord, komen er nieuwe functies bij en groeit de codebasis. Die Great Experience™ die je ooit hebt bereikt, kan beginnen te verslechteren en de UX begint eronder te lijden! Functiebeleid is ontworpen om u op het goede spoor te houden.

Met Functiebeleid kiest u voor een reeks 'beleidsregels' die de browser kan afdwingen voor specifieke functies die op uw site worden gebruikt. Dit beleid beperkt tot welke API's de site toegang heeft, of wijzigt het standaardgedrag van de browser voor bepaalde functies.

Hier volgen voorbeelden van dingen die u kunt doen met Functiebeleid:

  • Wijzig het standaardgedrag van autoplay op mobiele video's en video's van derden.
  • Voorkom dat een site gevoelige API's zoals camera of microphone gebruikt.
  • Sta toe dat iframes de API voor fullscreen gebruiken.
  • Blokkeer het gebruik van verouderde API's zoals synchrone XHR en document.write() .
  • Zorg ervoor dat afbeeldingen de juiste afmetingen hebben (bijvoorbeeld om te voorkomen dat de lay-out kapot gaat) en niet te groot zijn voor de viewport (bijvoorbeeld dat er bandbreedte van de gebruiker wordt verspild).

Beleid is een contract tussen ontwikkelaar en browser . Ze informeren de browser over wat de bedoeling van de ontwikkelaar is en helpen ons zo eerlijk te blijven wanneer onze app probeert te ontsporen en iets slechts doet. Als de site of de ingesloten inhoud van derden een van de vooraf geselecteerde regels van de ontwikkelaar probeert te schenden, overschrijft de browser het gedrag met betere UX of blokkeert de API helemaal.

Functiebeleid gebruiken

Functiebeleid biedt twee manieren om functies te beheren:

  1. Via de Feature-Policy HTTP-header.
  2. Met het allow -attribuut op iframes.

De eenvoudigste manier om Feature Policy te gebruiken is door de Feature-Policy HTTP-header te verzenden met de reactie van een pagina. De waarde van deze header is een beleid of een reeks beleidsregels waarvan u wilt dat de browser deze respecteert voor een bepaalde oorsprong:

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

De oorsprongslijst kan verschillende waarden aannemen:

  • * : De functie is toegestaan ​​in browsercontexten op het hoogste niveau en in geneste browsercontexten (iframes).
  • 'self' : de functie is toegestaan ​​in browsecontexten op het hoogste niveau en in geneste browsecontexten van dezelfde oorsprong. Het is niet toegestaan ​​in cross-origin-documenten in geneste browsercontexten.
  • 'none' : de functie is niet toegestaan ​​in browsecontexten op het hoogste niveau en niet in geneste browsecontexten.
  • <origin(s)> : specifieke oorsprong waarvoor het beleid moet worden ingeschakeld (bijvoorbeeld https://example.com ).

Voorbeeld

Stel dat u wilt voorkomen dat alle inhoud de Geolocatie-API op uw site gebruikt. U kunt dat doen door een strikte toelatingslijst van 'none' te sturen voor de geolocation :

Feature-Policy: geolocation 'none'

Als een stukje code of iframe de Geolocation API probeert te gebruiken, blokkeert de browser dit. Dit geldt zelfs als de gebruiker eerder toestemming heeft gegeven om zijn locatie te delen .

In strijd met het ingestelde geolocatiebeleid
In strijd met het ingestelde geolocatiebeleid.

In andere gevallen kan het zinvol zijn dit beleid wat te versoepelen. We kunnen toestaan ​​dat onze eigen oorsprong de Geolocation API gebruikt, maar voorkomen dat inhoud van derden er toegang toe krijgt door 'self' in de acceptatielijst in te stellen:

Feature-Policy: geolocation 'self'

Het kenmerk iframe allow

De tweede manier om Feature Policy te gebruiken is voor het beheren van inhoud binnen een iframe . Gebruik het allow attribuut om een ​​beleidslijst voor ingesloten inhoud op te geven:

<!-- 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>

Hoe zit het met de bestaande iframe-kenmerken?

Sommige functies die door Feature Policy worden beheerd, hebben een bestaand attribuut om hun gedrag te controleren. <iframe allowfullscreen> is bijvoorbeeld een attribuut waarmee iframe-inhoud de API HTMLElement.requestFullscreen() kan gebruiken. Er zijn ook de attributen allowpaymentrequest en allowusermedia om respectievelijk de Payment Request API en getUserMedia() toe te staan.

Probeer waar mogelijk het allow -attribuut te gebruiken in plaats van deze oude attributen . Voor gevallen waarin u achterwaartse compatibiliteit moet ondersteunen, is het gebruik van het allow -attribuut met een equivalent verouderd attribuut prima (bijvoorbeeld <iframe allowfullscreen allow="fullscreen"> ). Houd er rekening mee dat het restrictievere beleid wint. Het volgende iframe mag bijvoorbeeld niet op volledig scherm worden weergegeven omdat allow="fullscreen 'none'" restrictiever is dan allowfullscreen :

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

Meerdere beleidsregels tegelijk beheren

Verschillende functies kunnen tegelijkertijd worden beheerd door de HTTP-header te verzenden met een ; gescheiden lijst met beleidsrichtlijnen:

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

of door voor elk beleid een aparte header te verzenden:

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

Dit voorbeeld zou het volgende doen:

  • Staat het gebruik van unsized-media toe voor alle browsercontexten.
  • Staat het gebruik van geolocation niet toe voor alle browsercontexten, behalve voor de eigen oorsprong van de pagina en https://example.com .
  • Staat camera toe voor alle browsercontexten.

Voorbeeld : meerdere beleidsregels instellen op een iframe

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

JavaScript-API

Terwijl Chrome 60 ondersteuning toevoegde voor de Feature-Policy HTTP-header en het allow -attribuut op iframes, werd de JavaScript-API toegevoegd in Chrome 74.

Met deze API kan code aan de clientzijde bepalen welke functies zijn toegestaan ​​door een pagina, frame of browser. U kunt toegang krijgen tot de goodies onder document.featurePolicy voor het hoofddocument of frame.featurePolicy voor iframes.

Voorbeeld

Het onderstaande voorbeeld illustreert de resultaten van het verzenden van een beleid van Feature-Policy: geolocation 'self' op de 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"]

Lijst met beleid

Dus welke functies kunnen worden beheerd via Functiebeleid?

Op dit moment is er een gebrek aan documentatie over welk beleid wordt geïmplementeerd en hoe dit moet worden gebruikt. De lijst zal in de loop van de tijd ook groeien naarmate verschillende browsers de specificaties overnemen en verschillende beleidsregels implementeren. Functiebeleid zal een bewegend doelwit zijn en goede referentiedocumenten zullen zeker nodig zijn.

Voorlopig zijn er een aantal manieren om te zien welke functies bestuurbaar zijn.

  • Bekijk ons ​​Functiebeleid aanrecht met demo's. Het bevat voorbeelden van elk beleid dat in Blink is geïmplementeerd.
  • Controleer de bron van Chrome voor de lijst met functienamen.
  • Query document.featurePolicy.allowedFeatures() op about:blank om de lijst te vinden: 
        ["geolocation",
         "midi",
         "camera",
         "usb",
         "magnetometer",
         "fullscreen",
         "animations",
         "payment",
         "picture-in-picture",
         "accelerometer",
         "vr",
        ...
  • Kijk op chromestatus.com voor het beleid dat is geïmplementeerd of wordt overwogen in Blink.

Om te bepalen hoe je een aantal van deze beleidsregels moet gebruiken, bekijk de GitHub-repository van de specificaties . Het bevat enkele toelichtingen op een aantal beleidsterreinen.

Veelgestelde vragen

Wanneer gebruik ik Functiebeleid?

Al het beleid is opt-in, dus gebruik Feature Policy wanneer/waar dit zinvol is. Als uw app bijvoorbeeld een afbeeldingengalerij is, kunt u met het beleid maximum-downscaling-image voorkomen dat gigantische afbeeldingen naar mobiele viewports worden verzonden.

Andere beleidsregels, zoals document-write en sync-xhr moeten met meer zorg worden gebruikt. Als u ze inschakelt, kan inhoud van derden, zoals advertenties, kapot gaan. Aan de andere kant kan Feature Policy een controle zijn om ervoor te zorgen dat uw pagina's nooit deze vreselijke API's gebruiken!

Gebruik ik Feature Policy bij ontwikkeling of productie?

Beide. We raden u aan beleid tijdens de ontwikkeling in te schakelen en het beleid actief te houden tijdens de productie. Als u beleid inschakelt tijdens de ontwikkeling, kunt u op de goede weg beginnen. Het helpt u onverwachte regressies op te vangen voordat deze zich voordoen. Houd het beleid ingeschakeld in de productie om een ​​bepaalde UX voor gebruikers te garanderen.

Is er een manier om beleidsschendingen aan mijn server te melden?

Er wordt gewerkt aan een rapportage-API ! Net zoals sites zich kunnen aanmelden voor het ontvangen van rapporten over CSP-schendingen of -beëindigingen , kunt u in het wild rapporten ontvangen over schendingen van het functiebeleid.

Wat zijn de overervingsregels voor iframe-inhoud?

Scripts (zowel van eigen als van derden) nemen het beleid van hun browsercontext over. Dat betekent dat scripts op het hoogste niveau het beleid van het hoofddocument overnemen.

iframe 's nemen het beleid van hun bovenliggende pagina over. Als het iframe een allow attribuut heeft, wint het strengere beleid tussen de bovenliggende pagina en de allow lijst. Zie het allow -attribuut op iframes voor meer informatie over iframe gebruik.

Nee. De levensduur van een beleid geldt voor een navigatiereactie op één pagina. Als de gebruiker naar een nieuwe pagina navigeert, moet de Feature-Policy header expliciet in het nieuwe antwoord worden verzonden voordat het beleid wordt toegepast.

Welke browsers ondersteunen Functiebeleid?

Zie caniuse.com voor de laatste details over browserondersteuning.

Vanaf nu is Chrome de enige browser die functiebeleid ondersteunt. Omdat het gehele API-oppervlak echter opt-in of feature-detecteerbaar is, leent Feature Policy zich prima voor progressieve verbeteringen .

Conclusie

Functiebeleid kan helpen een goed verlicht pad te bieden naar betere UX en goede prestaties. Het is vooral handig bij het ontwikkelen of onderhouden van een app, omdat het potentiële voetwapens kan helpen voorkomen voordat ze uw codebase binnensluipen.

Aanvullende bronnen :