Una prova dell'origine per un nuovo elemento HTML <permission>

Thomas Steiner

Esistono diversi metodi imperativi per chiedere l'autorizzazione a usare funzionalità potenti come l'accesso alla posizione nelle app web. Questi metodi presentano una serie di problematiche, ed è per questo che il team delle autorizzazioni di Chrome sta sperimentando un nuovo metodo dichiarativo: un elemento <permission> HTML dedicato. Questo elemento è in fase di prova dell'origine di Chrome 126 e alla fine speriamo di standardizzarlo.

Metodi imperativi per richiedere l'autorizzazione

Quando le app web hanno bisogno di accedere a funzionalità utili, devono chiedere l'autorizzazione. Ad esempio, quando Google Maps richiede la posizione dell'utente utilizzando l'API Geolocation, i browser avvisano l'utente, spesso con la possibilità di memorizzare la decisione. Si tratta di un concetto ben definito nella specifica delle autorizzazioni.

Richiesta implicita al primo utilizzo rispetto a una richiesta esplicita anticipata

L'API Geolocation è un'API potente che si basa sull'approccio "primo utilizzo" implicitamente. Ad esempio, quando un'app chiama il metodo navigator.geolocation.getCurrentPosition(), la richiesta di autorizzazione viene visualizzata automaticamente alla prima chiamata. Un altro esempio è navigator.mediaDevices.getUserMedia().

Altre API, come l'API Notification o l'API Device Orientation and Motion, in genere hanno un modo esplicito per richiedere l'autorizzazione tramite un metodo statico come Notification.requestPermission() o DeviceMotionEvent.requestPermission().

Nota: in passato, esistevano in programma un altro modo per ottenere l'autorizzazione, ovvero un metodo navigator.permissions.request() esplicito, ma è stato rimosso dall'APIPermissions dopo la discussione nel problema n. 83 nel repository della specifica. La questione dell'approccio "giusto" tra questi metodi (che richiede implicitamente l'utilizzo e che richiede esplicitamente l'autorizzazione) è un argomento molto discusso senza una risposta chiara.

Sfide con metodi imperativi per chiedere l'autorizzazione

Spam di autorizzazioni

In passato, i siti web potevano chiamare metodi come navigator.mediaDevices.getUserMedia() o Notification.requestPermission(), ma anche navigator.geolocation.getCurrentPosition() subito dopo il caricamento di un sito web. Viene visualizzato un prompt di autorizzazione prima che l'utente avesse interagito con il sito web. Talvolta è descritta come spam di autorizzazioni e riguarda sia gli approcci, che la richiesta implicita al primo utilizzo, sia come quella esplicita richiesta in anticipo.

Mitigazioni del browser e requisito relativo ai gesti dell'utente

Lo spam di autorizzazioni ha portato i fornitori di browser a richiedere un gesto dell'utente, ad esempio un clic su un pulsante o un evento keydown, prima di mostrare una richiesta di autorizzazione. Il problema di questo approccio è che è molto difficile, se non impossibile, per il browser capire se un determinato gesto dell'utente deve comportare la visualizzazione o meno di una richiesta di autorizzazione. Forse l'utente ha fatto clic su una pagina in uno stato di frustrazione perché il caricamento della pagina ha richiesto troppo tempo o forse stava facendo clic sul pulsante Trovami. Alcuni siti web sono diventati molto bravi anche nell'indurre gli utenti a fare clic sui contenuti per attivare la richiesta.

Un'altra mitigazione è l'aggiunta di mitigazioni per gli abusi dei prompt, come il blocco completo delle funzionalità per iniziare o la visualizzazione della richiesta di autorizzazione in modo non modale e meno invasivo.

Contestualizzazione autorizzazioni

Un'altra sfida, soprattutto sugli schermi di grandi dimensioni, è il modo in cui la richiesta di autorizzazione viene visualizzata comunemente: sopra la linea di morte, ovvero al di fuori dell'area della finestra del browser su cui l'app può attingere. Non è insolito che gli utenti perdano il prompt nella parte superiore della finestra del browser dopo aver fatto semplicemente clic su un pulsante nella parte inferiore della finestra. Questo problema spesso si aggrava quando vengono applicate misure di mitigazione allo spam del browser.

Nessun annullamento facile

Infine, è troppo facile per gli utenti muoversi in una strada senza uscita. Ad esempio, una volta che l'utente ha bloccato l'accesso a una funzionalità, è necessario essere a conoscenza del menu a discesa delle informazioni sul sito, dove può reimpostare le autorizzazioni o riattivare le autorizzazioni bloccate. Nel peggiore dei casi, entrambe le opzioni richiedono un ricaricamento completo della pagina fino a quando non viene applicata l'impostazione aggiornata. I siti non possono fornire agli utenti una semplice scorciatoia per modificare uno stato di autorizzazione esistente e devono spiegare scrupolosamente agli utenti come modificare le loro impostazioni, come mostrato nella parte inferiore del seguente screenshot di Google Maps.

Se l'autorizzazione è fondamentale per l'esperienza, ad esempio l'accesso al microfono per un'applicazione di videoconferenza, app come Google Meet mostrano finestre di dialogo invasive che indicano all'utente come sbloccare l'autorizzazione.

Un elemento <permission> dichiarativo

Per affrontare le sfide descritte in questo post, il team delle autorizzazioni di Chrome ha avviato una prova dell'origine per un nuovo elemento HTML, <permission>. Questo elemento consente agli sviluppatori di chiedere in modo dichiarativo l'autorizzazione a utilizzare, per il momento, un sottoinsieme di potenti funzionalità disponibili per i siti web. Nella sua forma più semplice, utilizzalo nell'esempio seguente:

<permission type="camera" />

Nota: Controllo delle autorizzazioni incorporate nelle pagine (PEPC, pronunciato "PEP-C") è il nome del programma olistico più ampio che ha lo scopo di incorporare più controlli nell'area dei contenuti. Questo è il motivo per cui a volte potresti notare che le persone chiamano <permission> come PEPC.

È ancora in corso un dibattito attivo sul fatto che <permission> debba essere o meno un elemento vuoto. Un elemento vuoto è un elemento HTML che si chiude automaticamente e che non può avere nodi figlio. In HTML, questo significa che potrebbe non avere un tag finale.

Attributo type

L'attributo type contiene un elenco separato da spazi delle autorizzazioni che stai richiedendo. Al momento della stesura del presente documento, i valori consentiti sono 'camera', 'microphone' e camera microphone (separati da uno spazio). Per impostazione predefinita, questo elemento ha un rendering simile ai pulsanti con uno stile essenziale dello user agent.

Attributo type-ext

Per alcune autorizzazioni che consentono l'uso di parametri aggiuntivi, l'attributo type-ext accetta coppie chiave-valore separate da spazi, come, ad esempio, precise:true per l'autorizzazione di geolocalizzazione.

Attributo lang

Il testo del pulsante viene fornito dal browser e deve essere coerente, quindi non può essere personalizzato direttamente. Il browser modifica la lingua del testo in base alla lingua ereditata del documento o della catena di elementi principali oppure a un attributo lang facoltativo. Ciò significa che gli sviluppatori non devono localizzare da soli l'elemento <permission>. Se l'elemento <permission> procede oltre la fase di prova dell'origine, per ogni tipo di autorizzazione potrebbero essere supportate diverse stringhe o icone per aumentare la flessibilità. Se vuoi utilizzare l'elemento <permission> e hai bisogno di una stringa o di un'icona specifica, contattaci.

Nota: durante la prova dell'origine, l'attributo lang non sarà supportato. Verrà invece utilizzata la lingua impostata sul browser.

Comportamento

Quando l'utente interagisce con l'elemento <permission>, può scorrere varie fasi:

• Se non avevano mai consentito una funzionalità, possono consentirla a ogni visita o consentirla per la visita in corso.

  

• Se avevano già consentito la funzionalità, potranno continuare a consentirla o interromperla.

  

• Se in precedenza aveva disabilitato una funzionalità, può continuare a non consentirla o consentirla questa volta.

  

Il testo dell'elemento <permission> si aggiorna automaticamente in base allo stato. Ad esempio, se è stata concessa l'autorizzazione per utilizzare una funzionalità, il testo cambia per indicare che la funzionalità è consentita. Se devi prima concedere l'autorizzazione, il testo cambia per invitare l'utente a usare la funzionalità. Confronta lo screenshot precedente con quello seguente per vedere i due stati.

Progettazione CSS

Per garantire che gli utenti possano riconoscere facilmente il pulsante come una piattaforma per accedere alle funzionalità di grande impatto, lo stile dell'elemento <permission> è limitato. Se le limitazioni di stile non sono applicabili al tuo caso d'uso, ci piacerebbe sapere come e perché. Anche se non tutte le esigenze di stile possono essere soddisfatte, speriamo di scoprire modi sicuri per consentire ulteriori stili dell'elemento <permission> dopo la prova dell'origine. La tabella seguente descrive in dettaglio alcune proprietà a cui sono applicate limitazioni o regole speciali. In caso di violazione di una qualsiasi delle regole, l'elemento <permission> verrà disattivato e non sarà possibile interagire. Qualsiasi tentativo di interazione comporta eccezioni che possono essere rilevate con JavaScript. Il messaggio di errore conterrà ulteriori dettagli sulla violazione rilevata.

Proprietà	Regole
color, background-color	Può essere utilizzato per impostare rispettivamente il colore del testo e dello sfondo. Il contrasto tra i due colori deve essere sufficiente per un testo chiaramente leggibile (rapporto di contrasto di almeno 3). Il canale alfa deve essere 1.
font-size, zoom	Deve essere impostato all'interno dell'equivalente di small e xxxlarge. In caso contrario, l'elemento verrà disattivato. Lo zoom verrà preso in considerazione durante il calcolo di font-size.
outline-offset	I valori negativi verranno corretti in 0.
margin (tutti)	I valori negativi verranno corretti in 0.
font-weight	I valori inferiori a 200 verranno corretti in 200.
font-style	I valori diversi da normal e italic verranno corretti in normal.
word-spacing	I valori superiori a 0.5em verranno corretti in 0.5em. I valori inferiori a 0 verranno corretti in 0.
display	I valori diversi da inline-block e none verranno corretti in inline-block.
letter-spacing	I valori superiori a 0.2em verranno corretti in 0.2em. I valori inferiori a -0.05em verranno corretti in -0.05em.
min-height	Il valore predefinito è 1em. Se fornito, verrà preso in considerazione il valore massimo calcolato tra i valori predefiniti e quelli forniti.
max-height	Il valore predefinito è 3em. Se fornito, verrà preso in considerazione il valore minimo calcolato tra i valori predefiniti e quelli forniti.
min-width	Il valore predefinito è fit-content. Se fornito, verrà preso in considerazione il valore massimo calcolato tra i valori predefiniti e quelli forniti.
max-width	Il valore predefinito sarà tre volte fit-content. Se fornito, verrà preso in considerazione il valore minimo calcolato tra i valori predefiniti e quelli forniti.
padding-top	Verrà applicato solo se height è impostato su auto. In questo caso, i valori superiori a 1em verranno corretti in 1em e padding-bottom verranno impostati sul valore padding-top.
padding-left	Verrà applicato solo se width è impostato su auto. In questo caso, i valori superiori a 5em verranno corretti in 5em e padding-right verranno impostati sul valore di padding-left.
transform	Non sono consentiti effetti visivi distorsione. Al momento accettiamo solo la traduzione in 2D e l'aumento proporzionale.

Le seguenti proprietà CSS possono essere utilizzate normalmente:

• font-kerning
• font-optical-sizing
• font-stretch
• font-synthesis-weight
• font-synthesis-style
• font-synthesis-small-caps
• font-feature-settings
• forced-color-adjust
• text-rendering
• align-self
• anchor-name aspect-ratio
• border (e tutte le border-* proprietà)
• clear
• color-scheme
• contain
• contain-intrinsic-width
• contain-intrinsic-height
• container-name
• container-type
• counter-*
• flex-*
• float
• height
• isolation
• justify-self
• left
• order
• orphans
• outline-* (con l'eccezione indicata in precedenza per outline-offset)
• overflow-anchor
• overscroll-behavior-*
• page
• position
• position-anchor
• content-visibility
• right
• scroll-margin-*
• scroll-padding-*
• text-spacing-trim
• top
• visibility
• x
• y
• ruby-position
• user-select
• width
• will-change
• z-index

Inoltre, è possibile utilizzare tutte le proprietà logicamente equivalenti (ad esempio, inline-size è equivalente a width), seguendo le stesse regole del loro equivalente.

Pseudo-classi

Esistono due pseudo-classi speciali che consentono di definire lo stile dell'elemento <permission> in base allo stato:

• :granted: la pseudo-classe :granted consente uno stile speciale quando è stata concessa un'autorizzazione.
• :invalid: la pseudo-classe :invalid consente di applicare stili speciali quando l'elemento è in uno stato non valido, ad esempio quando viene pubblicato in un iframe multiorigine.

Nota: durante la prova dell'origine, la pseudo-classe :invalid non sarà supportata.

permission {
  background-color: green;
}

permission:granted {
  background-color: light-green;
}

/* Not supported during the origin trial. */
permission:invalid {
  background-color: gray;
}

Eventi JavaScript

L'elemento <permission> deve essere utilizzato insieme all'API Permissions. Esistono diversi eventi che possono essere ascoltati:

• onpromptdismiss: questo evento viene attivato quando la richiesta di autorizzazione attivata dall'elemento viene ignorata dall'utente (ad esempio facendo clic sul pulsante di chiusura o all'esterno della richiesta).

  Nota: durante la prova dell'origine, il nome sarà ondismiss, ma il nome finale sarà onpromptdismiss. Puoi rilevare la funzionalità del nome dell'evento supportato utilizzando, ad esempio, 'ondismiss' in HTMLPermissionElement.prototype.

• onpromptaction: questo evento viene attivato quando la richiesta di autorizzazione attivata dall'elemento viene risolta dall'utente che esegue un'azione sulla richiesta stessa. Ciò non significa necessariamente che lo stato dell'autorizzazione sia cambiato, l'utente potrebbe aver intrapreso un'azione che mantiene lo status quo (ad esempio continuando per consentire un'autorizzazione).

  Nota: durante la prova dell'origine, il nome sarà onresolve, ma il nome finale sarà onpromptaction. Puoi rilevare la funzionalità del nome dell'evento supportato utilizzando, ad esempio, 'onresolve' in HTMLPermissionElement.prototype.

• onvalidationstatuschange: questo evento viene attivato quando l'elemento passa da "valid" a "invalid". L'elemento viene considerato "valid" quando il browser ritiene attendibile l'integrità dell'indicatore se l'utente vi fa clic e "invalid" in caso contrario, ad esempio quando l'elemento è parzialmente occulto da altri contenuti HTML.

Nota: durante la prova dell'origine, questo evento non verrà attivato.

Puoi registrare listener di eventi per questi eventi direttamente in linea nel codice HTML (<permission type="…" onpromptdismiss="alert('The prompt was dismissed');" />) oppure utilizzando addEventListener() nell'elemento <permission>, come mostrato nell'esempio seguente.

<permission type="camera" />
<script>
  const permission = document.querySelector('permission');
  permission.addEventListener('promptdismiss', showCameraWarning);

  function showCameraWarning() {
    // Show warning that the app isn't fully usable
    // unless the camera permission is granted.
  }

  const permissionStatus = await navigator.permissions.query({name: "camera"});
  
  permissionStatus.addEventListener('change', () => {
    // Run the check when the status changes.
    if (permissionStatus.state === "granted") {
      useCamera();
    }
  });

  // Run the initial check.
  if (permissionStatus.state === "granted") {
    useCamera();
  }
</script>

Rilevamento delle caratteristiche

Se un browser non supporta un elemento HTML, non verrà visualizzato. Ciò significa che se nel tuo codice HTML è presente l'elemento <permission>, non accade nulla se il browser non è a conoscenza di tale elemento. Potresti comunque voler rilevare l'assistenza tramite JavaScript, ad esempio per creare una richiesta di autorizzazione attivata tramite un clic di un normale <button>.

if ('HTMLPermissionElement' in window) {
  // The `<permission>` element is supported.
}

Prova dell'origine

Per provare l'elemento <permission> sul tuo sito con utenti reali, registrati alla prova dell'origine. Leggi la pagina Inizia a utilizzare le prove dell'origine per istruzioni su come preparare il tuo sito all'utilizzo delle prove dell'origine. La prova dell'origine si svolgerà dalla versione 126 alla versione 131 di Chrome (19 febbraio 2025).

Demo

Esplora la demo e controlla il codice sorgente su GitHub. Ecco uno screenshot dell'esperienza su un browser di supporto.

Feedback

Ci piacerebbe conoscere la tua opinione su come funziona <permission> per il tuo caso d'uso. Non esitare a rispondere a uno dei problemi nel repository o a presentarne uno nuovo. I segnali pubblici nel repository per l'elemento <permission> comunicheranno a noi e agli altri browser che ti interessa.

Domande frequenti

• In che modo questo risultato è migliore rispetto a un normale <button> abbinato all'API Permissions? Un clic di <button> è un gesto dell'utente, ma i browser non hanno modo di verificare che sia connesso alla richiesta di richiesta di autorizzazione. Se l'utente ha fatto clic su <permission>, il browser può assicurarsi che il clic sia correlato a una richiesta di autorizzazione. Ciò consente al browser di facilitare flussi che altrimenti sarebbero molto più rischiosi. Ad esempio, consentire all'utente di annullare facilmente il blocco di un'autorizzazione.
• Che cosa succede se gli altri browser non supportano l'elemento <permission>? L'elemento <permission> può essere utilizzato come miglioramento progressivo. Sui browser non supportati, è possibile utilizzare un flusso di autorizzazioni classico. Ad esempio, in base al clic di un normale <button>. Anche il team responsabile delle autorizzazioni sta lavorando a un polyfill. Aggiungi a Speciali il repository GitHub per ricevere una notifica quando è pronto.
• La sessione è stata discussa con altri fornitori di browser? L'elemento <permission> è stato discusso attivamente al W3C TPAC nel 2023 in un gruppo di lavoro. Puoi leggere le note della sessione pubblica. Il team di Chrome ha anche richiesto posizioni standard formali a entrambi i fornitori; consulta la sezione Link correlati. L'elemento <permission> è un argomento di discussione costante con altri browser e ci auguriamo di standardizzarlo.
• Questo elemento dovrebbe davvero essere vuoto? È ancora in corso un dibattito attivo sul fatto che <permission> debba essere o meno un elemento vuoto. Se hai feedback, intervieni sulla questione.

Link correlati

• Spiegazione
• Posizione degli standard WebKit
• Posizione degli standard di Mozilla

Ringraziamenti

Questo documento è stato esaminato da Balázs Engedy, Thomas Nguyen, Penelope McLachlan, Marian Harbach, David Warren e Rachel Andrew.