Migliorare la privacy dell'utente e l'esperienza degli sviluppatori con i client hint dello user agent

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.

Rowan Merewood

Yoav Weiss

I client hint consentono agli sviluppatori di richiedere attivamente informazioni sul dispositivo o condizioni, anziché doverli analizzare all'esterno dello user agent (UA) stringa. Fornire questo percorso alternativo è il primo passo per riducendo la granularità delle stringhe dello user agent.

Scopri come aggiornare la funzionalità esistente che si basa sull'analisi del Stringa dello user agent per usare i client hint dello user agent.

Attenzione:se utilizzi già client hint dello user agent, tieni presente che, a partire dalla versione 90 di Chrome il formato dell'intestazione è cambiato quindi i token Accept-CH devono corrispondere esattamente hanno restituito intestazioni.

Sfondo

Quando i browser web effettuano richieste, includono informazioni sul browser e per consentire ai server di abilitare l'analisi e personalizzare la risposta. Questa definizione è stata definita fin dal 1996 (RFC 1945 per HTTP/1.0), dove è possibile trova la definizione originale della stringa User-Agent, che include una esempio:

User-Agent: CERN-LineMode/2.15 libwww/2.17b3

Questa intestazione aveva lo scopo di specificare, in ordine di significato, il prodotto (ad es. browser o libreria) e un commento (ad esempio la versione).

Lo stato della stringa user agent

Nel corso dei decenni successivi, questa stringa ha accumulato una serie di ulteriori dettagli sul client che effettua la richiesta (nonché una cosa da poco, perché compatibilità). Vediamo che lo user agent attuale di Chrome stringa:

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 dell'utente e la versione del browser, il modello del dispositivo, il brand e la versione completa del browser, abbastanza indizi per che si tratta di un browser mobile e per non parlare di 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 a singole identificare in modo univoco gli utenti.

La stringa user agent consente molti casi d'uso legittimi, e ha uno scopo importante per sviluppatori e proprietari di siti. Tuttavia, è fondamentale anche che gli utenti la privacy sia protetta da metodi di monitoraggio occulti, e l'invio di informazioni UA per impostazione predefinita va a fronte di tale obiettivo.

C'è anche la necessità di migliorare la compatibilità web quando si tratta dello user agent stringa. Non è strutturato, perciò l'analisi si traduce 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 dei browser meno comuni, il test potrebbe non essere riuscito per i siti in base alla propria configurazione.

Presentazione dei nuovi client hint dello user agent

Client hint dello user agent consentire l'accesso alle stesse informazioni, ma in un modo maggiormente incentrato sulla tutela della privacy, abilitare i browser per ridurre il valore predefinito della stringa dello user agent trasmettendo tutto. I client hint applicano 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 determinare quali dati vengono restituiti. Ciò significa che, invece di esporre tutti le informazioni dello user agent per impostazione predefinita, l'accesso è ora gestito in modo esplicito verificabile. Gli sviluppatori beneficiano inoltre di un'API più semplice, non più .

L'insieme corrente di client hint descrive principalmente la visualizzazione e l'utilizzo e funzionalità di connessione. Puoi esplorare i dettagli in Automatizzare la selezione delle risorse con i client hint. ma ecco un breve riepilogo sulla 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 nei richieste:

⬆️ Richiesta successiva

Viewport-Width: 460
Width: 230

Il server può scegliere di variare le sue risposte, ad esempio pubblicando immagini in un la risoluzione appropriata.

Nota: sono in corso discussioni sull'attivazione dei client hint in una richiesta iniziale. ma ti consigliamo di valutare il adattabile design o miglioramento progressivo prima di percorrere questa strada.

I client hint dello user agent ampliano la gamma di proprietà con Sec-CH-UA Prefisso che può essere specificato tramite l'intestazione della risposta del server Accept-CH. Per tutti dettagli, inizia con la spiegazione e quindi analizza la proposta completa.

Nota: i client hint vengono inviati solo tramite connessioni sicure, quindi assicurati di avere ha eseguito la migrazione del sito a HTTPS.

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 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"

Attenzione:queste proprietà sono più complesse di un singolo valore, quindi strutturate Intestazioni sono utilizzati per rappresentare elenchi e valori booleani.

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)

Punto chiave: le considerazioni sulla privacy e sulla compatibilità indicano che il valore può essere vuoto, non restituito o compilato con un valore variabile. Definito come GRASSO.

Piattaforma di esempio

Ecco un esempio di scambio:

⬆️ Richiesta iniziale dal browser
Il browser richiede /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 inoltre richiede 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 all'account ulteriori informazioni e invia i suggerimenti aggiuntivi in tutte le fasi successive richieste.

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 navigator.userAgentData. I valori predefiniti per Sec-CH-UA, Sec-CH-UA-Mobile e Le informazioni dell'intestazione Sec-CH-UA-Platform sono accessibili tramite brands e mobile proprietà, 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(). La "alta entropia" è un riferimento all'entropia dell'informazione, in altre parole: la quantità di informazioni che questi valori rivelano sull'identità del browser. Come per la richiesta di intestazioni aggiuntive, dipende dal browser e quali valori 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 le intestazioni sia l'API JavaScript sul tuo dispositivo all'indirizzo user-agent-client-hints.glitch.me.

Nota: assicurati di utilizzare Chrome 89 o versioni successive.

Durata e reimpostazione del suggerimento

I suggerimenti specificati tramite l'intestazione Accept-CH verranno inviati per la durata dell'evento 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

Poi il browser invierà l'intestazione Sec-CH-UA-Full-Version-List su tutte le richieste del 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 sarà completamente sostituisci 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 dell'insieme completo Suggerimenti desiderati per quella pagina, vale a dire che il browser invia i suggerimenti specificati per tutte le risorse secondarie della pagina. Anche se i suggerimenti continueranno a essere visualizzati la navigazione, il sito non deve fare affidamento né dare per scontato che vengano pubblicati.

Operazione riuscita: assicurati sempre di poter offrire comunque un'esperienza significativa senza informazioni. Questo serve a migliorare l'esperienza utente, non a definirla. Ecco perché si chiamano "suggerimenti" e non le "risposte" o "requisiti".

Puoi utilizzare questa opzione anche per cancellare in modo efficace tutti i suggerimenti inviati dal browser inviando nella risposta un campo Accept-CH vuoto. Valuta la possibilità di aggiungerlo ovunque indica che l'utente reimposta le preferenze o esce dal sito.

Questo pattern corrisponde anche al funzionamento dei suggerimenti tramite Tag <meta http-equiv="Accept-CH" …>. I suggerimenti richiesti verranno inviati solo il giorno richieste avviate dalla pagina e non in una 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 se chiedi suggerimenti specifici su https://example.com, ma le risorse vogliono ottimizzare sono su https://downloads.example.com non ricevere suggerimenti.

Per consentire i hint per le richieste multiorigine, è necessario specificare ogni hint e ogni origine da un'intestazione Permissions-Policy. Per applicarla a un client hint dello user agent, devi 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 dovresti eseguire il refactoring di tutte le istanze in cui stai eseguendo l'analisi l'intestazione User-Agent o l'utilizzo di qualsiasi chiamata JavaScript accedere alle stesse informazioni (ad esempio, navigator.userAgent, navigator.appVersion, o navigator.platform) per utilizzare i client hint dello user agent.

Inoltre, dovresti riesaminare l'uso dello user agent informazioni e sostituiscile con altri metodi, se possibile. Spesso è possibile raggiungere lo stesso obiettivo utilizzando il miglioramento progressivo, o il design reattivo. Il problema di base dell'utilizzo dei dati dello user agent è che devi sempre mantenere una mappatura tra la proprietà che stai ispezionando e il comportamento che attiva. Si tratta di un sovraccarico di manutenzione per garantire che il rilevamento sono completi e aggiornati.

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 mira a 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 ingiustificate sui siti esistenti. Introduzione allo user agent I client hint ora ti offrono la possibilità di comprendere e sperimentare il nuovo 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 tradizionale, garantendo al contempo lo stesso browser di alto livello e le informazioni sulla versione in base ai suggerimenti predefiniti. In Chromium, questa modifica è stata rinviata almeno fino al 2022 per fornire all'ecosistema più tempo per valutano le nuove funzionalità dei client hint dello user agent.

Puoi testare una versione di questo codice attivando about://flags/#reduce-user-agent flag di Chrome 93 (nota: questo flag è stato denominato about://flags/#freeze-user-agent nelle versioni Chrome 84-92). In questo modo restituiscono una stringa con le voci storiche per motivi di compatibilità, ma con 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 attivo Rimuovi schermo