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

Thomas Steiner

Esistono diversi metodi imperativi per chiedere l'autorizzazione a utilizzare funzionalità efficaci come l'accesso alla posizione nelle app web. Questi metodi presentano una serie di sfide, motivo per cui il team per le autorizzazioni di Chrome sta sperimentando un nuovo metodo declarativo: un elemento HTML <permission> dedicato. Questo elemento è in prova di origine da Chrome 126 e, auspicabilmente, lo standardizzeremo.

Metodi imperativi per richiedere l'autorizzazione

Quando le app web hanno bisogno di accedere a funzionalità avanzate, devono chiedere l'autorizzazione. Ad esempio, quando Google Maps richiede la posizione dell'utente utilizzando l'API Geolocation, i browser chiederanno all'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 o richiesta esplicita in anticipo

L'API Geolocation è un'API potente e si basa sull'approccio di richiesta implicita al primo uso. 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, hanno in genere un modo esplicito per richiedere l'autorizzazione tramite un metodo statico come Notification.requestPermission() o DeviceMotionEvent.requestPermission().

Nota: in passato era previsto un altro modo per ottenere l'autorizzazione, ovvero un metodo navigator.permissions.request() esplicito, ma è stato rimosso dall'API Permissions in seguito alla discussione relativa al problema 83 nel repository della specifica. La questione dell'approccio "giusto" tra questi metodi (richiesta implicita al momento dell'utilizzo e richiesta esplicita dell'autorizzazione) è un argomento molto dibattuto senza una risposta chiara.

Problemi con i metodi imperativi per chiedere l'autorizzazione

Spam per le autorizzazioni

In passato, i siti web potevano chiamare metodi come navigator.mediaDevices.getUserMedia() o Notification.requestPermission(), ma anche navigator.geolocation.getCurrentPosition() immediatamente al caricamento di un sito web. Prima che l'utente interagisse con il sito web, veniva visualizzata una richiesta di autorizzazione. A volte questo fenomeno è descritto come spam di autorizzazioni e interessa entrambi gli approcci, sia la richiesta implicita al primo utilizzo sia la richiesta esplicita in anteprima.

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, come un clic sul 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 o meno la visualizzazione di una richiesta di autorizzazione. È possibile che l'utente abbia fatto clic sulla pagina in un punto qualsiasi per sfinimento perché il caricamento della pagina ha richiesto molto tempo oppure è possibile che abbia effettivamente fatto clic sul pulsante Trova la mia posizione. Inoltre, alcuni siti web sono diventati molto bravi a convincere gli utenti a fare clic sui contenuti per attivare la richiesta.

Un'altra soluzione è aggiungere mitigazioni per gli abusi dei prompt, ad esempio bloccare completamente le funzionalità all'inizio o mostrare la richiesta di autorizzazione in modo non modale e meno invadente.

Contestualizzazione delle autorizzazioni

Un'altra sfida, soprattutto sugli schermi di grandi dimensioni, è la modalità di visualizzazione comune della richiesta di autorizzazione: sopra la linea della morte, ovvero al di fuori dell'area della finestra del browser su cui l'app può disegnare. Non è raro che gli utenti non vedano la richiesta nella parte superiore della finestra del browser dopo aver fatto clic su un pulsante nella parte inferiore della finestra. Questo problema si aggrava spesso quando sono attive le misure di mitigazione dello spam del browser.

Impossibile annullare facilmente

Infine, è troppo facile per gli utenti imbattersi in un vicolo cieco. Ad esempio, dopo che l'utente ha bloccato l'accesso a una funzionalità, deve essere a conoscenza del menu a discesa delle informazioni sul sito in cui può reimpostare le autorizzazioni o riattivare le autorizzazioni bloccate. Nel peggiore dei casi, entrambe le opzioni richiedono un ricaricamento completo della pagina fino all'applicazione dell'impostazione aggiornata. I siti non sono in grado di fornire una scorciatoia facile per consentire agli utenti di modificare uno stato di autorizzazione esistente e devono spiegare loro con fatica come modificare le impostazioni, come mostrato nella parte inferiore dello screenshot di Google Maps riportato di seguito.

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 invadenti che spiegano all'utente come sbloccare l'autorizzazione.

Un elemento <permission> dichiarativo

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

<permission type="camera" />

Nota: Controllo delle autorizzazioni incorporate nella pagina (PEPC, pronunciato "PEP-C") è il nome del programma olistico più ampio per incorporare più controlli nell'area dei contenuti. Ecco perché a volte potresti vedere persone che fanno riferimento a <permission> come PEPC.

È ancora in discussione se <permission> debba essere un elemento vuoto o meno. Un elemento vuoto è un elemento HTML autochiudente che non può avere nodi secondari, il che significa che in HTML non può avere un tag di chiusura.

Attributo type

L'attributo type contiene un elenco delle autorizzazioni richieste separate da spazi. 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 viene visualizzato in modo simile ai pulsanti con uno stile di user agent essenziale.

Attributo type-ext

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

Attributo lang

Il testo del pulsante è fornito dal browser e deve essere coerente, pertanto 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 facoltativo lang. Ciò significa che gli sviluppatori non devono localizzare autonomamente l'elemento <permission>. Se l'elemento <permission> procede oltre la fase di prova dell'origine, potrebbero essere supportate diverse stringhe o icone per ogni tipo di autorizzazione per aumentare la flessibilità. Se ti interessa utilizzare l'elemento <permission> e hai bisogno di una stringa o un'icona specifica, contattaci.

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

Comportamento

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

• Se non ha mai consentito una funzionalità, può farlo per ogni visita o solo per quella in corso.

  

• Se l'utente aveva già consentito la funzionalità, può continuare a farlo o interrompere la sua attivazione.

  

• Se in precedenza non aveva consentito 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 l'utilizzo di una funzionalità, il testo cambia per indicare che la funzionalità è consentita. Se è necessario concedere prima l'autorizzazione, il testo cambia per invitare l'utente a utilizzare la funzionalità. Confronta lo screenshot precedente con quello seguente per vedere i due stati.

Design CSS

Per garantire che gli utenti possano riconoscere facilmente il pulsante come una piattaforma per accedere a funzionalità efficaci, lo stile dell'elemento <permission> è limitato. Se le limitazioni di stile non sono adatte al tuo caso d'uso, saremmo lieti di sapere come e perché. Sebbene non sia possibile soddisfare tutte le esigenze di stile, ci auguriamo di trovare modi sicuri per consentire un maggiore stile dell'elemento <permission> dopo la prova dell'origine. La tabella seguente descrive alcune proprietà a cui sono applicate limitazioni o regole speciali. In caso di violazione di una delle regole, l'elemento<permission> verrà disattivato e non sarà possibile interagire con esso. Qualsiasi tentativo di interagire con questo elemento comporterà 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 ben leggibile (rapporto di contrasto di almeno 3). Il canale alpha deve essere uguale a 1.
font-size, zoom	Deve essere impostato tra 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 correttati 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 correttati in -0.05em.
min-height	Il valore predefinito è 1em. Se specificato, verrà preso in considerazione il valore massimo calcolato tra il valore predefinito e i valori forniti.
max-height	Il valore predefinito è 3em. Se specificato, verrà considerato il valore minimo calcolato tra il valore predefinito e i valori forniti.
min-width	Il valore predefinito è fit-content. Se specificato, verrà considerato il valore massimo calcolato tra il valore predefinito e i valori specificati.
max-width	Il valore predefinito è tre volte fit-content. Se fornito, verrà considerato il valore minimo calcolato tra il valore predefinito e i valori forniti.
padding-top	Ha effetto solo se height è impostato su auto. In questo caso, i valori superiori a 1em verranno correttati in 1em e padding-bottom verrà impostato sul valore di padding-top.
padding-left	Ha effetto solo se width è impostato su auto. In questo caso, i valori superiori a 5em verranno correttati in 5em e padding-right verrà impostato sul valore di padding-left.
transform	Non sono consentiti effetti visivi che distorcono l'immagine. Per il momento, accettiamo solo la traduzione 2D e l'upscaling 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 proprietà border-*)
• 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-* (tranne che per outline-offset, come indicato in precedenza)
• 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 corrispondente.

Pseudo-classi

Esistono due pseudoclassi speciali che consentono di applicare stili all'elemento <permission> in base allo stato:

• :granted: la pseudo-classe :granted consente di applicare 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 cross-origin.

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> è progettato per 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 è stata ignorata dall'utente (ad esempio facendo clic sul pulsante di chiusura o al di fuori della richiesta).

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

• onpromptaction: questo evento viene attivato quando la richiesta di autorizzazione attivata dall'elemento è stata risolta dall'utente che ha eseguito 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 continuare a consentire un'autorizzazione).

  Nota: durante la prova dell'origine, il nome sarà onresolve, ma il nome finale sarà onpromptaction. Puoi rilevare tramite funzionalità il 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 è considerato "valid" quando il browser si fida dell'integrità dell'indicatore se l'utente fa clic su di esso e "invalid" in caso contrario, ad esempio quando l'elemento è parzialmente coperto da altri contenuti HTML.

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

Puoi registrare gli ascoltatori di eventi per questi eventi direttamente in linea nel codice HTML (<permission type="…" onpromptdismiss="alert('The prompt was dismissed');" />), o 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 di funzionalità

Se un browser non supporta un elemento HTML, non lo mostrerà. Ciò significa che se nel codice HTML è presente l'elemento <permission>, non succede nulla se il browser non lo conosce. Potresti comunque voler rilevare il supporto utilizzando JavaScript, ad esempio per creare una richiesta di autorizzazione attivata tramite un clic su un <button> normale.

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

Prova dell'origine

Per provare l'elemento <permission> sul tuo sito con utenti reali, registrati per la prova dell'origine. Leggi l'articolo Iniziare a utilizzare le prove delle origini per istruzioni su come preparare il tuo sito per l'utilizzo delle prove delle origini. La prova dell'origine verrà eseguita da Chrome 126 a 131 (19 febbraio 2025).

Demo

Dai un'occhiata alla demo e controlla il codice sorgente su GitHub. Ecco uno screenshot dell'esperienza su un browser supportato.

Feedback

Ci piacerebbe conoscere la tua opinione su come <permission> funziona per il tuo caso d'uso. Puoi rispondere a uno dei problemi nel repository o crearne uno nuovo. Gli indicatori pubblici nel repo per l'elemento <permission> ci faranno sapere, a noi e ad altri browser, che ti interessa.

Domande frequenti

• In che modo è migliore di un normale <button> accoppiato con l'API Permissions? Un clic su un <button> è un gesto dell'utente, ma i browser non hanno modo di verificare che sia collegato alla richiesta di autorizzazione. Se l'utente ha fatto clic su un <permission>, il browser può essere certo che il clic sia correlato a una richiesta di autorizzazione. In questo modo il browser semplifica i flussi che altrimenti sarebbero molto più rischiosi. Ad esempio, consentire all'utente di annullare facilmente il blocco di un'autorizzazione.
• Cosa succede se altri browser non supportano l'elemento <permission>? L'elemento <permission> può essere utilizzato come miglioramento progressivo. Nei browser non supportati, è possibile utilizzare un flusso di autorizzazione classico. Ad esempio, in base al clic di un <button> normale. Il team responsabile delle autorizzazioni sta anche lavorando a un polyfill. Aggiungi il repo GitHub ai preferiti per ricevere una notifica quando sarà pronto.
• Questo problema è stato discusso con altri fornitori di browser? L'elemento <permission> è stato discusso attivamente al W3C TPAC nel 2023 in una sessione di gruppo. Puoi leggere le note relative alle sessioni pubbliche. Il team di Chrome ha anche chiesto una posizione formale in merito agli standard a entrambi i fornitori. Consulta la sezione Link correlati. L'elemento <permission> è un argomento di discussione in corso con altri browser e ci auguriamo di standardizzarlo.
• Dovrebbe essere un elemento vuoto? È ancora in discussione se <permission> debba essere un elemento vuoto o meno. Se hai feedback, partecipa al problema.

Link correlati

• Spiegazione
• Posizione relativa agli standard WebKit
• Posizione di Mozilla in merito agli standard

Ringraziamenti

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