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 nel rispetto 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, oltre a 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 gli sviluppatori e i 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 dell'XML 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 del 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 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 il messaggio esplicativo e poi consulta la proposta completa.
User-Agent Client Hints da Chromium 89
I client hint User-Agent sono stati attivati per impostazione predefinita in Chrome dalla versione 89.
Per impostazione predefinita, il browser restituisce il brand del browser, la versione principale / significativa, la piattaforma e un indicatore che indica 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 dello user agent
⬇️ Intestazione della richiesta Accept-CH⬆️ Risposta |
⬆️ 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 true) o meno (?0 per false). |
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 inoltre chiede 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 che nelle intestazioni, in JavaScript è possibile accedere all'User-Agent 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" fa riferimento all'entropia dell'informazione, in altre parole alla quantità di informazioni che questi valori rivelano sul browser dell'utente. Come per la richiesta delle intestazioni aggiuntive, è il browser a decidere quali valori, se presenti, vengono 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 gli header 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 ricevuto un altro intestazione Accept-CH, questo 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 pensare all'intestazione Accept-CH come a una 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 della 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 efficacemente tutti i suggerimenti inviati dal browser inviando un Accept-CH vuoto nella risposta. Valuta la possibilità di aggiungerlo ovunque
l'utente reimposta le preferenze o esce dal tuo 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 per la navigazione successiva.
Ambito degli indizi e richieste cross-origin
Per impostazione predefinita, gli indicatori client vengono inviati solo per le richieste con la 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 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 è ridurre al minimo la possibilità di monitoraggio occulto sul web riducendo la quantità di informazioni di identificazione 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 al 2022 per dare all'ecosistema più tempo per valutare le nuove funzionalità di User Agent Client Hints.
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, qualcosa del genere:
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