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
omicrophone
. - 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:
- Tramite l'intestazione HTTP
Feature-Policy
. - Con l'attributo
allow
su iframe.
L'intestazione HTTP Feature-Policy
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.
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 dihttps://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.
- Dai un'occhiata alle nostre demo sulle norme relative alle funzionalità del lavello da cucina. Contiene esempi per ogni criterio implementato in Blink.
- Cerca nell'origine di Chrome l'elenco dei nomi delle funzionalità.
- Esegui una query
document.featurePolicy.allowedFeatures()
suabout:blank
per trovare l'elenco:
["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.
Se applico un criterio, dura per tutte le navigazioni nelle pagine?
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:
- Spiegazione delle norme sulle funzionalità
- Specifiche di Feature Policy
- Demo di lavello da cucina
- Estensione DevTools per norme sulle funzionalità: tester per provare i criteri relativi alle funzionalità in una pagina.
- Voci di chromestatus.com