Testowanie origin nowego elementu <uprawnień> HTML

Thomas Steiner

Istnieje kilka niezbędnych metod na prośbę o dostęp do zaawansowanych funkcji, takich jak dostęp do lokalizacji w aplikacjach internetowych. Te metody wiążą się z wielu problemami, dlatego zespół ds. uprawnień w Chrome eksperymentuje z nową metodą deklaratywną: dedykowanym elementem HTML <permission>. Ten element jest testowany w Chrome 126 i mamy nadzieję, że zostanie ostatecznie z niego zrezygnowano.

Imperatywne metody wysyłania próśb o uprawnienia

Gdy aplikacje internetowe potrzebują dostępu do zaawansowanych funkcji, muszą poprosić o dostęp. Na przykład gdy Mapy Google wymagają lokalizacji użytkownika za pomocą interfejsu Geolocation API, przeglądarki wyświetlają użytkownikowi odpowiedni komunikat, często z opcją zapisania tej decyzji. Jest to dobrze zdefiniowany termin w specyfikacji Uprawnienia.

Uzyskiwanie domyślnej zgody podczas pierwszego użycia lub wyraźne proszenie o zgodę z wyprzedzeniem

Geolocation API to zaawansowany interfejs API, który polega na niejawnym pytaniu przy pierwszym użyciu. Gdy na przykład aplikacja wywoła metodę navigator.geolocation.getCurrentPosition(), prośba o uprawnienia automatycznie pojawi się po pierwszym wywołaniu. Inny przykład: navigator.mediaDevices.getUserMedia().

Inne interfejsy API, takie jak Notification API czy Device Orientation and Motion API, mają zwykle wyraźny sposób na prośbę o zgodę za pomocą metody statycznej, takiej jak Notification.requestPermission() lub DeviceMotionEvent.requestPermission().

Uwaga: w przeszłości istniały plany dotyczące jeszcze innego sposobu uzyskiwania uprawnień, czyli jawnej metody navigator.permissions.request(), ale usunęliśmy tę metodę z interfejsu Permissions API po omówieniu problemu nr 83 w repozytorium specyfikacji. Pytanie o „właściwe” podejście do tych metod (wyświetlenie prośby o użytkowanie i wyraźne zapytanie o zgodę) jest często poruszanym tematem, na który nie ma jednoznacznej odpowiedzi.

Problemy związane z imperatywnymi metodami pytania o uprawnienia

Spam związany z uprawnieniami

W przeszłości witryny mogły wywoływać metody takie jak navigator.mediaDevices.getUserMedia() lub Notification.requestPermission(), ale także navigator.geolocation.getCurrentPosition() natychmiast po załadowaniu witryny. Zanim użytkownik wejdzie w interakcję z witryną, pojawi się prośba o udzielenie uprawnień. Czasami określa się to jako spam z prośbami o uprawnienia i dotyczy to obu metod: pośredniego pytania o uprawnienia przy pierwszym użyciu oraz wyraźnego żądania udzielenia uprawnień z góry.

Środki zapobiegawcze w przeglądarce i wymagania dotyczące gestów użytkownika

Spam związany z uprawnieniami sprawia, że dostawcy przeglądarek wymagali gestu użytkownika, takiego jak kliknięcie przycisku lub zdarzenie kliknięcia, zanim wyświetlili prośbę o uprawnienia. Problem z tym podejściem polega na tym, że bardzo trudno, jeśli nie jest, jest w stanie określić, czy dany gest użytkownika powinien powodować wyświetlenie prośby o zgodę. Być może użytkownik po prostu klikał gdziekolwiek na stronie, ponieważ wczytywanie trwało zbyt długo, albo rzeczywiście kliknął przycisk Znajdź mnie. Niektóre witryny bardzo dobrze oszukują użytkowników, aby ci klikali treści, które powodują wyświetlenie promptu.

Innym sposobem jest dodanie działań ograniczających ryzyko związane z nadużyciami związanych z promptami, np. całkowite zablokowanie funkcji lub wyświetlanie prompta z prośbą o uprawnienia w mniej inwazyjny sposób.

Uprawnienia kontekstowe

Kolejnym problemem, zwłaszcza na dużych ekranach, jest sposób wyświetlania prośby o dostęp: powyżej linii śmierci, czyli poza obszarem okna przeglądarki, na którym aplikacja może rysować. Nie jest niczym niezwykłym, że użytkownicy nie zauważają prompta u góry okna przeglądarki, gdy klikną przycisk u dołu okna. Ten problem często nasila się, gdy w przeglądarce są aktywne środki zapobiegające spamowi.

Nie ma możliwości łatwego cofnięcia

W końcu użytkownicy zbyt łatwo mogą trafić na ślepy zaułek. Jeśli na przykład użytkownik zablokuje dostęp do funkcji, musi znać menu z informacjami o witrynie, w którym może zresetować uprawnienia lub ponownie włączyć zablokowane uprawnienia. Obie opcje w najgorszym przypadku wymagają pełnego ponownego załadowania strony, dopóki zaktualizowane ustawienie nie zacznie obowiązywać. Witryny nie mogą udostępniać użytkownikom łatwego skrótu umożliwiającego zmianę stanu istniejących uprawnień. Trzeba im dokładnie wyjaśnić, jak zmienić ustawienia, jak pokazano na poniższym zrzucie ekranu z Google Maps.

Jeśli uprawnienie jest kluczowe dla działania aplikacji, na przykład dostęp do mikrofonu w przypadku aplikacji do rozmów wideo, aplikacje takie jak Google Meet wyświetlają natrętne dialogi, które instruują użytkownika, jak odblokować uprawnienie.

Deklarator <permission>

Aby rozwiązać problemy opisane w tym poście, zespół ds. uprawnień w Chrome rozpoczął testowanie nowego elementu HTML <permission>. Ten element pozwala deweloperom deklaratywnie prosić o pozwolenie na korzystanie z pewnych funkcji, które są obecnie dostępne dla witryn. W najprostszej postaci użyjesz go w następujący sposób:

<permission type="camera" />

Uwaga: Page Embedded Permission Control (PEPC, wymawiane jako „PEP-C”) to nazwa większego kompleksowego programu, którego celem jest umieszczanie większej liczby elementów sterujących w obszarze treści. Dlatego czasami możesz zobaczyć, że <permission> jest określany jako PEPC.

Nadal trwają dyskusje na temat tego, czy element <permission> powinien być elementem pustym. Element pusty to element HTML, który zamyka się sam i nie może mieć żadnych węzłów podrzędnych, co w HTML oznacza, że nie może mieć znacznika końcowego.

Atrybut type

Atrybut type zawiera rozdzieloną spacjami listę uprawnień, których dotyczy prośba. W momencie pisania tego tekstu dozwolone wartości to 'camera', 'microphone' i camera microphone (oddzielone spacjami). Ten element domyślnie renderuje się podobnie do przycisków ze stylem klienta użytkownika bez głębi.

Atrybut type-ext

W przypadku niektórych uprawnień, które umożliwiają stosowanie dodatkowych parametrów, atrybut type-ext akceptuje rozdzielone spacjami pary klucz-wartość, np. precise:true w przypadku uprawnień do geolokalizacji.

Atrybut lang

Tekst przycisku jest dostarczany przez przeglądarkę i ma być spójny, dlatego nie można go bezpośrednio dostosowywać. Przeglądarka zmienia język tekstu na podstawie dziedziczonego języka dokumentu lub łańcucha elementów nadrzędnych albo opcjonalnego atrybutu lang. Oznacza to, że deweloperzy nie muszą samodzielnie lokalizować elementu <permission>. Jeśli element <permission> przejdzie poza etap próbny, w przypadku każdego typu uprawnień można obsługiwać kilka ciągów znaków lub ikon, aby zwiększyć elastyczność. Jeśli chcesz używać elementu <permission> i potrzebujesz określonego ciągu znaków lub ikony, skontaktuj się z nami.

Uwaga: podczas okresu próbnego atrybut lang nie będzie obsługiwany. Zamiast tego będzie używany język ustawiony w przeglądarce.

Zachowanie

Gdy użytkownik wchodzi w interakcję z elementem <permission>, może przechodzić przez różne etapy:

• Jeśli funkcja nie została wcześniej włączona, użytkownik może zezwolić na jej używanie przy każdej wizycie lub tylko podczas bieżącej wizyty.

  

• Jeśli wcześniej zezwoliłeś na korzystanie z tej funkcji, możesz to kontynuować lub zatrzymać.

  

• Jeśli wcześniej zablokowałeś funkcję, możesz ją nadal blokować lub zezwolić na jej używanie.

  

Tekst elementu <permission> jest automatycznie aktualizowany na podstawie stanu. Jeśli na przykład przyznano uprawnienia do korzystania z funkcji, tekst zmieni się, aby wskazać, że funkcja jest dozwolona. Jeśli najpierw trzeba przyznać uprawnienia, tekst zmienia się, aby zaprosić użytkownika do korzystania z funkcji. Porównaj zrzut ekranu z poprzedniego obrazu z tym, aby zobaczyć oba stany.

Projektowanie w CSS

Aby użytkownicy mogli łatwo rozpoznać przycisk jako element umożliwiający dostęp do zaawansowanych funkcji, styl elementu <permission> jest ograniczony. Jeśli ograniczenia dotyczące stylizacji nie sprawdzają się w Twoim przypadku, daj nam znać, jak i dlaczego. Nie wszystkie potrzeby związane ze stylami mogą zostać zaspokojone, ale mamy nadzieję, że odkryjemy bezpieczne sposoby na umożliwienie stylizacji elementu <permission> po zakończeniu testów origin. W tabeli poniżej znajdziesz informacje o niektórych właściwościach, które mają ograniczenia lub do których mają zastosowanie specjalne reguły. W przypadku naruszenia któregokolwiek z tych reguł element <permission> zostanie wyłączony i nie będzie można z nim wchodzić w interakcję. Wszelkie próby interakcji z nim spowodują wyjątki, które zostaną przechwycone przez JavaScript. Zawiera on więcej informacji o wykrytym naruszeniu zasad.

Właściwość	Reguły
color, background-color	Można ich użyć do ustawienia koloru tekstu i tła. Kontrast między 2 kolorami musi być wystarczający, aby tekst był czytelny (współczynnik kontrastu co najmniej 3). Kanał alfa musi mieć wartość 1.
font-size, zoom	Wartość musi mieścić się w zakresie od small do xxxlarge. W przeciwnym razie element zostanie wyłączony. Powiększenie będzie uwzględniane podczas obliczania font-size.
outline-offset	Wartości ujemne zostaną skorygowane na 0.
margin (wszystkie)	Wartości ujemne zostaną poprawione na 0.
font-weight	Wartości poniżej 200 zostaną skorygowane na 200.
font-style	Wartości inne niż normal i italic zostaną poprawione na normal.
word-spacing	Wartości powyżej 0.5em zostaną skorygowane na 0.5em. Wartości poniżej 0 zostaną skorygowane na 0.
display	Wartości inne niż inline-block i none zostaną poprawione na inline-block.
letter-spacing	Wartości powyżej 0.2em zostaną skorygowane na 0.2em. Wartości poniżej -0.05em zostaną skorygowane do -0.05em.
min-height	Będzie mieć wartość domyślną 1em. Jeśli zostanie podana, zostanie wzięta pod uwagę maksymalna obliczona wartość między wartością domyślną a podanymi wartościami.
max-height	Wartość domyślna to 3em. Jeśli zostanie podana, zostanie uwzględniona minimalna obliczona wartość między wartością domyślną a podanymi wartościami.
min-width	Wartość domyślna to fit-content. Jeśli została podana, zostanie wzięta pod uwagę maksymalna obliczona wartość między wartością domyślną a podaną wartością.
max-width	Domyślna wartość to trzy razy fit-content. Jeśli wartość zostanie podana, zostanie uwzględniona minimalna wartość obliczona między wartością domyślną a podanymi wartościami.
padding-top	Jest stosowane tylko wtedy, gdy ustawienie height ma wartość auto. W tym przypadku wartości większe niż 1em zostaną skorygowane na 1em, a wartość padding-bottom zostanie ustawiona na padding-top.
padding-left	Jest stosowane tylko wtedy, gdy ustawienie width ma wartość auto. W tym przypadku wartości powyżej 5em zostaną skorygowane na 5em, a padding-right zostaną ustawione na wartość padding-left.
transform	Efekty wizualne powodujące zniekształcenia są niedozwolone. Obecnie akceptujemy tylko tłumaczenie 2D i proporcjonalne powiększenie.

Możesz używać tych właściwości CSS w zwykły sposób:

• 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 (i wszystkie usługi 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-* (z wyjątkiem outline-offset, o którym wspominaliśmy wcześniej)
• 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

Dodatkowo można używać wszystkich właściwości logicznie równoważnych (np. inline-size jest równoważne width), które podlegają tym samym regułom co ich odpowiedniki.

Pseudoklasy

Istnieją 2 specjalne pseudoklasy, które umożliwiają stylizację elementu <permission> w zależności od stanu:

• :granted: pseudoklasa :granted umożliwia stosowanie specjalnego stylu w przypadku przyznania uprawnień.
• :invalid: pseudoklasa :invalid umożliwia zastosowanie specjalnego stylu, gdy element jest w nieprawidłowym stanie, np. gdy jest wyświetlany w ramce iframe z innej domeny.

Uwaga: podczas okresu próbnego dotyczącego pochodzenia pseudoklasa :invalid nie będzie obsługiwana.

permission {
  background-color: green;
}

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

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

Zdarzenia JavaScript

Element <permission> jest przeznaczony do użytku z interfejsem Permissions API. Istnieje kilka zdarzeń, które można nasłuchiwać:

• onpromptdismiss: to zdarzenie jest wywoływane, gdy użytkownik odrzuci prośbę o uprawnienia wywołaną przez element (np. po kliknięciu przycisku zamykania lub kliknięciu poza polem).

  Uwaga: w trakcie okresu próbnego na etapie pochodzenia usługa będzie się nazywać ondismiss, ale jej ostateczna nazwa to onpromptdismiss. Możesz wykryć cechę obsługiwanej nazwy zdarzenia, np. 'ondismiss' in HTMLPermissionElement.prototype.

• onpromptaction: to zdarzenie jest wywoływane, gdy użytkownik zaakceptował prośbę o przyznanie uprawnień, która została wyświetlona przez element. Nie oznacza to koniecznie, że stan uprawnień uległ zmianie. Użytkownik mógł podjąć działanie, które utrzymuje stan obecny (np. kontynuowanie zezwalania na uprawnienia).

  Uwaga: w trakcie okresu próbnego na etapie pochodzenia usługa będzie się nazywać onresolve, ale jej ostateczna nazwa to onpromptaction. Obsługiwaną nazwę zdarzenia możesz wykryć za pomocą funkcji, na przykład 'onresolve' in HTMLPermissionElement.prototype.

• onvalidationstatuschange: to zdarzenie jest wywoływane, gdy element przechodzi z stanu "valid" do stanu "invalid". Element jest uznawany za "valid", gdy przeglądarka ufa integralności sygnału, gdy użytkownik go kliknie. W przeciwnym razie "invalid", np. gdy element jest częściowo zasłonięty przez inne treści HTML.

Uwaga: podczas testowania pochodzenia to zdarzenie nie zostanie wywołane.

Możesz zarejestrować te odbiorniki zdarzeń bezpośrednio w kod HTML (<permission type="…" onpromptdismiss="alert('The prompt was dismissed');" />) lub za pomocą elementu addEventListener() w elemencie <permission>, jak pokazano w następującym przykładzie.

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

Wykrywanie cech

Jeśli przeglądarka nie obsługuje elementu HTML, nie wyświetli go. Oznacza to, że jeśli w kodzie HTML masz element <permission>, nic się nie stanie, jeśli przeglądarka go nie rozpozna. Możesz nadal wykrywać obsługę za pomocą JavaScriptu, na przykład aby utworzyć prośbę o uprawnienia, która jest wywoływana po kliknięciu zwykłego przycisku <button>.

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

Wersja próbna origin

Aby wypróbować element <permission> w swojej witrynie z udziałem rzeczywistych użytkowników, zarejestruj się w programie próbnym Origin. Aby dowiedzieć się, jak przygotować witrynę do korzystania z testów pochodzenia, przeczytaj artykuł Pierwsze kroki z testami pochodzenia. Testowanie origin będzie trwało od wersji Chrome 126 do 131 (19 lutego 2025 r.).

Prezentacja

Zapoznaj się z demonstracją i zapoznaj się z kodem źródłowym na GitHubie. Oto zrzut ekranu z obsługiwanej przeglądarki.

Prześlij opinię

Chętnie poznamy Twoją opinię na temat tego, jak <permission> sprawdza się w Twoim przypadku użycia. Możesz odpowiedzieć na jeden z problemów w repozytorium lub przesłać nowy. Sygnały publiczne w repozytorium elementu <permission> poinformują nas i inne przeglądarki o Twoim zainteresowaniu tym elementem.

Najczęstsze pytania

• Dlaczego jest to lepsze niż zwykłe <button> w połączeniu z interfejsem API dotyczącego uprawnień? Kliknięcie przycisku <button> to działanie użytkownika, ale przeglądarki nie mają możliwości sprawdzenia, czy jest ono związane z prośbą o udzielenie uprawnień. Jeśli użytkownik kliknie <permission>, przeglądarka może mieć pewność, że kliknięcie jest związane z prośbą o uprawnienia. Umożliwia to przeglądarce uproszczenie procesów, które w przeciwnym razie byłyby dużo bardziej ryzykowne. Możesz na przykład umożliwić użytkownikowi łatwe cofnięcie blokady uprawnień.
• Co zrobić, jeśli inne przeglądarki nie obsługują elementu <permission>? Elementu <permission> można używać jako ulepszenia progresywnego. W przeglądarkach, które nie obsługują tej funkcji, można użyć klasycznego procesu uzyskiwania uprawnień. Na przykład na podstawie kliknięcia zwykłego przycisku <button>. Zespół ds. uprawnień pracuje też nad polyfillem. Oznacz gwiazdką repozytorium GitHub, aby otrzymywać powiadomienia o jego aktualizacjach.
• Czy ta kwestia była omawiana z innymi dostawcami przeglądarek? Element <permission> był aktywnie omawiany w 2023 r. na spotkaniu W3C TPAC w ramach rozmowy na osobnym kanale. Możesz przeczytać notatki z sesji publicznej. Zespół Chrome poprosił też o formalne stanowiska standardowe od obu dostawców – patrz sekcja Powiązane linki. Element <permission> jest obecnie tematem dyskusji z innymi przeglądarkami i mamy nadzieję na jego ujednolicenie.
• Czy ten element powinien być pusty? Wciąż toczy się trwałe dyskutowanie, czy pole <permission> powinno być elementem nieważnym. Jeśli chcesz się podzielić opinią, odnieś się do problemu.

Powiązane artykuły

• Wyjaśnienie
• Położenie na podstawie standardów WebKit
• Mozilla Standards Position

Podziękowania

Ten dokument został sprawdzony przez Balázsa Engedy, Thomasa Nguyena, Penelope McLachlan, Mariana Harbacha, Davida Warrena i Rachel Andrew.