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.
Gli indicatori client consentono agli sviluppatori di richiedere attivamente informazioni sul dispositivo o sulle condizioni dell'utente, anziché doverle analizzare dalla stringa User-Agent (UA). Fornire questo percorso alternativo è il primo passo per eventualmente ridurre la granularità della stringa User-Agent.
Scopri come aggiornare la funzionalità esistente che si basa sull'analisi della stringa User-Agent per utilizzare invece gli indicatori client User-Agent.
Sfondo
Quando i browser web effettuano richieste, includono informazioni sul browser e sul suo ambiente in modo che i server possano attivare l'analisi e personalizzare la risposta. Questo valore è stato definito nel lontano 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 importanza, il prodotto (ad es. browser o libreria) e un commento (ad es. versione).
Lo stato della stringa user agent
Nel corso delle decennie trascorse, questa stringa ha accumulato una serie di dettagli aggiuntivi sul client che effettua la richiesta (oltre a del cruft, a causa della compatibilità con le versioni precedenti). Lo possiamo vedere osservando la stringa User-Agent corrente 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 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, è anche fondamentale proteggere la privacy degli utenti dai metodi di monitoraggio occulto e l'invio delle informazioni UA per impostazione predefinita va contro questo obiettivo.
È inoltre necessario migliorare la compatibilità web per quanto riguarda la stringa User-Agent. Poiché non è strutturato, l'analisi comporta una complessità non necessaria, che spesso è la causa di bug e problemi di compatibilità del sito che danneggiano gli utenti. Questi problemi danneggiano in modo sproporzionato anche gli utenti di browser meno comuni, poiché i siti potrebbero non aver superato il test in base alla loro configurazione.
Introduzione ai nuovi client hint dello user agent
I suggerimenti client dello user agent consentono di accedere alle stesse informazioni, ma in modo più rispettoso della privacy, il che consente ai browser di ridurre eventualmente la trasmissione di tutto per impostazione predefinita della stringa dello user agent. Gli suggerimenti client applicano un modello in cui il server deve chiedere al browser un insieme di dati sul client (i suggerimenti) e il browser applica le proprie norme o la configurazione dell'utente per determinare quali dati vengono restituiti. Ciò significa che, anziché esporre tutte le informazioni sull'User-Agent per impostazione predefinita, ora l'accesso viene gestito in modo esplicito e controllabile. Gli sviluppatori beneficiano anche di un'API più semplice: niente più espressioni regolari.
L'attuale insieme di Client Hints descrive principalmente le funzionalità di visualizzazione e connessione del browser. Puoi esaminare i dettagli in Automating Resource Selection with Client Hints, ma di seguito è riportato un breve riepilogo della procedura.
Il server richiede Client Hints 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 nuovamente 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 con una risoluzione appropriata.
I suggerimenti client dello user agent espandono l'intervallo di proprietà con il prefisso Sec-CH-UA
che può essere specificato tramite l'intestazione di risposta del server Accept-CH. Per tutti i dettagli, inizia con l'articolo esplicativo e poi consulta la proposta completa.
User-Agent Client Hints da Chromium 89
Gli User-Agent Client Hints sono stati attivati per impostazione predefinita in Chrome 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 di risposta e richiesta User-Agent
⬇️ Risposta Accept-CH⬆️ Intestazione della richiesta |
⬆️ Richiedi Valore di esempio |
Descrizione |
|---|---|---|
Sec-CH-UA |
"Chromium";v="84","Google Chrome";v="84" |
Elenco dei brand di browser e della 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" |
[Ritiro] 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 delle relative versioni complete. |
Sec-CH-UA-Platform |
"Android" |
La piattaforma del dispositivo, in genere il sistema operativo. |
Sec-CH-UA-Platform-Version |
"10" |
La versione per la piattaforma o il sistema operativo. |
Sec-CH-UA-Arch |
"arm" |
L'architettura sottostante del dispositivo. Anche se questo potrebbe non essere pertinente per la visualizzazione della pagina, il sito potrebbe voler offrire un download che abbia come formato predefinito quello corretto. |
Sec-CH-UA-Model |
"Pixel 3" |
Il modello del dispositivo. |
Sec-CH-UA-Bitness |
"64" |
La dimensione in bit dell'architettura di base (ovvero la dimensione in bit di un numero intero o di un indirizzo di memoria) |
Scambio di esempio
Un esempio di scambio potrebbe essere il seguente:
⬆️ Richiesta iniziale dal browser
Il browser richiede la pagina /downloads
del 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 del server
Il server invia di nuovo 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 nuovamente gli indizi extra 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 in JavaScript anche tramite navigator.userAgentData. È possibile accedere alle informazioni dell'intestazione predefinite 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 "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.
Tempo di vita 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à l'intestazione Sec-CH-UA-Full-Version-List a tutte le richieste per quel sito fino alla chiusura del browser.
⬆️ 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 inviati dal browser.
⬇️ Risposta
Accept-CH: Sec-CH-UA-Bitness
⬆️ Richieste successive
Sec-CH-UA-Platform: "64"
Sec-CH-UA-Full-Version-List non verrà inviato.
È meglio considerare l'intestazione Accept-CH come specifica dell'insieme completo di suggerimenti desiderati per quella pagina, il che significa che il browser invia i suggerimenti specificati per tutte le risorse secondarie nella pagina. Sebbene i suggerimenti rimangano fino alla navigazione successiva, il sito non deve fare affidamento su di essi o presumere che verranno visualizzati.
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.
Ambito degli indizi e richieste cross-origin
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, non riceveranno alcun suggerimento.
Per consentire i suggerimenti per le richieste cross-origin, ogni suggerimento e origine deve essere specificato
da un'intestazione Permissions-Policy. Per applicarlo a un client hint User-Agent, devi impostare il client hint 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");
⬆️ Richiedi 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 User-Agent?
La risposta rapida è che devi eseguire il refactoring di tutte le istanze in cui analizzi
l'intestazione User-Agent o utilizzi una delle chiamate JavaScript che
accedono alle stesse informazioni (ad es. navigator.userAgent, navigator.appVersion,
o navigator.platform) per utilizzare invece gli indicatori client User-Agent.
Per fare un ulteriore passo avanti, ti consigliamo di rivedere l'utilizzo delle informazioni sull'agente utente e di sostituirle con altri metodi, se possibile. Spesso puoi raggiungere lo stesso obiettivo utilizzando il miglioramento progressivo, il rilevamento delle funzionalità o il design responsive. Il problema di base dell'utilizzo dei dati dell'agente utente è che devi sempre mantenere una mappatura tra la proprietà che stai ispezionando e il comportamento che consente. Si tratta di un sovraccarico di manutenzione per garantire che il rilevamento sia completo e rimanga aggiornato.
Tenendo presente queste limitazioni, il repository di Client Hints per gli user-agent elenca alcuni casi d'uso validi per i siti.
Che 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. L'introduzione degli User-Agent Client Hints ora ti offre la possibilità di comprendere e sperimentare la nuova funzionalità, prima che vengano apportate modifiche alle stringhe User-Agent.
In futuro, le informazioni nella stringa User-Agent verranno ridotte in modo da mantenere il formato precedente, fornendo al contempo solo le stesse informazioni di alto livello sul browser e sulla versione significative come da 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 si chiamava about://flags/#freeze-user-agent nelle versioni Chrome 84-92). Verrà
restituito un stringa con le voci storiche per motivi di compatibilità, ma con dettagli
sanificati. 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