Introduzione alle norme relative alle funzionalità

Riepilogo

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

Le norme sulle funzionalità di per sé sono pochi contratti di attivazione tra gli sviluppatori che ci aiuti a promuovere i nostri obiettivi di creazione (e mantenimento) di app web di qualità.

Introduzione

Creare per il web è un'avventura difficile. È già abbastanza difficile costruire una piattaforma di prim'ordine app web che migliora le prestazioni e utilizza tutte le best practice più recenti. È anche possibile è più difficile mantenere un'esperienza ottimale nel tempo. Man mano che il progetto si evolve, si uniscono gli sviluppatori, arrivano nuove funzionalità e il codebase cresce. Questo Ottima esperienza TM che una volta ottenuta potrebbe iniziare a deteriorare e la UX inizia a soffrire! Le norme sulle funzionalità sono state concepite per aiutarti a rimanere sulla strada giusta.

Con le norme relative alle funzionalità, puoi attivare un insieme di "criteri" affinché il browser a specifiche funzionalità utilizzate nel sito. Questi criteri limitano le API a cui il sito può accedere o di cui può modificare il comportamento predefinito del browser alcune funzionalità.

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

  • Modificare il comportamento predefinito. di autoplay su 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 sincrono e document.write().
  • Assicurati che le immagini siano ridimensionate correttamente (ad es.evita il thrashing del layout) e non lo siano. troppo grande per l'area visibile (ad esempio, spreca la larghezza di banda dell'utente).

Le norme sono un contratto tra lo sviluppatore e il browser. Informano a capire qual è l'intento dello sviluppatore e, di conseguenza, ci aiuta a essere onesti quando la nostra app prova a disattivarsi e a fare qualcosa di brutto. Se il sito o lo incorporano i contenuti di terze parti tentano di violare una delle preselezionate il browser esegue l'override del comportamento con una UX migliore o blocca l'API del tutto.

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.
di Gemini Advanced.

Il modo più semplice per utilizzare Criteri delle funzionalità è inviare il file 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 (iframe).
  • 'self': la funzionalità è consentita nei contesti di navigazione di primo livello e contesti di navigazione nidificati nella stessa origine. Non è consentito nelle origini multiorigine documenti in contesti di navigazione nidificati.
  • 'none': questa funzionalità non è consentita nei contesti di navigazione di primo livello e non consentiti nei 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 di tutti i contenuti l'API Geolocation sul tuo sito. Puoi farlo inviando una richiesta lista consentita 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 lo blocca. Questo vale anche se l'utente ha precedentemente fornito 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 la nostra origine per utilizzare l'API Geolocation, ma impedire che contenuti di terze parti per accedervi impostando 'self' nell'elenco di autorizzazioni:

Feature-Policy: geolocation 'self'

Attributo iframe allow

Il secondo modo per usare le norme relative alle funzionalità è controllare i contenuti all'interno iframe. Utilizza l'attributo allow per specificare un elenco di criteri per 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 funzionalità controllate dalle norme relative alle funzionalità hanno un'estensione esistente per controllarne il comportamento. Ad esempio, <iframe allowfullscreen> è un attributo che consente ai contenuti iframe di utilizzare API HTMLElement.requestFullscreen(). Ci sono anche allowpaymentrequest e allowusermedia per consentire agli attributi API Payment Request e getUserMedia(), rispettivamente.

Prova a utilizzare l'attributo allow al posto di questi vecchi attributi di codice sorgente se possibile. Nei casi in cui è necessario supportare le versioni precedenti compatibilità utilizzando l'attributo allow con un attributo precedente equivalente è perfetto (ad es. <iframe allowfullscreen allow="fullscreen">). È sufficiente notare che prevale la norma più restrittiva. Ad esempio, L'iframe non può attivare la modalità a schermo intero 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 ; di istruzioni relative ai 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 di origine della pagina e 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

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

Questa API consente al codice lato client di determinare quali funzionalità sono consentite da un pagina, frame o browser. Puoi accedere ai relativi componenti aggiuntivi in document.featurePolicy per il documento principale o frame.featurePolicy per 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 sulle norme implementate e su come utilizzarle. L'elenco si espanderà nel tempo man mano che i diversi browser adottare le specifiche e implementare vari criteri. Le norme relative alle funzionalità saranno saranno sicuramente necessari documenti di riferimento validi e mirati.

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",
        ...
  • Visita la pagina chromestatus.com per verificare se sono stati implementate o che vengono prese in considerazione in Blink.

Per capire come utilizzare alcune di queste norme, consulta le repository GitHub delle specifiche. 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. Per Ad esempio, se la tua app è una galleria di immagini, maximum-downscaling-image eviterebbe di inviare immagini giganti alle aree visibili dei dispositivi mobili.

Altre norme come document-write e sync-xhr dovrebbero essere utilizzate con altre cura. La loro attivazione potrebbe interrompere i contenuti di terze parti come gli annunci. Il giorno invece, i criteri relativi alle funzionalità possono essere un controllo istinto per verificare che le tue pagine non usano mai queste terribili API!

È 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 conservare le attivi in fase di produzione. L'attivazione dei criteri durante lo sviluppo può ti aiutano a iniziare con il piede giusto. Ti aiuterà a catturare qualsiasi inaspettato le regressioni 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 report su Violazioni dei criteri di sicurezza (CSP) o ritirati, dovrai ricevere segnalazioni in merito a 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 della navigazione contesto. 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 allow, il criterio più rigido tra la pagina principale e allow dell'elenco, vince. Per ulteriori informazioni sull'utilizzo di iframe, consulta allow su iframe.

No. La durata di un criterio si riferisce a una risposta alla navigazione in una singola pagina. Se l'utente apre una nuova pagina, l'intestazione Feature-Policy deve essere esplicitamente inviata nella nuova risposta per l'applicazione del criterio.

Quali browser supportano le Norme relative alle funzionalità?

Per conoscere le ultime novità, visita caniuse.com dettagli 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 in base alle funzionalità, Criteri relativi alle funzionalità si presta bene al miglioramento progressivo.

Conclusione

Le norme sulle funzionalità possono contribuire a fornire un percorso ben illuminato verso una migliore UX e buone prestazioni. È particolarmente utile per sviluppare o mantenere un'app poiché può aiutare a evitare potenziali pistole prima che si infiltrano nel codebase.

Risorse aggiuntive: