Protezione del tuo sito con la politica sulle funzionalità

Una delle funzionalità della piattaforma Web evidenziate al recente Chrome Dev Summit è stata la Policy sulle funzionalità, che mira a "consentire agli autori del sito di abilitare e disabilitare selettivamente l'uso di varie funzionalità e API del browser". In questo articolo, darò un'occhiata a cosa significa per gli sviluppatori web, con alcuni esempi pratici.

Nel suo articolo introduttivo sul sito Google Developers, Eric Bidelman descrive le Norme sulle funzionalità come segue:

"Le stesse politiche sulle funzionalità sono piccoli accordi di attivazione tra sviluppatore e browser che possono aiutare a promuovere i nostri obiettivi di creazione (e mantenimento) di app Web di alta qualità".

La specifica è stata sviluppata da Google nell'ambito dell'attività del gruppo Web Platform Incubator. L'obiettivo della politica sulle funzionalità è per noi, come sviluppatori web, di poter dichiarare il nostro utilizzo di una funzionalità della piattaforma web, in modo esplicito nel browser. In tal modo, prendiamo un accordo sul nostro utilizzo o non utilizzo di questa particolare funzione. Sulla base di ciò, il browser può agire per bloccare determinate funzionalità o segnalarci che viene utilizzata una funzionalità che non si aspettava di vedere.

Gli esempi potrebbero includere:

1. Sto incorporando un iframe e non voglio che il sito incorporato possa accedere alla telecamera del mio visitatore;
2. Voglio catturare le situazioni in cui le immagini non ottimizzate vengono distribuite sul mio sito tramite il CMS;
3. Ci sono molti sviluppatori che lavorano al mio progetto e vorrei sapere se usano API obsolete come document.write .

Tutte queste cose possono essere tracciate, bloccate o segnalate come parte della Politica sulle funzionalità.

Come utilizzare la politica delle funzionalità

Per utilizzare la policy delle funzionalità, il browser deve sapere due cose: per quale funzionalità stai creando una policy e come desideri che tale funzionalità venga gestita.

 Feature-Policy: <directive> <allowlist>

La <directive> è il nome della funzione su cui si sta impostando il criterio.

L'attuale elenco di funzionalità (tratto dalla presentazione fornita al Chrome Dev Summit) è il seguente:

• accelerometro
• sensore di luce ambientale
• riproduzione automatica
• telecamera
• documento-scrittura
• media crittografato
• a schermo intero
• geolocalizzazione
• giroscopio
• layout-animazioni
• pigro
• formati di immagine legacy
• magnetometro
• midi
• immagini di grandi dimensioni
• pagamento
• immagine nell'immagine
• oratore
• script di sincronizzazione
• sync-xhr
• immagini non ottimizzate
• supporto non dimensionato
• USB
• scorrimento verticale
• vr

La <allowlist> descrive in dettaglio come è possibile utilizzare la funzione, se non del tutto, e assume uno o più dei seguenti valori.

• *
  La politica più liberale, affermando che la funzione sarà consentita in questo documento e qualsiasi iframe da questo dominio o altrove. Può essere utilizzato solo come valore unico in quanto non ha senso abilitare tutto e passare anche in un elenco di domini, ad esempio.
• self
  La funzione sarà disponibile nel documento e negli eventuali iframe, tuttavia, gli iframe devono avere la stessa origine.
• src
  Applicabile solo quando si utilizza un attributo di allow iframe. Ciò consente una funzionalità purché il documento caricato in essa provenga dalla stessa origine dell'URL nell'attributo src dell'iframe.
• none
  Disabilita la funzione per il documento e gli eventuali iframe nidificati. Può essere utilizzato solo come valore singolo.
• <origin(s)>
  La funzione è consentita per origini specifiche; ciò significa che puoi specificare un elenco di domini in cui la funzionalità è consentita. L'elenco dei domini è separato da uno spazio.

Esistono due metodi con cui puoi abilitare i criteri delle funzionalità sul tuo sito: puoi inviare un'intestazione HTTP o utilizzare l'attributo allow su un iframe.

Intestazione HTTP

L'invio di un'intestazione HTTP significa che puoi abilitare un criterio di funzionalità per la pagina o l'intero sito impostando quell'intestazione e anche qualsiasi cosa incorporata nel sito. Le intestazioni possono essere impostate per l'intero sito sul server Web o possono essere inviate dalla tua applicazione.

Ad esempio, se volessi impedire l'uso dell'API di geolocalizzazione e stavo utilizzando il server web NGINX, potrei modificare i file di configurazione per il mio sito in NGINX per aggiungere la seguente intestazione, che impedirebbe qualsiasi documento nel mio sito e qualsiasi iframe incorporato dall'utilizzo dell'API di geolocalizzazione.

 add_header Feature-Policy "geolocation none;";

È possibile impostare più criteri in un'unica intestazione. Per impedire la geolocalizzazione e la vibrazione, ma consentire unsized-media dal dominio example.com , potrei impostare quanto segue:

 add_header Feature-Policy "vibrate none; geolocation none; unsized-media https://example.com;";

L'attributo allow su iFrame

Se ci occupiamo principalmente di ciò che accade con il contenuto in un iframe, possiamo utilizzare la politica delle funzionalità sull'iframe stesso; questo beneficia di un supporto del browser leggermente migliore al momento della scrittura con Chrome e Safari che supportano questo utilizzo.

Se sto incorporando un sito e non voglio che quel sito utilizzi le API di geolocalizzazione, fotocamera o microfono, il mio iframe sarebbe simile al seguente esempio:

 <iframe allow="geolocation 'none'; camera 'none'; microphone 'none'">

Potresti già avere familiarità con i singoli attributi che controllano il contenuto degli iframe allowfullscreen , allowpaymentrequest e allowusermedia . Questi possono essere sostituiti dall'attributo allow criteri funzionalità e, per motivi di compatibilità del browser, puoi utilizzarli entrambi su un iframe. Se utilizzi entrambi gli attributi, verrà applicato quello più restrittivo. L'articolo di Google mostra un esempio di un iframe che utilizza allowfullscreen , il che significa che l'iframe può entrare a schermo intero, ma poi una norma sulle funzionalità in conflitto di fullscreen none . Questi sono in conflitto, quindi vince la politica più restrittiva e questo iframe non può entrare a schermo intero.

 <iframe allowfullscreen allow="fullscreen 'none'" src="...">

L'elemento iframe ha anche un attributo sandbox progettato per gestire il supporto per molte funzionalità. Questa funzionalità è stata aggiunta anche alla politica di sicurezza dei contenuti con un valore sandbox che disabilita tutte le funzionalità sandbox, che possono quindi essere riattivate in modo selettivo. Esiste un incrocio tra le funzionalità sandbox e quelle controllate da Feature Policy e Feature Policy non cerca di duplicare quei valori già coperti da sandbox. Tuttavia, affronta alcuni dei limiti della sandbox adottando un approccio più dettagliato alla gestione di queste politiche, piuttosto che disattivare tutto a livello globale come un unico insieme di politiche di grandi dimensioni.

Criterio delle funzionalità e API di reporting

Le violazioni delle norme sulle funzionalità possono essere segnalate tramite l'API di segnalazione, il che significa che puoi sviluppare una serie completa di norme che tengono traccia dell'utilizzo delle funzionalità nel tuo sito. Questo sarebbe completamente trasparente per i tuoi utenti ma ti fornirà un'enorme quantità di informazioni su come vengono utilizzate le funzionalità.

Supporto browser per criteri di funzionalità

Attualmente, il supporto del browser per le norme sulle funzionalità è limitato a Chrome, tuttavia, in molti casi in cui si utilizzano le norme sulle funzionalità durante lo sviluppo e durante l'anteprima dei siti, questo non è necessariamente un problema.

Molti dei casi d'uso che descriverò di seguito sono utilizzabili in questo momento, senza causare alcun impatto ai visitatori del sito che utilizzano i browser senza supporto.

Quando utilizzare la politica delle funzionalità

Mi piace molto l'idea di poter utilizzare la policy delle funzionalità per supportare le decisioni prese durante lo sviluppo del sito. Decisioni che possono benissimo essere scritte in documenti come un budget di performance o come parte di un audit GDPR, ma che poi diventano qualcosa che dobbiamo ricordare per preservare per tutta la vita del sito. Questo non è sempre facile quando più persone lavorano su un sito; persone che forse non sono state coinvolte durante quel processo decisionale iniziale, o potrebbero semplicemente non essere a conoscenza dei requisiti. Pensiamo molto alle terze parti che riescono in qualche modo ad avere un impatto sul nostro sito, tuttavia, a volte i nostri siti hanno bisogno di protezione da noi stessi!

Tenere d'occhio le terze parti

È possibile impedire a un sito di terze parti di accedere alla videocamera o al microfono utilizzando un criterio di funzionalità sull'iframe con l'attributo allow . Se il motivo per incorporare quel sito non ha nulla a che fare con queste funzionalità, disabilitarle significa che il sito non potrà mai iniziare a richiederle. Questo potrebbe quindi essere collegato ai tuoi processi per garantire la conformità al GDPR. Mentre controlli l'impatto sulla privacy del tuo sito, puoi creare processi per bloccare l'accesso di terze parti tramite criteri di funzionalità, offrendo a te e ai tuoi visitatori ulteriore sicurezza e tranquillità.

Questo utilizzo si basa sul supporto del browser per la politica delle funzionalità per bloccare l'utilizzo. Tuttavia, puoi utilizzare la modalità di reportistica delle policy delle funzionalità per informarti dell'utilizzo di queste API se la terza parte ha modificato ciò che avrebbe fatto. Questo ti darebbe un avviso molto rapido, essenzialmente non appena la prima persona che utilizza Chrome raggiunge il sito.

Funzioni di abilitazione selettiva

Potremmo anche voler abilitare selettivamente alcune funzionalità che normalmente sono bloccate. Forse desideriamo consentire a un iframe che carica contenuto da un altro sito di utilizzare la funzione di geolocalizzazione nel browser. Chrome per impostazione predefinita lo blocca, ma se stai caricando contenuti da un sito attendibile puoi abilitare la richiesta multiorigine utilizzando i criteri delle funzionalità. Ciò significa che puoi attivare in sicurezza le funzionalità durante il caricamento di contenuti da un altro dominio che è sotto il tuo controllo.

Cattura l'uso di API obsolete e funzionalità con prestazioni scadenti

La policy delle funzionalità può essere eseguita in modalità di solo report. Può quindi tenere traccia dell'utilizzo di determinate funzionalità e farti sapere quando vengono trovate sul sito. Questo può essere utile in molti scenari. Se disponi di un sito molto grande con molto codice legacy, l'abilitazione di criteri funzionalità ti aiuterebbe a rintracciare i luoghi che richiedono attenzione. Se lavori con un team di grandi dimensioni (soprattutto se gli sviluppatori inseriscono spesso alcune librerie di codice di terze parti), i criteri delle funzionalità possono rilevare elementi che preferiresti non vedere sul sito.

Gestire immagini scarsamente ottimizzate

Mentre la maggior parte degli articoli che ho visto sulla politica delle funzionalità si concentrano sugli aspetti di sicurezza e privacy, le funzionalità relative all'ottimizzazione delle immagini mi hanno davvero attratto, in quanto persona che si occupa di molti contenuti generati da utenti tecnici e non. Le norme sulle funzionalità possono essere utilizzate per proteggere l'esperienza dell'utente e le prestazioni del tuo sito impedendo che immagini eccessivamente grandi o non ottimizzate vengano scaricate dai visitatori.

In un mondo ideale, il tuo CMS si occuperebbe della gestione delle immagini, assicurando che le immagini siano ridimensionate in modo ragionevole, ottimizzate per il Web e il contesto in cui verranno visualizzate. La vita reale è raramente quel mondo ideale, tuttavia, e quindi a volte il lavoro di ridimensionamento e l'ottimizzazione delle immagini è lasciata agli editor di contenuti per assicurarsi che non carichino immagini di grandi dimensioni sul Web. Questo è particolarmente un problema se si utilizza un CMS statico senza un livello di gestione del contenuto su di esso. Anche come persona tecnica, è molto facile dimenticare di ridimensionare quello screenshot gigante o l'immagine della fotocamera che hai inserito in una cartella come segnaposto.

Attualmente dietro una bandiera in Chrome ci sono funzionalità che possono aiutare. L'idea alla base di queste funzionalità è quella di evidenziare le immagini problematiche in modo che possano essere riparate, senza interrompere completamente il sito.

La unsized-media non dimensionato cerca immagini o video che non hanno una dimensione impostata nell'HTML o nel CSS. Quando un elemento multimediale non dimensionato viene caricato, il contenuto della pagina può scorrere nuovamente.

Per evitare che qualsiasi supporto non dimensionato venga aggiunto al sito, impostare la seguente intestazione. Il supporto verrà quindi visualizzato con una dimensione predefinita di 300 × 150 pixel. Vedrai il tuo sito caricarsi con piccoli media e ti renderai conto che hai un problema da risolvere.

 Feature-Policy: unsized-media 'none'

Guarda una demo (necessita di Chrome Canary con le funzionalità della piattaforma web sperimentale attiva).

La funzionalità per oversized-images controlla i criteri per verificare che le immagini non siano molto grandi del loro contenitore. Se lo sono, verrà invece mostrato un segnaposto. Questa politica è incredibilmente utile per verificare che non stai inviando enormi immagini desktop ai tuoi utenti mobili.

 Feature-Policy: oversized-images 'none'

Guarda una demo (necessita di Chrome Canary con le funzionalità della piattaforma web sperimentale attiva).

La politica della funzionalità delle unoptimized-images controlla se la dimensione dei dati delle immagini in byte non è superiore a 0,5 volte la sua area di rendering in pixel. Se questa norma è abilitata e le immagini la violano, verrà mostrato un segnaposto al posto dell'immagine.

 Feature-Policy: unoptimized-images 'none'

Guarda una demo (necessita di Chrome Canary con le funzionalità della piattaforma web sperimentale attiva).

Test e rapporti sulla politica delle funzionalità

Chrome DevTools visualizzerà un messaggio per informarti che alcune funzionalità sono state bloccate o abilitate da una policy delle funzionalità. Se hai abilitato la Politica sulle funzionalità sul tuo sito, puoi verificare che funzioni.

Il supporto per i criteri di funzionalità è stato aggiunto anche al sito delle intestazioni di sicurezza, il che significa che puoi verificarli insieme a intestazioni come Criteri di sicurezza dei contenuti sul tuo sito o altri siti sul Web.

C'è un'estensione Chrome DevTools che ti consente di attivare e disattivare diversi criteri delle funzionalità (anche un ottimo modo per controllare le tue pagine senza dover configurare alcuna intestazione).

Se desideri integrare i criteri delle funzionalità con l'API di reporting, sono disponibili ulteriori informazioni su come farlo qui.

Ulteriori letture e risorse

Ho trovato una serie di risorse, molte delle quali ho usato durante la ricerca di questo articolo. Questi dovrebbero darti tutto ciò di cui hai bisogno per iniziare a implementare la politica delle funzionalità nelle tue applicazioni. Se stai già utilizzando le Norme sulla sicurezza dei contenuti, questo sembra un ulteriore passaggio logico verso il controllo del modo in cui il tuo sito funziona con il browser per garantire la sicurezza e la privacy delle persone che utilizzano il tuo sito. Hai il vantaggio aggiuntivo di poter utilizzare la Politica sulle funzionalità per aiutarti a tenere il passo con gli elementi dannosi per le prestazioni che vengono aggiunti al tuo sito nel tempo.

• Specifica della politica delle caratteristiche
• Introduzione alla politica delle funzionalità
• Vista da Chrome Dev Summit
• Criterio delle funzionalità su MDN
• Posso usare la politica delle funzionalità
• Demo di criteri di funzionalità
• Imposta le intestazioni di criteri di funzionalità, criteri di riferimento e criteri di sicurezza dei contenuti in Nginx