Esegui la migrazione ai client hint dello user agent

Strategie per eseguire la migrazione del sito dall'utilizzo della stringa user agent alla stringa nuovi client hint dello user agent.

Rowan Merewood

Lo user agent stringa è una significativa impronta digitale passiva vengono visualizzate nei browser, oltre a essere difficili da elaborare. Tuttavia, esistono tutti i tipi di regole motivi per la raccolta e l'elaborazione dei dati degli user agent, quindi è necessaria una il percorso verso una soluzione migliore. I client hint dello user agent forniscono un modo esplicito per dichiarare la necessità di dati e metodi dello user agent per restituire i dati in un di facile utilizzo.

Questo articolo spiega come controllare l'accesso ai dati degli user agent e migrazione dell'utilizzo delle stringhe dello user agent ai client hint dello user agent.

Controllare la raccolta e l'utilizzo dei dati degli user agent

Come per qualsiasi forma di raccolta dei dati, devi sempre capire il motivo per cui raccolgono i dati. Il primo passaggio, indipendentemente dal fatto che eseguire un'azione, consiste nel capire dove e perché vengono utilizzati i dati degli user agent.

Se non sai se o dove vengono utilizzati i dati dello user agent, valuta la possibilità di cercare il codice front-end per l'utilizzo di navigator.userAgent e il codice backend per dell'intestazione HTTP User-Agent. Dovresti controllare anche il codice front-end per l'utilizzo di funzionalità già deprecate, come navigator.platform e navigator.appVersion.

Da un punto di vista funzionale, pensa a qualsiasi punto del codice in cui ti trovi registrazione o elaborazione

  • Nome o versione del browser
  • Nome o versione del sistema operativo
  • Marca o modello del dispositivo
  • Tipo di CPU, architettura o bitness (ad esempio, 64 bit)

È inoltre probabile che tu stia utilizzando una libreria o un servizio di terze parti per per elaborare lo user agent. In questo caso, controlla se il cliente sta eseguendo l'aggiornamento a supportare client hint dello user agent.

Stai utilizzando solo dati user agent di base?

L'insieme predefinito di client hint dello user agent include:

  • Sec-CH-UA: nome del browser e versione principale/significativa
  • Sec-CH-UA-Mobile: valore booleano che indica un dispositivo mobile
  • Sec-CH-UA-Platform: nome del sistema operativo
    • Tieni presente che questo aspetto è stato aggiornato nella specifica e sarà riflesso in Chrome e altri browser basati su Chromium a breve.

Anche la versione ridotta della stringa user agent proposta manterrà queste informazioni di base in modo compatibile con le versioni precedenti. Ad esempio, invece di Chrome/90.0.4430.85, la stringa includerà Chrome/90.0.0.0.

Se stai controllando solo la stringa dello user agent per il nome del browser, la versione principale o un sistema operativo, il codice continuerà a funzionare anche se per visualizzare gli avvisi relativi al ritiro.

Sebbene sia possibile e necessario eseguire la migrazione ai client hint dello user agent, è possibile che di risorse o di codice. La riduzione delle informazioni la stringa dello user agent in questo modo compatibile con le versioni precedenti ha lo scopo di garantire che, sebbene il codice esistente riceverà informazioni meno dettagliate, mantengono le funzionalità di base.

Strategia: API JavaScript lato client on demand

Se al momento utilizzi navigator.userAgent, ti consigliamo di passare a preferendo navigator.userAgentData prima di ricorrere all'analisi del la stringa dello user agent.

if (navigator.userAgentData) {
  // use new hints
} else {
  // fall back to user-agent string parsing
}

Se stai cercando un dispositivo mobile o un computer, utilizza il valore booleano mobile:

const isMobile = navigator.userAgentData.mobile;

userAgentData.brands è un array di oggetti con brand e version proprietà in cui il browser è in grado di elencare la compatibilità con quelle brand. Puoi accedervi direttamente come array oppure utilizzare una Chiamata some() per verificare se è presente una voce specifica:

function isCompatible(item) {
  // In real life you most likely have more complex rules here
  return ['Chromium', 'Google Chrome', 'NewBrowser'].includes(item.brand);
}
if (navigator.userAgentData.brands.some(isCompatible)) {
  // browser reports as compatible
}

Se hai bisogno di uno dei valori degli user agent più dettagliati e con alta entropia, specificalo e verifica il risultato nel valore Promise restituito:

navigator.userAgentData.getHighEntropyValues(['model'])
  .then(ua => {
    // requested hints available as attributes
    const model = ua.model
  });

Potresti voler utilizzare questa strategia anche se preferisci passare dall'elaborazione lato server a quella lato client. L'API JavaScript non richiedono accesso alle intestazioni delle richieste HTTP, quindi i valori user agent possono essere richiesti all'indirizzo da qualsiasi punto di vista.

Strategia: intestazione lato server statica

Se utilizzi l'intestazione della richiesta User-Agent sul server e le tue esigenze per quei dati sono relativamente coerenti in tutto il sito, puoi specificare i client hint desiderati come set statico nelle risposte. Si tratta di un relativamente semplice, poiché di solito basta configurarlo in ogni località. Ad esempio, potrebbe trovarsi nella configurazione del server web se aggiungere intestazioni, la tua configurazione di hosting o la configurazione di primo livello il framework o la piattaforma che usi per il tuo sito.

Prendi in considerazione questa strategia se modifichi o personalizzi le risposte pubblicati in base ai dati dello user agent.

I browser o altri client potrebbero scegliere di fornire suggerimenti predefiniti diversi, quindi è buona norma specificare tutto ciò di cui hai bisogno, anche se generalmente fornito predefinito.

Ad esempio, i valori predefiniti attuali per Chrome saranno rappresentati come segue:

⬇️ Intestazioni delle risposte

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA

Se volessi ricevere anche il modello del dispositivo nelle risposte, invia:

⬇️ Intestazioni delle risposte

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA

Quando lo elabori sul lato server, devi prima verificare se L'intestazione Sec-CH-UA è stata inviata, quindi il fallback all'intestazione User-Agent è stata inviata se non è disponibile.

Strategia: delega dei suggerimenti alle richieste multiorigine

Se richiedi sottorisorse multiorigine o tra siti che richiedono i client hint dello user agent da inviare nelle loro richieste, quindi dovrai specificare esplicitamente i suggerimenti desiderati usando un criterio di autorizzazione.

Ad esempio, supponiamo che https://blog.site ospiti risorse https://cdn.site, che può restituire risorse ottimizzate per un dispositivo specifico. https://blog.site può chiedere il suggerimento Sec-CH-UA-Model, ma deve delegarla esplicitamente a https://cdn.site utilizzando Permissions-Policy intestazione. L'elenco dei suggerimenti controllati dai criteri è disponibile nella sezione Suggerimenti client Infrastrutture bozza

⬇️ Risposta di blog.site che delega il suggerimento

Accept-CH: Sec-CH-UA-Model
Permissions-Policy: ch-ua-model=(self "https://cdn.site")

⬆️ La richiesta alle sottorisorse su cdn.site include il suggerimento delegato

Sec-CH-UA-Model: "Pixel 5"

Puoi specificare più suggerimenti per più origini e non solo dall'intervallo ch-ua:

⬇️ Risposta di blog.site che delega più suggerimenti a più origini

Accept-CH: Sec-CH-UA-Model, DPR
Permissions-Policy: ch-ua-model=(self "https://cdn.site"),
                    ch-dpr=(self "https://cdn.site" "https://img.site")

Strategia: delega dei suggerimenti agli iframe

Gli iframe multiorigine funzionano in modo simile alle risorse multiorigine, ma specifica i suggerimenti che vuoi delegare nell'attributo allow.

⬇️ Risposta da blog.site

Accept-CH: Sec-CH-UA-Model

↪️ HTML per blog.site

<iframe src="https://widget.site" allow="ch-ua-model"></iframe>

⬆️ Richiesta a widget.site

Sec-CH-UA-Model: "Pixel 5"

L'attributo allow nell'iframe sostituirà qualsiasi intestazione Accept-CH che widget.site potrebbe inviare il messaggio stesso, quindi assicurati di aver specificato tutto ciò che sito con iframe.

Strategia: suggerimenti dinamici lato server

Se ti interessano parti specifiche del percorso dell'utente per le quali hai bisogno di una selezione più ampia di suggerimenti rispetto al resto del sito, puoi scegliere di richiederli on demand anziché in modo statico sull'intero sito. Questo è più complesso gestire, ma se hai già impostato intestazioni diverse per ciascuna route, potrebbe essere fattibile.

La cosa importante da ricordare qui è che ogni istanza di Accept-CH sovrascriverà in modo efficace il set esistente. Quindi, se utilizzi in modo dinamico impostando l'intestazione, ogni pagina deve richiedere l'insieme completo di suggerimenti richiesti.

Ad esempio, potresti avere una sezione del sito in cui fornire Icone e controlli corrispondenti al sistema operativo dell'utente. A questo scopo, vuoi inoltre recuperare Sec-CH-UA-Platform-Version per pubblicare gli annunci delle risorse secondarie.

⬇️ Intestazioni delle risposte per /blog

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA

⬇️ Intestazioni delle risposte per /app

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version, Sec-CH-UA

Strategia: suggerimenti lato server richiesti alla prima richiesta

In alcuni casi hai bisogno di più suggerimenti rispetto a quelli predefiniti nella prima richiesta, ma è molto raro, quindi assicurati di avere esaminato il ragionamento.

La prima richiesta indica in realtà la primissima richiesta di primo livello per quell'origine inviati durante la sessione di navigazione. L'insieme predefinito di suggerimenti include il browser nome con la versione principale, la piattaforma e l'indicatore del dispositivo mobile. Quindi la domanda è se ti servono dati estesi durante il caricamento iniziale della pagina?

Per ulteriori suggerimenti in merito alla prima richiesta, puoi scegliere tra due opzioni. Innanzitutto, puoi utilizza l'intestazione Critical-CH. Ha lo stesso formato di Accept-CH ma comunica al browser che deve immediatamente riprovare la richiesta se la prima ne è stata inviata una senza il suggerimento critico.

⬆️ Richiesta iniziale

[With default headers]

⬇️ Intestazioni delle risposte

Accept-CH: Sec-CH-UA-Model
Critical-CH: Sec-CH-UA-Model

🔃 Il browser tenta di nuovo la richiesta iniziale con l'intestazione aggiuntiva

[With default headers + …]
Sec-CH-UA-Model: Pixel 5

Questo comporterà l'overhead del nuovo tentativo per la prima richiesta, ma i costi di implementazione sono relativamente bassi. Invia l'intestazione aggiuntiva e il browser farà il resto.

Per le situazioni in cui hai bisogno di aiuto, hai bisogno di ulteriori suggerimenti caricamento iniziale della pagina, il report Client Hints Reliability proposta è creare un percorso per specificare i suggerimenti nelle impostazioni a livello di connessione. Questo utilizza il protocollo a livello di applicazione Estensione Settings(ALPS) a TLS 1.3 per consentire il passaggio anticipato di suggerimenti su connessioni HTTP/2 e HTTP/3. Questo si trova ancora in una fase iniziale, ma se gestisci attivamente i tuoi protocolli impostazioni di connessione, questo è il momento ideale per contribuire.

Strategia: assistenza precedente

Sul tuo sito potrebbe essere presente codice precedente o di terze parti che dipende navigator.userAgent, incluse le parti della stringa dello user agent che verranno è ridotto. A lungo termine dovresti pianificare di passare all'equivalente navigator.userAgentData chiama, ma esiste una soluzione provvisoria.

UA-CH retrofill è un piccolo che ti consente di sovrascrivere navigator.userAgent con una nuova stringa creato dai valori navigator.userAgentData richiesti.

Ad esempio, questo codice genererà una stringa user agent che, oltre a include il "modello" suggerimento:

import { overrideUserAgentUsingClientHints } from './uach-retrofill.js';
overrideUserAgentUsingClientHints(['model'])
  .then(() => { console.log(navigator.userAgent); });

La stringa risultante mostrerà il modello Pixel 5, ma mostrerà comunque il valore ridotto 92.0.0.0 perché il suggerimento uaFullVersion non è stato richiesto:

Mozilla/5.0 (Linux; Android 10.0; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.0.0 Mobile Safari/537.36

Ulteriore assistenza

Se queste strategie non coprono il tuo caso d'uso, avvia una Discussione in privacy-sandbox-dev-support repository e potremo analizzare insieme il problema.

Foto di Ricardo Rocha su Unsplash