Ursprungstest für ein neues HTML-Element <permission>

Thomas Steiner

Es gibt eine Reihe von imperativen Methoden, mit denen Sie um Erlaubnis zur Verwendung der leistungsstarke Funktionen wie den Standortzugriff in Web-Apps. Diese Methoden beinhalten eine Herausforderungen zu stellen. Deshalb experimentiert das Team durch eine neue deklarative Methode: ein dediziertes <permission>-HTML-Element. Dieses Element befindet sich im Ursprungstest von Chrome 126. Wir hoffen, zu standardisieren.

Imperative Methoden zum Anfordern von Berechtigungen

Wenn Web-Apps Zugriff auf leistungsstarken Funktionen um Erlaubnis fragen müssen. Wenn beispielsweise Google Maps erfordert den Standort des Nutzers mithilfe der Geolocation API fordert Browser den Nutzer auf, oft die Option zu speichern, diese Entscheidung zu speichern. Dies ist ein klar definiertes Konzept in der Berechtigungsspezifikation.

Indirekt nach der ersten Verwendung oder ausdrücklich im Voraus fragen

Die Geolocation API ist eine leistungsstarke API und stützt sich auf die implizite Abfrage zuerst verwenden können. Wenn eine App beispielsweise die navigator.geolocation.getCurrentPosition() wird beim ersten Aufruf automatisch eine Berechtigungsaufforderung eingeblendet. Ein weiteres Beispiel navigator.mediaDevices.getUserMedia()

Andere APIs wie die Notification API oder die Device Orientation und Motion API haben häufig eine explizite Möglichkeit, die Berechtigung durch eine statische Methode wie Notification.requestPermission() oder DeviceMotionEvent.requestPermission()

Hinweis: Bisher gab es Pläne für eine weitere Möglichkeit, die Berechtigung zu erhalten. nämlich eine explizite navigator.permissions.request()-Methode, die jedoch entfernt wurde. im Anschluss an die Diskussion in Problem Nr. 83 in der zu erstellen. Die Frage des „richtigen“ zwischen diesen Methoden (implizit nach der Nutzung und ausdrücklich um Erlaubnis fragen) ist eine besprochenen Thema ohne klare Antwort.

Herausforderungen mit imperativen Methoden zum Fordern von Genehmigungen

Berechtigungsspam

In der Vergangenheit konnten Websites Methoden wie navigator.mediaDevices.getUserMedia() oder Notification.requestPermission(), aber auch navigator.geolocation.getCurrentPosition(), wenn eine Website wurde geladen. Bevor der Nutzer mit der Anfrage interagiert hat, wird eine Berechtigungsaufforderung eingeblendet. der Website. Dies wird manchmal als Berechtigungsspam beschrieben und betrifft sowohl die implizite nach der ersten Verwendung oder im Voraus.

Browserschutzmaßnahmen und Anforderungen an Nutzergesten

Aufgrund von Spam-Genehmigungen haben Browseranbieter eine Nutzergeste wie eine Schaltfläche verlangt oder ein Keydown-Ereignis ein, bevor eine Berechtigungsaufforderung angezeigt wird. Das Problem mit Bei diesem Ansatz ist es für den Browser sehr schwierig, wenn nicht unmöglich, herausfinden, ob eine bestimmte Nutzergeste in einer Berechtigungsaufforderung angezeigt wird oder nicht. Vielleicht hat der Nutzer frustriert nur auf die Seite geklickt. weil die Ladezeit der Seite so lange gedauert hat Klicken Sie auf die Schaltfläche Mich finden. Manche Websites haben sich auch sehr gut Nutzer werden dazu verleitet, auf Inhalte zu klicken, um die Aufforderung auszulösen.

Eine weitere Lösung ist das Hinzufügen von Eindämmungsmaßnahmen, oder das Einblenden der Berechtigungsaufforderung in einem nicht modalen, aufdringlich wirken.

Kontextualisierung von Berechtigungen

Eine weitere Herausforderung, vor allem auf großen Bildschirmen, ist die Art und Weise, häufig angezeigt: oberhalb der Sinn des Todes, die sich außerhalb des Browserfensters befindet, auf den die App zeichnen kann. Es ist Uns war nicht bewusst, dass die Nutzenden die Aufforderung am oberen Rand des Browsers verpassen. wenn sie unten im Fenster auf eine Schaltfläche geklickt haben. Diese Aufgabe durch die Eindämmung von Browser-Spam.

Rückgängig machen nicht möglich

Schließlich ist es für Nutzende zu einfach, selbst in eine Sackgasse zu gelangen. Für Nutzer, die den Zugriff auf eine Funktion blockiert haben, auf das Drop-down-Menü mit den Website-Informationen, in dem sie entweder Zurücksetzen Berechtigungen oder aktivieren Sie die blockierten Berechtigungen wieder. Beide Optionen im schlimmsten ist eine vollständige Aktualisierung der Seite erforderlich, bis die aktualisierte Einstellung wirksam wird. In Websites gibt es keine Möglichkeit, Nutzern eine einfache Verknüpfung zum Ändern eines Berechtigungsstatus haben und den Nutzenden akribisch erklären müssen, wie ihre Einstellungen wie unten in den folgenden Google Maps-Karten angezeigt. Screenshot

Wenn die Berechtigung für die Nutzung entscheidend ist, z. B. der Mikrofonzugriff für ein Gerät App für Videokonferenzen zeigen störende Dialoge in Apps wie Google Meet an. die den Nutzer darüber informieren, wie er die Berechtigung aufheben kann.

Ein deklaratives <permission>-Element

Um die in diesem Beitrag beschriebenen Probleme zu beheben, hat das Chrome-Berechtigungsteam haben einen Ursprungstest für das neue HTML-Element <permission> gestartet. Dieses können Entwickler deklarativ um die Genehmigung bitten, Unterbereich der leistungsstarken Funktionen, die für Websites zur Verfügung stehen. In der einfachsten Form verwenden Sie ihn wie im folgenden Beispiel:

<permission type="camera" />

Hinweis: Auf der Seite eingebettete Berechtigungssteuerung (PEPC, ausgesprochen "PEP-C") ist der Name des umfassenderen Programms, mehr Steuerelemente hinzufügen. Deshalb kann es gelegentlich vorkommen, <permission> wird als PEPC bezeichnet.

Es wird noch aktiv diskutiert Festlegen, ob <permission> ungültig sein soll oder nicht. Ein void-Element ist ein selbstschließendes Element in HTML, haben untergeordnete Knoten, d. h. in HTML bedeutet dies, dass sie kein End-Tag haben.

Das Attribut type

Die type enthält eine durch Leerzeichen getrennte Liste von Berechtigungen, die Sie anfordern. Bei zum Zeitpunkt dieses Schreibens sind die zulässigen Werte 'camera', 'microphone' und camera microphone (durch Leerzeichen getrennt). Dieses Element rendert ähnlich wie bei einfachen User-Agent-Stilen.

Das Attribut type-ext

Bei einigen Berechtigungen, die zusätzliche Parameter ermöglichen, type-ext akzeptiert durch Leerzeichen getrennte Schlüssel/Wert-Paare, wie z. B. precise:true für die Berechtigung zur Standortbestimmung.

Das Attribut lang

Der Schaltflächentext wird vom Browser bereitgestellt und sollte einheitlich sein. können nicht direkt angepasst werden. Der Browser ändert die Sprache des Textes. basierend auf der übernommenen Sprache des Dokuments oder der übergeordneten Elementkette oder ein optionales lang . Das bedeutet, dass Entwickler die <permission> nicht lokalisieren müssen Elemente selbst. Wenn das <permission>-Element über den Ursprung hinausgeht in der Testphase werden möglicherweise mehrere Strings oder Symbole für jeden Berechtigungstyp unterstützt. um die Flexibilität zu erhöhen. Wenn Sie an der Verwendung von <permission> interessiert sind, und einen bestimmten String oder ein bestimmtes Symbol benötigen. Wenden Sie sich an uns.

Hinweis: Während des Ursprungstests wird das Attribut lang nicht unterstützt. Stattdessen die im Browser eingestellte Sprache verwendet wird.

Verhalten

Wenn der Nutzer mit dem Element <permission> interagiert, kann er verschiedenen Phasen:

• Wenn er eine Funktion zuvor noch nicht zugelassen hat, kann er sie bei jedem Besuch zulassen. für den aktuellen Besuch zulassen.

  

• Wenn er die Funktion zuvor zugelassen hat, kann er sie entweder weiterhin zulassen wenn Sie es zulassen.

  

• Wenn er zuvor eine Funktion nicht mehr zugelassen hat, kann er sie auch weiterhin nicht zulassen. diesmal erlauben.

  

Der Text des <permission>-Elements wird automatisch auf Basis des Status. Wenn beispielsweise die Berechtigung zur Nutzung einer Funktion erteilt wurde, wird der Text um zu signalisieren, dass die Funktion erlaubt ist. Wenn die Berechtigung zuerst gewährt werden muss, Der Text ändert sich so, dass der Nutzer zur Nutzung der Funktion eingeladen wird. Vergleichen Sie die vorherigen Screenshot mit dem folgenden Screenshot, um die beiden Zustände zu sehen.

CSS-Design

Damit Nutzer die Schaltfläche leicht als Oberfläche für den Zugriff auf leistungsstarke Funktionen wird der Stil des <permission>-Elements eingeschränkt. Wenn der Stil in Ihrem Anwendungsfall nicht funktionieren, freuen wir uns auf Ihr Feedback Wie und warum! Auch wenn nicht alle Designanforderungen erfüllt werden können, hoffen wir, Sichere Möglichkeiten entdecken, um weitere Stile für das <permission>-Element nach dem Ursprungstest. In der folgenden Tabelle sind einige Einschränkungen aufgeführt oder spezielle Regeln. Bei einem Verstoß gegen eine der Regeln <permission> Element wird deaktiviert und kann nicht mit ihm interagiert werden. Beliebig mit dem System zu interagieren, führt zu Ausnahmen, die durch JavaScript Die Fehlermeldung enthält weitere Details zur erkannten verstoßen.

Attribut	Regeln
color, background-color	Kann verwendet werden, um die Text- bzw. Hintergrundfarbe festzulegen. Die muss der Kontrast zwischen den beiden Farben für eine klare lesbarer Text (Kontrastverhältnis von mindestens 3). Der Alphakanal muss 1 sein.
font-size, zoom	Muss auf eine Länge von small und xxxlarge. Andernfalls wird das Element deaktiviert. Zoomen bei der Berechnung von font-size berücksichtigt.
outline-offset	Negative Werte werden zu 0 korrigiert.
margin (alle)	Negative Werte werden zu 0 korrigiert.
font-weight	Werte unter 200 werden zu 200 korrigiert.
font-style	Andere Werte als normal und italic sind korrigiert zu normal.
word-spacing	Werte über 0.5em werden korrigiert zu 0.5em Werte unter 0 werden korrigiert zu 0
display	Andere Werte als inline-block und none wird zu inline-block korrigiert.
letter-spacing	Werte über 0.2em werden korrigiert zu 0.2em Werte unter -0.05em sind korrigiert zu -0.05em.
min-height	Hat den Standardwert 1em. Falls angegeben, Höchstwert zwischen dem Standardwert und den angegebenen Werten berücksichtigt werden.
max-height	Hat den Standardwert 3em. Falls angegeben, berechneter Mindestwert zwischen dem Standardwert und den angegebenen Werten berücksichtigt werden.
min-width	Hat den Standardwert fit-content. Falls angegeben, den maximal berechneten Wert zwischen dem Standardwert und dem angegebenen berücksichtigt werden.
max-width	Hat einen Standardwert von dreimal fit-content. Wenn angegeben, der berechnete Mindestwert zwischen dem Standardwert und dem werden berücksichtigt.
padding-top	Wird nur wirksam, wenn height festgelegt ist auf auto. In diesem Fall sind Werte über 1em gleich zu 1em korrigiert, und padding-bottom wird auf den Wert padding-top festgelegt.
padding-left	Wird nur wirksam, wenn width festgelegt ist auf auto. In diesem Fall sind Werte über 5em gleich zu 5em korrigiert, und padding-right wird auf den Wert padding-left. festgelegt
transform	Verzerrende visuelle Effekte sind nicht zulässig. Momentan nutzen wir nur 2D-Verschiebung und proportionale Hochskalierung akzeptieren.

Die folgenden CSS-Eigenschaften können wie gewohnt verwendet werden:

• 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 (und alle border-*-Properties)
• 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-* (mit der zuvor für outline-offset notierten Ausnahme)
• 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

Darüber hinaus können alle logisch äquivalenten Attribute verwendet werden (z. B. inline-size entspricht width), wobei die gleichen Regeln wie für die Person Äquivalent.

Pseudoklassen

Es gibt zwei spezielle Pseudoklassen, die das Gestalten des <permission>-Elements ermöglichen. basierend auf dem Status:

• :granted: Die Pseudoklasse :granted ermöglicht spezielle Stile, wenn eine Berechtigung wurde erteilt.
• :invalid: Die Pseudoklasse :invalid ermöglicht spezielle Stile, wenn die einen ungültigen Status hat, z. B. wenn es in einem ursprungsübergreifenden iFrame anfordern.

Hinweis: Während des Ursprungstests wird die Pseudoklasse :invalid nicht unterstützt.

permission {
  background-color: green;
}

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

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

JavaScript-Ereignisse

Das <permission>-Element ist für die gemeinsame Verwendung mit dem Permissions API verfügbar. Es gibt eine Reihe von Ereignissen, die überwacht werden können:

• onpromptdismiss: Dieses Ereignis wird ausgelöst, wenn die von Das Element wurde vom Nutzer geschlossen (z. B. durch Klicken auf Schaltfläche oder Klicken außerhalb der Aufforderung).

  Hinweis :Während des Ursprungstests wird dies ondismiss genannt, aber der endgültiger Name ist onpromptdismiss. Sie können die Funktion Erkennung der unterstützten Ereignisnamen verwenden, z. B. 'ondismiss' in HTMLPermissionElement.prototype.

• onpromptaction: Dieses Ereignis wird ausgelöst, wenn die von Das Element wurde aufgelöst, weil der Nutzer eine Aktion in der Aufforderung ausgeführt hat selbst. Das bedeutet nicht unbedingt, dass sich der Berechtigungsstatus geändert hat. eine Aktion durchgeführt haben, die den Status quo aufrechterhält (z. B. weiterhin eine Berechtigung erteilen).

  Hinweis :Während des Ursprungstests wird dies onresolve genannt, aber der endgültiger Name ist onpromptaction. Sie können die Funktion Erkennung der unterstützten Ereignisnamen verwenden, z. B. 'onresolve' in HTMLPermissionElement.prototype.

• onvalidationstatuschange: Dieses Ereignis wird ausgelöst, wenn das Element von von "valid" bis "invalid". Das Element wird als "valid" betrachtet, wenn das Element der Integrität des Signals vertraut, wenn der Nutzer darauf klickt. "invalid", z. B. wenn das Element teilweise durch anderer HTML-Inhalte.

Hinweis :Während des Ursprungstests wird dieses Ereignis nicht ausgelöst.

Sie können Ereignis-Listener für diese Ereignisse direkt inline im HTML-Code registrieren. Code (<permission type="…" onpromptdismiss="alert('The prompt was dismissed');" />), oder addEventListener() für das <permission>-Element verwenden, wie im folgenden Beispiel.

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

Funktionserkennung

Wenn ein Browser ein HTML-Element nicht unterstützt, wird es nicht angezeigt. Das bedeutet, dass Wenn Ihr HTML-Code das Element <permission> enthält, passiert nichts, wenn das dass der Browser das nicht weiß. Trotzdem möchten Sie vielleicht über JavaScript Unterstützung suchen, Um eine Berechtigungsaufforderung zu erstellen, die durch einen Klick auf eine Normales <button>-Format.

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

Ursprungstest

Wenn du das <permission>-Element auf deiner Website mit echten Nutzern ausprobieren möchtest, registrieren Sie sich für den Ursprungstest. Weitere Informationen finden Sie unter Erste Schritte mit Ursprungstests für wie Sie Ihre Website für die Verwendung von Ursprungstests vorbereiten. Ursprungstest von Chrome 126 bis 131 (19. Februar 2025).

Demo

Sehen Sie sich die Demo und den Quellcode auf GitHub an. Hier ist ein Screenshot der Verwendung in einem unterstützten Browser.

Feedback

Wir würden gerne von Ihnen erfahren, wie <permission> bei Ihrem Anwendungsfall funktioniert. Gefühl können Sie in einer der Probleme im Repository oder reichen Sie einen neuen eins. Öffentliche Signale im Repository für die Mit dem <permission>-Element können wir und andere Browser signalisieren, dass du an diesem Angebot interessiert bist .

FAQ

• Inwiefern ist das besser als eine normale <button> in Kombination mit den Berechtigungen? API? Ein Klick auf ein <button> ist eine Nutzergeste. Browser haben jedoch keine Möglichkeit, Prüfen Sie, ob eine Verbindung zur Anfrage für die Berechtigung besteht. Wenn die Nutzer auf ein <permission> geklickt hat, kann der Browser sicher sein, dass der Klick tatsächlich die mit einer Berechtigungsanfrage zusammenhängen. So kann der Browser Abläufe vereinfachen, die sonst viel riskanter wäre. Beispielsweise kann es den Nutzenden erlauben, die Blockierung einer Berechtigung einfach rückgängig machen.
• Was ist, wenn das <permission>-Element von anderen Browsern nicht unterstützt wird? Die Das <permission>-Element kann als progressive Verbesserung verwendet werden. An nicht unterstützenden Browsern, kann ein klassischer Berechtigungsablauf verwendet werden. Beispiel: basierend auf dem Klick eines regulären <button>. Das Berechtigungsteam die an einem Polyfill arbeiten. GitHub-Repository markieren um benachrichtigt zu werden, sobald sie bereit ist.
• Wurde das mit anderen Browseranbietern besprochen? Das <permission>-Element bei W3C TPAC im Jahr 2023 in einem Breakout-Sitzung. Ich kann das Notizen zu öffentlichen Sitzungen. Das Chrome-Team hat außerdem von beiden Teams um formelle Standardpositionen gebeten. finden Sie im Abschnitt Weitere Informationen. Das <permission> wird auch in anderen Browsern diskutiert. in der Hoffnung, sie zu standardisieren.
• Sollte es sich tatsächlich um ein „void“-Element handeln? Es wird immer noch aktiv diskutiert Festlegen, ob <permission> ungültig sein soll oder nicht. Wenn du Feedback hast, beschreibe das Problem bitte kurz.

Weitere Informationen

• Erklärung
• Position von WebKit-Standards
• Position von Mozilla-Standards

Danksagungen

Dieses Dokument wurde geprüft von Balázs Engedy, Thomas Nguyen Penelope McLachlan Marian Harbach, David Warren und Rachel Andrew: