Yeni HTML <izni> öğesi için kaynak denemesi

Thomas Steiner

Web uygulamalarında konum erişimi gibi güçlü özellikleri kullanmak için izin istemenin çeşitli zorunlu yöntemleri vardır. Bu yöntemler bir dizi zorluğu beraberinde getirmektedir. Bu nedenle Chrome izinleri ekibi, özel bir HTML <permission> öğesi olan yeni bir bildirima dayalı yöntemle denemeler yapmaktadır. Bu öğe, Chrome 126'daki kaynak denemesindedir ve nihai olarak onu standart hale getirmeyi umuyoruz.

İzin istemek için zorunlu yöntemler

Web uygulamalarının güçlü özelliklere erişmesi gerektiğinde izin istemesi gerekir. Örneğin, Google Haritalar Geolocation API'yi kullanarak kullanıcının konumunu gerektirdiğinde tarayıcılar kullanıcıya genellikle bu kararı saklama seçeneğiyle birlikte istem gösterir. Bu, izinler spesifikasyonunda iyi tanımlanmış bir kavramdır.

İlk kullanımda dolaylı olarak istemek ve önceden açıkça istemek

Coğrafi Konum API'si, güçlü bir API'dir ve ilk kullanımda örtülü olarak sorma yaklaşımını kullanır. Örneğin, bir uygulama navigator.geolocation.getCurrentPosition() yöntemini çağırdığında ilk çağrıda otomatik olarak izin istemi görüntülenir. Bir diğer örnek ise navigator.mediaDevices.getUserMedia().

Notification API veya Device Orientation and Motion API gibi diğer API'lerde genellikle Notification.requestPermission() veya DeviceMotionEvent.requestPermission() gibi statik bir yöntem aracılığıyla izin istemenin açık bir yolu vardır.

İzin istemek için zorunlu yöntemlerle ilgili sorunlar

İzin spam'i

Geçmişte web siteleri navigator.mediaDevices.getUserMedia() veya Notification.requestPermission() gibi yöntemleri çağırabiliyordu. Ayrıca, bir web sitesi yüklendiğinde hemen navigator.geolocation.getCurrentPosition() çağrılıyordu. Kullanıcı web sitesiyle etkileşimde bulunmadan önce bir izin istemi açılır. Bu durum bazen izin spam'i olarak tanımlanır ve hem ilk kullanımda dolaylı olarak hem de baştan açıkça izin isteğinde bulunarak her iki yaklaşımı da etkiler.

Tarayıcı çözümleri ve kullanıcı hareketi gereksinimleri

İzin spam'i, tarayıcı tedarikçi firmalarının izin istemi göstermeden önce düğme tıklaması veya keydown etkinliği gibi bir kullanıcı hareketi yapmasını zorunlu kılmasına neden oluyordu. Bu yaklaşımın sorunu, tarayıcının belirli bir kullanıcı hareketinin, bir izin isteminin gösterilmesine yol açıp açmayacağını anlamasının çok zor veya imkansız olmasıdır. Kullanıcı, sayfanın yüklenmesi çok uzun sürdüğü için sayfayı tıklıyor olabilir veya gerçekten Bul beni düğmesini tıklıyor olabilir. Bazı web siteleri, istemi tetiklemek üzere kullanıcıları içeriği tıklamaları için aldatma konusunda da çok başarılı oldu.

İstem kötüye kullanımıyla ilgili önlemler de alınabilir. Örneğin, özellikleri baştan tamamen engelleyebilir veya izin istemini modal olmayan, daha az müdahaleci bir şekilde gösterebilirsiniz.

İzin bağlamına ayırma

Özellikle büyük ekranlarda karşılaşılan bir diğer sorun da izin isteğinin genellikle gösterilme şeklidir: Ölüm çizgisinin üzerinde, yani uygulamanın çizim yapabileceği tarayıcı penceresi alanının dışında. Kullanıcıların, pencerenin altındaki bir düğmeyi tıkladığında tarayıcı pencerelerinin üst kısmındaki istemi göz ardı edecekleri pek çok şey yoktur. Bu sorun genellikle tarayıcı spam azaltma önlemleri uygulandığında daha da kötüleşir.

Kolayca geri alınamaz.

Son olarak, kullanıcılar çok kolay bir şekilde çıkmaza sokabilir. Örneğin, kullanıcı bir özelliğe erişimi engelledikten sonra izinleri sıfırlayabileceği veya engellenen izinleri tekrar etkinleştirebileceği site bilgileri açılır menüsünü bilmelidir. En kötü durumda, her iki seçenek de güncellenen ayarın geçerli olması için sayfanın tamamen yeniden yüklenmesini gerektirir. Sitelerin, kullanıcıların mevcut izin durumunu değiştirmesi için kolay bir kısayol sunması mümkün değildir. Sitelerin, aşağıdaki Google Haritalar ekran görüntüsünün alt kısmında gösterildiği gibi kullanıcılara ayarlarını nasıl değiştireceklerini ayrıntılı olarak açıklaması gerekir.

İzin, deneyimin anahtarıysa (ör. bir görüntülü konferans uygulaması için mikrofon erişimi) Google Meet gibi uygulamalar, kullanıcıya iznin nasıl kaldırılacağını anlatan müdahaleci iletişim kutuları gösterir.

Bildirme kipinde bir <permission> öğesi

Chrome izinleri ekibi, bu yayında açıklanan zorlukları gidermek için yeni bir HTML öğesi olan <permission> için bir kaynak denemesi başlattı. Bu öğe, geliştiricilerin web sitelerinde kullanılabilen güçlü özelliklerin bir alt kümesini kullanma iznini açık bir şekilde istemesine olanak tanır. En basit şekliyle, aşağıdaki örnekte olduğu gibi kullanırsınız:

<permission type="camera" />

<permission> öğesinin boş bir öğe olup olmaması hâlâ aktif olarak tartışılıyor. Boş öğe, HTML'de alt düğüm içeremeyen, kendi kendini kapatan bir öğedir. HTML'de bu, son etiketi olmayabileceği anlamına gelir.

type özelliği

type özelliği, istediğiniz izinlerin boşlukla ayrılmış bir listesini içerir. Bu makalenin yazıldığı sırada izin verilen değerler 'camera', 'microphone' ve camera microphone'dir (boşlukla ayrılmış). Bu öğe varsayılan olarak, temel kullanıcı aracısı stili içeren düğmelere benzer şekilde oluşturulur.

type-ext özelliği

Ek parametrelere izin veren bazı izinler için type-ext özelliği, boşlukla ayrılmış anahtar/değer çiftlerini kabul eder. Örneğin, coğrafi konum izni için precise:true.

lang özelliği

Düğme metni tarayıcı tarafından sağlanır ve tutarlı olması amaçlandığından doğrudan özelleştirilemez. Tarayıcı, metnin dilini belgenin devralınan diline veya üst öğe zincirinin diline veya isteğe bağlı bir lang özelliğine göre değiştirir. Bu, geliştiricilerin <permission> öğesini kendileri yerelleştirmelerinin gerekmediği anlamına gelir. <permission> öğesi kaynak deneme aşamasının ötesine geçerse esnekliği artırmak amacıyla her izin türü için birden fazla dize veya simge desteklenebilir. <permission> öğesini kullanmak istiyorsanız ve belirli bir dize veya simge gerekiyorsa bize ulaşın.

Davranış

Kullanıcı, <permission> öğesiyle etkileşime geçtiğinde çeşitli aşamalar arasında geçiş yapabilir:

• Daha önce izin verilmeyen bir özelliğe her ziyarette veya mevcut ziyarette izin verilebilir.

  

• Kullanıcı daha önce bu özelliğe izin verdiyse izin vermeye devam edebilir veya izin vermeyi durdurabilir.

  

• Daha önce bir özelliğe izin vermemişse bu özelliğe izin vermeye devam edebilir veya bu kez izin verebilir.

  

<permission> öğesinin metni, duruma göre otomatik olarak güncellenir. Örneğin, bir özelliği kullanma izni verildiyse metin, özelliğin kullanılmasına izin verildiği şeklinde değişir. Önce izin verilmesi gerekiyorsa metin, kullanıcıyı özelliği kullanmaya davet edecek şekilde değişir. İki durumu görmek için önceki ekran görüntüsünü aşağıdaki ekran görüntüsüyle karşılaştırın.

CSS tasarımı

Kullanıcıların, düğmeyi güçlü özelliklere erişim sağlayacak bir yüzey olarak kolayca tanıyabilmelerini sağlamak için <permission> öğesinin stili kısıtlanır. Stil kısıtlamaları kullanım alanınız için uygun değilse bunun nedenini ve nasıl olduğunu bize bildirebilirsiniz. Tüm stil ihtiyaçları karşılanamasa da kaynak denemesinden sonra <permission> öğesinin daha fazla stillendirilmesine izin verecek güvenli yollar keşfetmeyi umuyoruz. Aşağıdaki tabloda, kısıtlamaları veya özel kuralları olan bazı özellikler ayrıntılı olarak açıklanmıştır. Kurallardan herhangi biri ihlal edilirse <permission> öğesi devre dışı bırakılır ve öğeyle etkileşim kurulamaz. Bu öğeyle etkileşime geçmeye yönelik tüm girişimler, JavaScript ile yakalanabilecek istisnalara neden olur. Hata mesajında, algılanan ihlal hakkında daha fazla bilgi yer alır.

Aşağıdaki CSS özellikleri normal şekilde kullanılabilir:

• 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 (ve tüm border-* mülkleri)
• 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-* (outline-offset için daha önce belirtilen istisna ile)
• 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

Ayrıca, mantıksal olarak eşdeğer olan tüm mülkler (örneğin, inline-size, width ile eşdeğerdir) eşdeğerleriyle aynı kurallara göre kullanılabilir.

Sözde sınıflar

<permission> öğesinin durumuna göre stil vermeyi sağlayan iki özel sözde sınıf vardır:

• :granted: :granted sözde sınıfı, izin verildiğinde özel stil oluşturmanıza olanak tanır.
• :invalid: :invalid sözde sınıfı, öğe geçersiz durumdayken (ör. kaynak dışı bir iframe'de sunulduğunda) özel stil oluşturmanıza olanak tanır.

permission {
  background-color: green;
}

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

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

JavaScript etkinlikleri

<permission> öğesinin Permissions API ile birlikte kullanılması amaçlanmıştır. Dinlenebilecek çeşitli etkinlikler vardır:

• onpromptdismiss: Bu etkinlik, öğe tarafından tetiklenen izin istemi kullanıcı tarafından kapatıldığında (örneğin, kapat düğmesini veya istemin dışındaki bir yeri tıklayarak) tetiklenir.

• onpromptaction: Bu etkinlik, öğe tarafından tetiklenen izin istemi, kullanıcının istem üzerinde bir işlem yapmasıyla çözüldüğünde tetiklenir. Bu durum, izin durumunun değiştiği anlamına gelmez. Kullanıcı, mevcut durumu koruyan bir işlem yapmış olabilir (ör. bir izin vermeye devam etmek).

• onvalidationstatuschange: Bu etkinlik, öğe "valid" durumundan "invalid" durumuna geçtiğinde tetiklenir. Tarayıcı, kullanıcı öğeyi tıkladığında sinyalin bütünlüğüne güveniyorsa öğe "valid" olarak kabul edilir. Aksi takdirde (ör. öğe diğer HTML içerikleri tarafından kısmen örtüldüğünde) öğe "invalid" olarak kabul edilir.

Bu etkinlikler için etkinlik dinleyicilerini doğrudan HTML koduna (<permission type="…" onpromptdismiss="alert('The prompt was dismissed');" />) satır içi olarak veya aşağıdaki örnekte gösterildiği gibi <permission> öğesinde addEventListener() kullanarak kaydedebilirsiniz.

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

Özellik algılama

Bir tarayıcı, HTML öğesini desteklemiyorsa bu öğeyi göstermez. Bu, HTML kodunuzda <permission> öğesi varsa tarayıcı bunu bilmiyorsa hiçbir şey olmayacağı anlamına gelir. Yine de JavaScript kullanarak desteği algılamak isteyebilirsiniz. Örneğin, normal bir <button> tıklamasıyla tetiklenen bir izin istemi oluşturmak için.

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

Kaynak denemesi

Sitenizdeki <permission> öğesini gerçek kullanıcılarla denemek için orijinal deneme sürümüne kaydolun. Sitenizi kaynak denemelerini kullanmaya hazırlama talimatları için Kaynak denemelerini kullanmaya başlama başlıklı makaleyi okuyun. Kaynak denemesi, Chrome 126 ile 131 arasında (19 Şubat 2025) yapılacaktır.

Demo

Demoyu keşfedin ve GitHub'da kaynak koda göz atın. Desteklenen bir tarayıcıda bu deneyimin ekran görüntüsünü burada bulabilirsiniz.

Geri bildirim

<permission> hizmetinin kullanım alanınız için nasıl çalıştığını öğrenmek isteriz. Depodaki sorunlardan birine yanıt verebilir veya yeni bir kod oluşturabilirsiniz. <permission> öğesi için depoda bulunan herkese açık sinyaller, bu öğeye ilgi duyduğunuzu bize ve diğer tarayıcılara bildirir.

SSS

• Bu, izinler API'si ile birlikte kullanılan normal bir <button>'den nasıl daha iyidir? <button> tıklaması bir kullanıcı hareketidir ancak tarayıcıların, izin isteme isteğine bağlı olduğunu doğrulaması mümkün değildir. Kullanıcı bir <permission> simgesini tıkladıysa tarayıcı, tıklamanın izin isteğiyle ilgili olduğundan emin olabilir. Bu sayede tarayıcı, aksi takdirde çok daha riskli olan işlemleri kolaylaştırabilir. Örneğin, kullanıcının bir izni engelleme işlemini kolayca geri almasına olanak tanıma.
• Diğer tarayıcılar <permission> öğesini desteklemiyorsa ne olur? <permission> öğesi, aşamalı iyileştirme olarak kullanılabilir. Desteklenmeyen tarayıcılarda klasik izin akışı kullanılabilir. Örneğin, normal bir <button> tıklamasını temel alarak. İzinler ekibi de bir polyfill üzerinde çalışıyor. Hazır olduğunda bildirim almak için GitHub deposuna yıldız ekleyin.
• Bu konu diğer tarayıcı tedarikçileriyle konuşuldu mu? <permission> öğesi, 2023'te W3C TPAC'de alt oturumda etkin bir şekilde tartışıldı. Herkese açık oturum notlarını okuyabilirsiniz. Chrome ekibi her iki tedarikçiden de resmi Standart Konumlarını istemiştir. İlgili bağlantılar bölümüne bakın. <permission> öğesi, diğer tarayıcılarla devam eden bir tartışma konusudur ve bu öğeyi standartlaştırmayı umuyoruz.
• Bu aslında boş bir öğe mi olmalı? <permission> öğesinin geçersiz bir öğe olup olmaması gerektiğiyle ilgili aktif tartışmalar devam ediyor. Geri bildirimde bulunmak isterseniz sorunu bizimle paylaşabilirsiniz.

İlgili bağlantılar

• Açıklayıcı
• WebKit Standartları Konumu
• Mozilla Standartları Konumlandırması

Teşekkür ederiz

Bu doküman, Balázs Engedy, Thomas Nguyen, Penelope McLachlan, Marian Harbach, David Warren ve Rachel Andrew tarafından incelendi.