I client hint 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é dover analizzarli a partire dalla stringa dello user agent (UA). Fornire questa route alternativa è il primo passaggio per ridurre infine 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 invece i client hint dello user agent.
Contesto
Quando i browser web effettuano richieste, includono informazioni sul browser e sul suo ambiente in modo che i server possano abilitare l'analisi e personalizzare la risposta. Questa definizione risale al 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 era destinata a specificare, in ordine di significatività, il prodotto (ad es. browser o libreria) e un commento (ad esempio, la versione).
Lo stato della stringa User-Agent
Nei decenni intermedi, questa stringa ha accumulato una serie di dettagli aggiuntivi sul client che ha effettuato la richiesta (nonché inutili, a causa della compatibilità con versioni precedenti). Osservando la stringa attuale dello user agent di Chrome, notiamo che:
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 precedente contiene informazioni sul sistema operativo e sulla versione dell'utente, sul modello del dispositivo, sul brand e sulla versione completa del browser, abbastanza indizi 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 l'enorme diversità di valori possibili fa sì che la stringa User-Agent potrebbe contenere informazioni sufficienti per consentire ai singoli utenti di essere identificati in modo univoco. Se testi il tuo browser su AmIUnique, puoi vedere con che precisione la tua stringa User-Agent ti identifica. Più basso è il "Rapporto di somiglianza" risultato, più sono univoche le richieste, più facile sarà per i server tracciarti in modo nascosto.
La stringa User-Agent consente molti casi d'uso legittimi e ha uno scopo importante per sviluppatori e proprietari di siti. Tuttavia, è anche fondamentale che la privacy degli utenti sia protetta contro i metodi di monitoraggio nascosto e che l'invio di informazioni UA per impostazione predefinita vada contro questo obiettivo.
È inoltre necessario migliorare la compatibilità web per quanto riguarda la stringa user agent. Non è strutturato, quindi analizzarlo comporta una complessità superflua, il che spesso è la causa di bug e problemi di compatibilità del sito che danneggiano gli utenti. Questi problemi, inoltre, danneggiano in maniera sproporzionata gli utenti dei browser meno comuni, in quanto i siti potrebbero non aver superato i test sulla loro configurazione.
Introduzione ai nuovi client hint user agent
I client client hint dello user agent consentono l'accesso alle stesse informazioni, ma in modo più incentrato sulla tutela della privacy, consentendo ai browser di ridurre il valore predefinito della stringa dello user agent per la trasmissione di tutti i contenuti. I client hint applicano un modello in cui il server deve chiedere 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, anziché dover esporre tutte le informazioni sullo user agent per impostazione predefinita, ora l'accesso viene gestito in modo esplicito e verificabile. Inoltre, gli sviluppatori possono trarre vantaggio da un'API più semplice, senza più espressioni regolari.
L'insieme corrente di client hint descrive principalmente le funzionalità di visualizzazione e connessione del browser. Puoi esaminare i dettagli in Automazione della selezione delle risorse con i suggerimenti client, ma ecco un breve riepilogo sul processo.
Il server richiede client hint specifici tramite un'intestazione:
⬇️ Risposta dal server
Accept-CH: Viewport-Width, Width
Oppure 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 proprie risposte, ad esempio pubblicando immagini a una risoluzione appropriata.
I client hint user agent espandono l'intervallo 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 il messaggio esplicativo e poi approfondisci la proposta completa.
Client hint user agent di Chromium 89
La funzionalità Client hint user agent è attivata per impostazione predefinita in Chrome sin 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 delle richieste dello user agent
⬇️ Intestazione della richiesta della risposta Accept-CH⬆️ |
⬆️ Richiesta Valore di esempio |
Descrizione |
|---|---|---|
Sec-CH-UA |
"Chromium";v="84","Google Chrome";v="84" |
Elenco di brand di browser e relativa versione significativa. |
Sec-CH-UA-Mobile |
?1 |
Valore booleano che indica se il browser si trova su un dispositivo mobile (?1 per vero) o meno (?0 per falso). |
Sec-CH-UA-Full-Version |
"84.0.4143.2" |
[Deprecato]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 di 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 di base del dispositivo. Sebbene questo messaggio non sia pertinente alla visualizzazione della pagina, il sito potrebbe offrire un download che ha il formato corretto per impostazione predefinita. |
Sec-CH-UA-Model |
"Pixel 3" |
Il modello del dispositivo. |
Sec-CH-UA-Bitness |
"64" |
Bit dell'architettura sottostante (ovvero la dimensione in bit di un numero intero o di un indirizzo di memoria) |
Piattaforma di scambio di esempio
Una piattaforma di esempio potrebbe avere il seguente aspetto:
⬆️ Richiesta iniziale dal browser
Il browser richiede la pagina /downloads
al sito e invia lo 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 chiede 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 invia 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 predefinite delle intestazioni Sec-CH-UA, Sec-CH-UA-Mobile e
Sec-CH-UA-Platform 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";
I valori aggiuntivi sono accessibili tramite la chiamata getHighEntropyValues(). Il termine di "alta entropia" è un riferimento all'entropia delle informazioni, ovvero la quantità di informazioni rivelate da questi valori sul browser dell'utente. Come per la richiesta di intestazioni aggiuntive, la scelta degli eventuali valori che vengono restituiti dipende dal browser.
// 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 dei suggerimenti
I suggerimenti specificati tramite l'intestazione Accept-CH verranno inviati per tutta la durata della sessione del browser o fino a quando 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à quindi l'intestazione Sec-CH-UA-Full-Version-List a tutte le richieste
per il sito fino alla 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, sostituirà completamente i suggerimenti attuali inviati dal browser.
⬇️ Risposta
Accept-CH: Sec-CH-UA-Bitness
⬆️ Richieste successive
Sec-CH-UA-Platform: "64"
Il campo Sec-CH-UA-Full-Version-List richiesto in precedenza non verrà inviato.
È preferibile pensare che l'intestazione Accept-CH specifichi l'insieme completo di suggerimenti desiderati per la pagina, il che significa che il browser invia i suggerimenti specificati per tutte le sottorisorse di quella pagina. Anche se i suggerimenti continueranno a essere visualizzati alla navigazione successiva, il sito non deve fare affidamento né presumere che verranno forniti.
Puoi utilizzarlo anche per cancellare in modo efficace tutti i suggerimenti inviati dal browser
inviando un Accept-CH vuoto nella risposta. Ti consigliamo di aggiungerlo ovunque l'utente stia reimpostando le preferenze o esce dal tuo sito.
Questo pattern corrisponde anche al funzionamento dei suggerimenti nel tag <meta http-equiv="Accept-CH" …>. I suggerimenti richiesti verranno inviati solo per le richieste avviate dalla pagina e non durante la navigazione successiva.
Ambito dei suggerimenti e richieste multiorigine
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 sono su https://downloads.example.com, non
riceveranno alcun suggerimento.
Per consentire gli hint sulle richieste multiorigine, ogni hint e ogni origine devono essere specificati da un'intestazione Permissions-Policy. Per applicarlo a un client hint user agent, devi scrivere il suggerimento in minuscolo 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 devi 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 client hint user agent.
Inoltre, ti consigliamo di riesaminare l'utilizzo delle informazioni sullo user agent e, se possibile, di sostituirle con altri metodi. Spesso, puoi perseguire lo stesso obiettivo utilizzando il miglioramento progressivo, il rilevamento di funzionalità o il design reattivo. Il problema di base nell'utilizzo dei dati dello user agent è che mantieni sempre una mappatura tra la proprietà che stai ispezionando e il comportamento che attiva. È un overhead di manutenzione per garantire che il rilevamento sia completo e aggiornato.
Tenendo presente queste avvertenze, il repository User-Agent Client Hints elenca alcuni casi d'uso validi per i siti.
Cosa succede alla stringa User-Agent?
Il piano è ridurre al minimo la possibilità di eseguire il monitoraggio nascosto sul web riducendo la quantità di informazioni identificative esposte dalla stringa user agent esistente, senza causare interruzioni eccessive sui siti esistenti. L'introduzione di User-Agent Client Hints ora ti offre 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 User-Agent verranno ridotte in modo da mantenere il formato legacy, fornendo solo le stesse informazioni significative sul browser di alto livello e sulla versione significative dei suggerimenti predefiniti. In Chromium, questa modifica è stata differita almeno fino al 2022 per fornire all'ecosistema più tempo per valutare le nuove funzionalità dei client hint degli user agent.
Puoi testare una versione attivando il flag about://flags/#reduce-user-agent da Chrome 93 (nota: questo flag aveva il nome about://flags/#freeze-user-agent nelle versioni Chrome 84-92). Verrà restituita una stringa con le voci cronologiche per motivi di compatibilità, ma con specifiche sanitizzate. 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