Introduzione alle norme relative alle funzionalità

Riepilogo

Criteri relativi alle funzionalità consente agli sviluppatori web di attivare, disattivare e modificare selettivamente il comportamento di alcune API e funzionalità web nel browser. È come CSP, ma invece di controllare la sicurezza, controlla le funzionalità.

I criteri relativi alle funzionalità in sé sono pochi contratti di attivazione tra sviluppatore e browser che possono contribuire a promuovere i nostri obiettivi di creazione (e manutenzione) di app web di alta qualità.

Introduzione

Creare per il web è un'avventura difficile. È già abbastanza difficile creare un'app web di alto livello in grado di ottimizzare le prestazioni e utilizzare le best practice più recenti. È ancora più difficile mantenere un'esperienza ottimale nel tempo. Man mano che il progetto si evolve, gli sviluppatori entrano in azione, vengono introdotte nuove funzionalità e il codebase cresce. L'esperienza Ottima TM che hai ottenuto una volta può iniziare a deteriorare e la UX inizia a risentirne. Le norme sulle funzionalità sono state concepite per aiutarti a rimanere sulla strada giusta.

Con le norme relative alle funzionalità, attivi un insieme di "criteri" che il browser deve applicare a funzionalità specifiche utilizzate nel sito. Questi criteri limitano a quali API può accedere il sito o modificano il comportamento predefinito del browser per determinate funzionalità.

Di seguito sono riportati alcuni esempi di ciò che puoi fare con le Norme relative alle funzionalità:

  • Modifica il comportamento predefinito di autoplay sui video per dispositivi mobili 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 sincrono e document.write().
  • Assicurati che le immagini siano dimensionate correttamente (ad es. evita il thrashing del layout) e non siano troppo grandi per l'area visibile (ad es. sprecando la larghezza di banda dell'utente).

Le norme sono un contratto tra lo sviluppatore e il browser. Comunicano al browser l'intento dello sviluppatore e, di conseguenza, ci aiutano a rimanere onesti quando la nostra app cerca di non funzionare correttamente. Se il sito o i contenuti di terze parti incorporati tentano di violare una qualsiasi delle regole preselezionate dello sviluppatore, il browser sostituisce il comportamento con un'esperienza utente migliore o blocca completamente l'API.

Utilizzo dei criteri relativi alle funzionalità

Le norme relative alle funzionalità offrono due modi per controllare le funzionalità:

  1. Mediante l'intestazione HTTP Feature-Policy.
  2. Con l'attributo allow in iframe.

Il modo più semplice per utilizzare Criteri delle 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 il browser deve rispettare per una determinata origine:

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

La lista consentita di origine può avere 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 contesti di navigazione nidificati nella 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 bloccare l'utilizzo dell'API Geolocation nel tuo sito da parte di tutti i contenuti. Puoi farlo inviando una lista consentita rigida di 'none' per la funzionalità geolocation:

Feature-Policy: geolocation 'none'

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

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

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

Feature-Policy: geolocation 'self'

Attributo iframe allow

Il secondo modo per usare le norme relative alle funzionalità è 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>

Che cosa succede con gli attributi iframe esistenti?

Alcune delle funzionalità controllate dalle norme relative alle 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 al posto di questi precedenti attributi. Per i casi in cui è necessario supportare la compatibilità con 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 potrebbe essere consentito l'attivazione della modalità 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

È possibile controllare diverse funzionalità contemporaneamente inviando l'intestazione HTTP con un elenco separato da ; di istruzioni dei criteri:

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

oppure inviando un'intestazione separata per ciascun 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'utilizzo di geolocation per tutti i contesti di navigazione, ad eccezione dell'origine della pagina e di https://example.com.
  • Consente all'app camera di accedere a tutti i contesti di navigazione.

Esempio: impostare più norme 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

Mentre Chrome 60 ha aggiunto il supporto per l'intestazione HTTP Feature-Policy e l'attributo allow su iframe, l'API JavaScript è stata aggiunta in Chrome 74.

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 componenti aggiuntivi in document.featurePolicy per il documento principale o in frame.featurePolicy per gli iframe.

Esempio

L'esempio seguente illustra i risultati dell'invio di un criterio 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 dalle Norme relative alle funzionalità?

Al momento non c'è documentazione su quali criteri vengono implementati e come usarli. Inoltre, l'elenco si espanderà nel tempo man mano che i vari browser adottano le specifiche e implementano criteri diversi. Il criterio della funzionalità sarà un target mobile e saranno necessari buoni documenti di riferimento.

Per il momento, esistono un paio di modi per verificare quali funzioni sono controllabili.

        ["geolocation",
         "midi",
         "camera",
         "usb",
         "magnetometer",
         "fullscreen",
         "animations",
         "payment",
         "picture-in-picture",
         "accelerometer",
         "vr",
        ...
  • Controlla all'indirizzo chromestatus.com i criteri implementati o che vengono presi in considerazione in Blink.

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

Domande frequenti

Quando posso utilizzare le Norme relative alle funzionalità?

Tutte le norme sono facoltative, quindi utilizza le norme relative alle funzionalità quando e dove opportuno. Ad esempio, se la tua app è una galleria di immagini, il criterio maximum-downscaling-image ti eviterebbe di inviare immagini giganti alle aree visibili mobile.

Altre norme come document-write e sync-xhr devono essere usate con maggiore attenzione. La loro attivazione potrebbe interrompere i contenuti di terze parti come gli annunci. D'altra parte, i criteri relativi alle funzionalità possono essere un controllo per assicurarti che le tue pagine non utilizzino mai queste API pessime.

È possibile utilizzare i criteri delle funzionalità in fase di sviluppo o di produzione?

Entrambe. Ti consigliamo di attivare i criteri durante lo sviluppo e di mantenerli attivi in fase di produzione. L'attivazione dei criteri durante lo sviluppo può aiutarti a iniziare nel modo giusto. Ti aiuterà a individuare eventuali regressioni inaspettate prima che si verifichino. Mantieni attivi i criteri in produzione per garantire agli utenti una determinata UX.

C'è un modo per segnalare violazioni delle norme al mio server?

Un'API di reporting è in fase di sviluppo. Analogamente a come i siti possono attivare la ricezione di segnalazioni relative a violazioni CSP o ritiri, anche tu potrai ricevere segnalazioni su violazioni delle norme relative alle funzionalità.

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

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

I gruppi iframe ereditano i criteri della pagina principale. Se iframe ha un attributo allow, vince il criterio più rigido tra la pagina principale e l'elenco allow. Per maggiori informazioni sull'utilizzo di iframe, consulta l'attributo allow su iframe.

No. La durata di un criterio si riferisce a una risposta alla navigazione in una singola 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 relative alle funzionalità?

Visita 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, poiché l'intera piattaforma dell'API è attivabile o rilevabile nelle funzionalità, i criteri delle funzionalità si prestano opportunamente al miglioramento progressivo.

Conclusione

Policy sulle funzionalità può contribuire a fornire un percorso ben illuminato verso una migliore UX e buone prestazioni. È particolarmente utile quando si sviluppa o si gestisce un'app, in quanto consente di evitare potenziali pistole prima che possano infiltrarsi nel codebase.

Risorse aggiuntive: