Introduzione alle norme relative alle funzionalità

Eric Bidelman

Riepilogo

I criteri relativi alle funzionalità consentono agli sviluppatori web di attivare, disattivare e modificare in modo selettivo il comportamento di determinate API e funzionalità web nel browser. È come il CSP, ma invece di controllare la sicurezza, controlla le funzionalità.

Le norme relative alle funzionalità sono piccoli contratti di attivazione tra sviluppatore e browser che possono contribuire a promuovere i nostri obiettivi di creazione (e gestione) di app web di alta qualità.

Introduzione

Sviluppare il web è un'avventura difficile. È abbastanza difficile creare un'app web di qualità superiore che esalti le prestazioni e utilizzi tutte le best practice più recenti. È ancora più difficile garantire un'esperienza straordinaria nel tempo. Man mano che il progetto si evolve, vengono aggiunti sviluppatori, vengono aggiunte nuove funzionalità e il codebase cresce. La grande esperienza che hai raggiunto in passato potrebbe peggiorare e la UX inizia a soffrire. Le norme relative alle funzionalità sono pensate per aiutarti a rimanere al passo.

Con le norme relative alle funzionalità, attivi l'utente a un insieme di "norme" per il browser in modo che vengano applicate a funzionalità specifiche utilizzate nel sito. Questi criteri limitano le API a cui il sito può accedere o modificano il comportamento predefinito del browser per determinate funzionalità.

Di seguito sono riportati alcuni esempi di utilizzo delle norme relative alle funzionalità:

  • Modifica il comportamento predefinito di autoplay sui video mobile e di terze parti.
  • Impedisci a un sito di utilizzare API sensibili come camera o microphone.
  • Consenti agli iframe di utilizzare l'API fullscreen.
  • Blocca l'uso di API obsolete come XHR sincroni e document.write().
  • Assicurati che le immagini siano dimensionate correttamente (ad es. evita il thrash del layout) e che non siano troppo grandi per l'area visibile (ad es. sprecando la larghezza di banda dell'utente).

Le norme costituiscono un contratto tra sviluppatore e browser. Comunicano al browser l'intento dello sviluppatore e, di conseguenza, ci aiutano a essere onesti quando la nostra app cerca di sfuggire ai sistemi e fare qualcosa di brutto. Se il sito o i contenuti di terze parti incorporati tentano di violare una delle regole preselezionate dallo sviluppatore, il browser sostituisce il comportamento con un'esperienza utente migliore o blocca del tutto l'API.

Utilizzo delle norme relative alle funzionalità

Le norme relative alle funzionalità consentono di controllare le funzionalità in due modi:

  1. Tramite l'intestazione HTTP Feature-Policy.
  2. Con l'attributo allow su iframe.

Il modo più semplice per utilizzare le norme relative alle funzionalità è inviare l'intestazione HTTP Feature-Policy con la risposta di una pagina. Il valore di questa intestazione è un criterio o un insieme di criteri che vuoi che il browser rispetti per una determinata origine:

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

La lista consentita dell'origine può assumere diversi valori:

  • *: la funzionalità è consentita nei contesti di navigazione di primo livello e in contesti di navigazione nidificati (iframe).
  • 'self': la funzionalità è consentita nei contesti di navigazione di primo livello e in quelli nidificati con la stessa origine. Non è consentito nei documenti multiorigine in contesti di navigazione nidificati.
  • 'none': la funzionalità non è consentita nei contesti di navigazione di primo livello e non è consentita in contesti di navigazione nidificati.
  • <origin(s)>: origini specifiche per cui attivare il criterio (ad es. https://example.com).

Esempio

Supponiamo che tu voglia impedire a tutti i contenuti di utilizzare l'API Geolocation nel tuo sito. A tale scopo, invia una lista consentita rigida di 'none' per la funzionalità geolocation:

Feature-Policy: geolocation 'none'

Se una porzione di codice o iframe tenta di utilizzare l'API Geolocation, il browser lo blocca. Questo vale anche se l'utente ha precedentemente concesso l'autorizzazione a condividere la propria posizione.

Violazione delle norme sulla geolocalizzazione impostate
Violazione delle norme di geolocalizzazione impostate.

In altri casi, potrebbe essere opportuno allentare un po' questa norma. Possiamo consentire alla nostra origine di utilizzare l'API Geolocation, ma impedire a contenuti di terze parti di accedervi impostando 'self' nella lista consentita:

Feature-Policy: geolocation 'self'

Attributo iframe allow

Il secondo modo per utilizzare Criteri delle funzionalità consiste nel controllare i contenuti all'interno di un iframe. Utilizza l'attributo allow per specificare un elenco di criteri per i contenuti incorporati:

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

E per quanto riguarda gli attributi iframe esistenti?

Alcune delle funzionalità controllate da Criteri funzionalità hanno un attributo esistente per controllarne il comportamento. Ad esempio, <iframe allowfullscreen> è un attributo che consente ai contenuti iframe di utilizzare l'API HTMLElement.requestFullscreen(). Esistono anche gli attributi allowpaymentrequest e allowusermedia per consentire rispettivamente l'API Payment Request e getUserMedia().

Se possibile, prova a utilizzare l'attributo allow anziché questi vecchi attributi. Per i casi in cui è necessario supportare la compatibilità con le versioni precedenti utilizzando l'attributo allow con un attributo precedente equivalente è perfetto (ad es. <iframe allowfullscreen allow="fullscreen">). Tieni presente che prevale la norma più restrittiva. Ad esempio, al seguente iframe non sarebbe consentito accedere a schermo intero perché allow="fullscreen 'none'" è più restrittivo di allowfullscreen:

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

Controllo di più criteri contemporaneamente

Diverse funzionalità possono essere controllate contemporaneamente inviando l'intestazione HTTP con un elenco separato da ; di istruzioni di criteri:

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

oppure inviando un'intestazione separata per ogni criterio:

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

In questo esempio:

  • Non consente l'utilizzo di unsized-media per tutti i contesti di navigazione.
  • Non consente l'uso di geolocation per tutti i contesti di navigazione, ad eccezione dell'origine della pagina e di https://example.com.
  • Consente a camera di accedere per tutti i contesti di navigazione.

Esempio: impostazione di più criteri su 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

Sebbene in Chrome 60 sia stato aggiunto il supporto dell'intestazione HTTP Feature-Policy e dell'attributo allow sugli iframe, in Chrome 74 è stata aggiunta l'API JavaScript.

Questa API consente al codice lato client di determinare quali funzionalità sono consentite da una pagina, un frame o un browser. Puoi accedere ai relativi extra in document.featurePolicy per il documento principale o in frame.featurePolicy per gli iframe.

Esempio

L'esempio seguente illustra i risultati dell'invio di una norma di Feature-Policy: geolocation 'self' sul sito 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"]

Elenco delle norme

Quali funzionalità possono essere controllate tramite i relativi criteri?

Al momento, c'è carenza di documentazione su quali criteri sono implementati e come utilizzarli. L'elenco si allungerà inoltre nel tempo man mano che i vari browser adottano le specifiche e implementano vari criteri. Le norme sulle funzionalità saranno un bersaglio mobile e serviranno sicuramente documenti di riferimento validi.

Per ora, ci sono un paio di modi per capire quali funzionalità sono controllabili.

        ["geolocation",
         "midi",
         "camera",
         "usb",
         "magnetometer",
         "fullscreen",
         "animations",
         "payment",
         "picture-in-picture",
         "accelerometer",
         "vr",
        ...
  • Visita il sito chromestatus.com per verificare i criteri che sono stati implementati o sono in fase di valutazione in Blink.

Per determinare come utilizzare alcuni di questi criteri, consulta il repository GitHub delle specifiche. Contiene alcune spiegazioni su alcune norme.

Domande frequenti

Quando si utilizzano le norme relative alle funzionalità?

Tutte le norme sono attivabili, quindi usa le norme relative alle funzionalità quando e dove appropriato. Ad esempio, se la tua app è una galleria di immagini, le norme maximum-downscaling-image aiuterebbero a evitare di inviare immagini enormi alle aree visibili mobile.

Altri criteri come document-write e sync-xhr devono essere utilizzati con maggiore attenzione. La loro attivazione potrebbe danneggiare contenuti di terze parti come gli annunci. D'altra parte, i criteri relativi alle funzionalità possono essere un controllo vigile per assicurarsi che le tue pagine non utilizzino mai queste terribili API.

Uso le norme sulle funzionalità in fase di sviluppo o produzione?

Entrambi. Consigliamo di attivare i criteri durante lo sviluppo e di mantenerli attivi durante la produzione. L'attivazione dei criteri durante lo sviluppo può aiutarti a partire con il piede giusto. Ti aiuterà a rilevare eventuali regressioni impreviste prima che si verifichino. Mantieni i criteri attivi in produzione per garantire una determinata esperienza utente agli utenti.

Esiste un modo per segnalare violazioni delle norme al mio server?

Un'API di reporting è in fase di sviluppo. Analogamente al modo in cui i siti possono attivare la ricezione di segnalazioni relative a violazioni del CSP o ritiri, potrai ricevere segnalazioni sulle violazioni delle norme relative alle funzionalità in natura.

Quali sono le regole di ereditarietà per i contenuti iframe?

Gli script (proprietari o di terze parti) ereditano i criteri del contesto di navigazione. Ciò significa che gli script di primo livello ereditano i criteri del documento principale.

Gli elementi iframe ereditano i criteri della pagina principale. Se iframe ha un attributo allow, prevale la norma più rigida tra la pagina principale e l'elenco allow. Per ulteriori informazioni sull'utilizzo di iframe, consulta l'attributo allow sugli iframe.

No. La durata di un criterio è riferita a una singola risposta alla navigazione in una pagina. Se l'utente passa a una nuova pagina, l'intestazione Feature-Policy deve essere inviata esplicitamente nella nuova risposta affinché il criterio venga applicato.

Quali browser supportano le norme sulle funzionalità?

Vai su caniuse.com per i dettagli più recenti sul supporto dei browser.

Al momento, Chrome è l'unico browser a supportare i criteri relativi alle funzionalità. Tuttavia, dal momento che l'intera piattaforma API è attivabile o rilevabile, i criteri relativi alle funzionalità si prestano piacevolmente a un miglioramento progressivo.

Conclusione

Le norme sulle funzionalità possono aiutarti a tracciare una strada ben illuminata per migliorare l'esperienza utente e le prestazioni. È particolarmente utile durante lo sviluppo o la manutenzione di un'app, poiché può aiutare a evitare potenziali pistole prima che entrino nel codebase.

Risorse aggiuntive: