I client hint dello user agent sono una nuova espansione dell'API Client Hints, che consente agli sviluppatori di accedere alle informazioni sul browser di un utente in modo ergonomico e incentrato sulla tutela della privacy.
I client hint consentono agli sviluppatori di richiedere attivamente informazioni sul dispositivo o sulle condizioni dell'utente, anziché doverli analizzare al di fuori della stringa dello user agent (UA). Fornire questa route alternativa è il primo passaggio per ridurre alla fine la granularità delle stringhe dello user agent.
Scopri come aggiornare la funzionalità esistente che si basa sull'analisi della stringa dello user agent per utilizzare i client hint dello user agent.
Contesto
Quando i browser web effettuano richieste, includono informazioni sul browser e sul relativo ambiente, in modo che i server possano abilitare l'analisi e personalizzare la risposta. Questa definizione è stata definita fin dal 1996 (RFC 1945 per HTTP/1.0), dove puoi trovare la definizione originale della stringa User-Agent, che include un esempio:
User-Agent: CERN-LineMode/2.15 libwww/2.17b3
Questa intestazione doveva specificare, in ordine di significato, il prodotto (ad es. browser o libreria) e un commento (ad es. la versione).
Lo stato della stringa user agent
Nel corso dei decenni intermedi, questa stringa ha accumulato una serie di dettagli aggiuntivi sul client che ha effettuato la richiesta (nonché non soddisfacente, per via della compatibilità con le versioni precedenti). Vediamo che quando osserviamo l'attuale stringa dello user agent di Chrome:
Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4076.0 Mobile Safari/537.36
La stringa riportata sopra contiene informazioni sul sistema operativo e sulla versione dell'utente, sul modello di dispositivo, sul brand e sulla versione completa del browser, indizi sufficienti per dedurre che si tratta di un browser mobile e per non menzionare una serie di riferimenti ad altri browser per motivi storici.
La combinazione di questi parametri con la grande varietà di valori possibili significa che la stringa dello user agent potrebbe contenere informazioni sufficienti per consentire l'identificazione univoca dei singoli utenti.
La stringa user agent consente molti casi d'uso legittimi e ha uno scopo importante per sviluppatori e proprietari di siti. Tuttavia, è altrettanto importante che la privacy degli utenti sia protetta da metodi di monitoraggio occulti e che l'invio di informazioni UA per impostazione predefinita sia efficace per raggiungere questo obiettivo.
C'è anche la necessità di migliorare la compatibilità web per quanto riguarda la stringa user agent. Non è strutturato, pertanto l'analisi risulta in una complessità superflua, che spesso è la causa di bug e problemi di compatibilità del sito che danneggiano gli utenti. Inoltre, questi problemi danneggiano sproporzionatamente gli utenti di browser meno comuni, in quanto i siti potrebbero non essere riusciti a eseguire i test sulla propria configurazione.
Presentazione dei nuovi client hint dello user agent
I client hint dello user agent consentono di accedere alle stesse informazioni, ma in un modo più incentrato sulla tutela della privacy, consentendo ai browser di ridurre alla fine l'impostazione predefinita della stringa user agent relativa alla trasmissione di tutto. I client hint prevedono l'applicazione di un modello in cui il server deve richiedere al browser un set di dati sul client (i suggerimenti) e il browser applica i propri criteri o la configurazione utente per determinare quali dati vengono restituiti. Ciò significa che, invece di esporre tutte le informazioni dello user agent per impostazione predefinita, l'accesso è ora gestito in modo esplicito e verificabile. Gli sviluppatori beneficiano anche di un'API più semplice: niente più espressioni regolari.
L'insieme attuale di client hint descrive principalmente le funzionalità di visualizzazione e connessione del browser. Puoi esplorare i dettagli in Automatizzare la selezione delle risorse con i client hint, ma ecco un rapido riepilogo della procedura.
Il server richiede client hint specifici tramite un'intestazione:
⬇️ Risposta dal server
Accept-CH: Viewport-Width, Width
O un meta tag:
<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />
Il browser può quindi scegliere di inviare le seguenti intestazioni nelle richieste successive:
⬆️ Richiesta successiva
Viewport-Width: 460
Width: 230
Il server può scegliere di variare le sue risposte, ad esempio pubblicando immagini a una risoluzione appropriata.
I client hint dello user agent ampliano la gamma di proprietà con il prefisso Sec-CH-UA
che può essere specificato tramite l'intestazione della risposta del server Accept-CH. Per tutti i dettagli, inizia con la spiegazione, poi approfondisci la proposta completa.
Client hint user agent da Chromium 89
I client hint dello user agent sono abilitati per impostazione predefinita in Chrome a partire dalla versione 89.
Per impostazione predefinita, il browser restituisce il brand del browser, la versione significativa / principale, la piattaforma e un indicatore se il client è un dispositivo mobile:
⬆️ Tutte le richieste
Sec-CH-UA: "Chromium";v="93", "Google Chrome";v="93", " Not;A Brand";v="99"
Sec-CH-UA-Mobile: ?0
Sec-CH-UA-Platform: "macOS"
Intestazioni della risposta e della richiesta dello user agent
⬇️ Risposta Accept-CH⬆️ Intestazione della richiesta |
⬆️ Richiesta Valore di esempio |
Descrizione |
|---|---|---|
Sec-CH-UA |
"Chromium";v="84","Google Chrome";v="84" |
Elenco dei brand di browser e relativa versione significativa. |
Sec-CH-UA-Mobile |
?1 |
Valore booleano che indica se il browser è su un dispositivo mobile (?1 per vero) o meno (?0 per falso). |
Sec-CH-UA-Full-Version |
"84.0.4143.2" |
[Deprecata]La versione completa del browser. |
Sec-CH-UA-Full-Version-List |
"Chromium";v="84.0.4143.2","Google Chrome";v="84.0.4143.2" |
Elenco dei brand di browser e relativa versione completa. |
Sec-CH-UA-Platform |
"Android" |
La piattaforma del dispositivo, in genere il sistema operativo. |
Sec-CH-UA-Platform-Version |
"10" |
La versione della piattaforma o del sistema operativo. |
Sec-CH-UA-Arch |
"arm" |
L'architettura sottostante del dispositivo. Questo potrebbe non essere pertinente per la visualizzazione della pagina, ma il sito potrebbe offrire un download che per impostazione predefinita ha il formato corretto. |
Sec-CH-UA-Model |
"Pixel 3" |
Il modello del dispositivo. |
Sec-CH-UA-Bitness |
"64" |
La quantità di bit dell'architettura sottostante (ovvero la dimensione in bit di un numero intero o di un indirizzo di memoria) |
Piattaforma di esempio
Ecco un esempio di scambio:
⬆️ Richiesta iniziale dal browser
Il browser richiede la pagina /downloads
dal sito e invia il suo user agent di base predefinito.
GET /downloads HTTP/1.1
Host: example.site
Sec-CH-UA: "Chromium";v="93", "Google Chrome";v="93", " Not;A Brand";v="99"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Platform: "Android"
⬇️ Risposta dal server
Il server restituisce la pagina e richiede inoltre
la versione completa del browser e la piattaforma.
HTTP/1.1 200 OK
Accept-CH: Sec-CH-UA-Full-Version-List
⬆️ Richieste successive
Il browser concede al server l'accesso alle informazioni aggiuntive e restituisce i suggerimenti aggiuntivi in tutte le richieste successive.
GET /downloads/app1 HTTP/1.1
Host: example.site
Sec-CH-UA: " Not A;Brand";v="99", "Chromium";v="98", "Google Chrome";v="98"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Full-Version-List: " Not A;Brand";v="99.0.0.0", "Chromium";v="98.0.4738.0", "Google Chrome";v="98.0.4738.0"
Sec-CH-UA-Platform: "Android"
API JavaScript
Oltre alle intestazioni, è possibile accedere allo user agent anche in JavaScript tramite navigator.userAgentData. È possibile accedere alle informazioni delle intestazioni Sec-CH-UA, Sec-CH-UA-Mobile e Sec-CH-UA-Platform predefinite tramite le proprietà brands e mobile, rispettivamente:
// Log the brand data
console.log(navigator.userAgentData.brands);
// output
[
{
brand: 'Chromium',
version: '93',
},
{
brand: 'Google Chrome',
version: '93',
},
{
brand: ' Not;A Brand',
version: '99',
},
];
// Log the mobile indicator
console.log(navigator.userAgentData.mobile);
// output
false;
// Log the platform value
console.log(navigator.userAgentData.platform);
// output
"macOS";
Si accede ai valori aggiuntivi tramite la chiamata getHighEntropyValues(). Il termine "alta entropia" è un riferimento all'entropia delle informazioni, in altre parole, alla quantità di informazioni che questi valori rivelano sul browser dell'utente. Come per la richiesta di intestazioni aggiuntive, dipende dal browser
quali valori vengono eventualmente restituiti.
// Log the full user-agent data
navigator
.userAgentData.getHighEntropyValues(
["architecture", "model", "bitness", "platformVersion",
"fullVersionList"])
.then(ua => { console.log(ua) });
// output
{
"architecture":"x86",
"bitness":"64",
"brands":[
{
"brand":" Not A;Brand",
"version":"99"
},
{
"brand":"Chromium",
"version":"98"
},
{
"brand":"Google Chrome",
"version":"98"
}
],
"fullVersionList":[
{
"brand":" Not A;Brand",
"version":"99.0.0.0"
},
{
"brand":"Chromium",
"version":"98.0.4738.0"
},
{
"brand":"Google Chrome",
"version":"98.0.4738.0"
}
],
"mobile":false,
"model":"",
"platformVersion":"12.0.1"
}
Demo
Puoi provare sia le intestazioni sia l'API JavaScript sul tuo dispositivo all'indirizzo user-agent-client-hints.glitch.me.
Durata e reimpostazione del suggerimento
I suggerimenti specificati tramite l'intestazione Accept-CH verranno inviati per la durata della
sessione del browser o finché non viene specificato un insieme diverso di suggerimenti.
Ciò significa che se il server invia:
⬇️ Risposta
Accept-CH: Sec-CH-UA-Full-Version-List
Il browser invierà l'intestazione Sec-CH-UA-Full-Version-List su tutte le richieste per quel sito fino alla sua chiusura.
⬆️ Richieste successive
Sec-CH-UA-Full-Version-List: " Not A;Brand";v="99.0.0.0", "Chromium";v="98.0.4738.0", "Google Chrome";v="98.0.4738.0"
Tuttavia, se viene ricevuta un'altra intestazione Accept-CH, questa sostituirà completamente i suggerimenti correnti che il browser sta inviando.
⬇️ Risposta
Accept-CH: Sec-CH-UA-Bitness
⬆️ Richieste successive
Sec-CH-UA-Platform: "64"
L'oggetto Sec-CH-UA-Full-Version-List richiesto in precedenza non verrà inviato.
È meglio pensare all'intestazione Accept-CH come a una specifica del set completo di suggerimenti desiderati per la pagina. Ciò significa che il browser invia quindi i suggerimenti specificati per tutte le risorse secondarie di quella pagina. Anche se i suggerimenti continueranno a essere visualizzati durante
la navigazione successiva, il sito non deve fare affidamento né presumere che vengano pubblicati.
Puoi anche utilizzarlo per cancellare in modo efficace tutti i suggerimenti inviati dal browser
inviando un campo Accept-CH vuoto nella risposta. Valuta la possibilità di aggiungerlo ovunque l'utente reimposti le preferenze o esce dal sito.
Questo pattern corrisponde anche al funzionamento dei suggerimenti tramite il tag <meta http-equiv="Accept-CH" …>. I suggerimenti richiesti verranno inviati solo per le richieste avviate dalla pagina e non in qualsiasi navigazione successiva.
Richieste multiorigine e ambito dei suggerimenti
Per impostazione predefinita, i client hint verranno inviati solo per le richieste della stessa origine. Ciò significa
che se chiedi suggerimenti specifici su https://example.com, ma le risorse che
vuoi ottimizzare si trovano su https://downloads.example.com, questi non
riceveranno alcun suggerimento.
Per consentire i hint per le richieste multiorigine, ogni hint e ogni origine devono essere specificati
da un'intestazione Permissions-Policy. Per applicarlo a un client hint dello user agent, devi
scrivere in minuscolo il hint e rimuovere il prefisso sec-. Ad esempio:
⬇️ Risposta da example.com
Accept-CH: Sec-CH-UA-Platform-Version, DPR
Permissions-Policy: ch-ua-platform-version=(self "downloads.example.com"),
ch-dpr=(self "cdn.provider" "img.example.com");
⬆️ Richiesta a downloads.example.com
Sec-CH-UA-Platform-Version: "10"
⬆️ Richieste a cdn.provider o img.example.com
DPR: 2
Dove utilizzare i client hint dello user agent?
La risposta rapida è che dovresti eseguire il refactoring di tutte le istanze in cui stai analizzando l'intestazione User-Agent o utilizzando qualsiasi chiamata JavaScript che accede alle stesse informazioni (ad es. navigator.userAgent, navigator.appVersion o navigator.platform) per utilizzare i client hint dello user agent.
Inoltre, dovresti riesaminare l'utilizzo delle informazioni dello user agent e sostituirle con altri metodi, se possibile. Spesso puoi raggiungere lo stesso obiettivo utilizzando il miglioramento progressivo, il rilevamento delle funzionalità o il design reattivo. Il problema di base dell'utilizzo dei dati dello user agent è che mantieni sempre un mapping tra la proprietà che stai ispezionando e il comportamento che consente. È un overhead di manutenzione per garantire che il rilevamento sia completo e aggiornato.
Tenendo a mente queste avvertenze, il repository Client Hints dello user agent elenca alcuni casi d'uso validi per i siti.
Cosa succede alla stringa user agent?
Il piano prevede di ridurre al minimo la possibilità di monitoraggio nascosto sul web riducendo la quantità di informazioni identificative esposte dalla stringa User-Agent esistente, senza causare interruzioni indebite sui siti esistenti. I suggerimenti client dello user agent ti offrono la possibilità di comprendere e sperimentare la nuova funzionalità, prima che vengano apportate modifiche alle stringhe dello user agent.
Alla fine, le informazioni nella stringa dello user agent verranno ridotte in modo da mantenere il formato legacy, fornendo al contempo lo stesso browser di alto livello e le stesse informazioni sulla versione significative come per i suggerimenti predefiniti. In Chromium, questa modifica è stata posticipata almeno fino al 2022 per fornire all'ecosistema più tempo per valutare le nuove funzionalità dei client hint dello user agent.
Puoi testare una versione di questa funzionalità attivando il flag about://flags/#reduce-user-agent da Chrome 93 (nota: questo flag era denominato about://flags/#freeze-user-agent nelle versioni Chrome 84 e 92). Verrà restituita una stringa con le voci storiche per motivi di compatibilità, ma con specifiche convalidate. Ad esempio:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.0.0 Mobile Safari/537.36
Miniatura di Sergey Zolkin su Unsplash