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

Thomas Steiner

Web uygulamalarında konum erişimi gibi güçlü özelliklerin kullanılması için izin istemek üzere çeşitli zorunlu yöntemler vardır. Bu yöntemler çeşitli zorluklar içerir. Bu nedenle Chrome izinleri ekibi, yeni bir bildirimsel yöntem olan özel bir HTML <permission> öğesiyle denemeler yapmaktadır. Bu öğe, Chrome 126'dan itibaren kaynak denemesindedir ve nihayetinde standartlaştırmayı umuyoruz.

İzin istemek için zorunlu yöntemler

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

İlk kullanımda dolaylı olarak sorma ile önceden açıkça isteme arasındaki fark

Geolocation API, güçlü bir API'dir ve ilk kullanımda örtülü olarak izin isteme yaklaşımını kullanır. Örneğin, bir uygulama navigator.geolocation.getCurrentPosition() yöntemini çağırdığında, ilk çağrıda izin istemi otomatik olarak açılır. Başka bir örnek ise navigator.mediaDevices.getUserMedia().

Bildirim API'si veya Cihaz Yönü ve Hareket API'si gibi diğer API'lerde genellikle Notification.requestPermission() veya DeviceMotionEvent.requestPermission() gibi statik bir yöntemle izin istemenin açık bir yolu vardır.

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

İzin spam'i

Geçmişte web siteleri, navigator.mediaDevices.getUserMedia() veya Notification.requestPermission() gibi yöntemlerin yanı sıra bir web sitesi yüklendiğinde hemen navigator.geolocation.getCurrentPosition() yöntemini de çağırabiliyordu. Kullanıcı web sitesiyle etkileşime geçmeden önce bir izin istemi açılıyordu. Bu durum bazen izin spam'i olarak tanımlanır ve hem ilk kullanımda dolaylı olarak izin isteme hem de önceden açıkça izin isteme yaklaşımlarını etkiler.

Tarayıcı azaltma önlemleri ve kullanıcı hareketi şartı

İzin spam'i, tarayıcı tedarikçilerinin izin istemi göstermeden önce kullanıcı hareketi (ör. düğme tıklama veya tuşa basma etkinliği) gerektirmesine neden oldu. Bu yaklaşımdaki sorun, tarayıcının belirli bir kullanıcı hareketinin izin istemi gösterilmesine neden olup olmayacağını anlamasının çok zor, hatta imkansız olmasıdır. Kullanıcı, sayfanın yüklenmesi çok uzun sürdüğü için sinirle sayfada herhangi bir yeri tıklamış veya gerçekten de Beni bul düğmesini tıklamış olabilir. Bazı web siteleri de kullanıcıları, istemi tetiklemek için içeriği tıklamaya ikna etme konusunda çok başarılı oldu.

Diğer bir önlem ise istem kötüye kullanımını azaltmaya yönelik önlemler eklemektir. Örneğin, özellikleri tamamen engellemek veya izin istemini daha az rahatsız edici bir şekilde göstermek gibi.

İzin bağlamsallaştırması

Özellikle büyük ekranlarda karşılaşılan bir diğer zorluk ise izin isteminin genellikle ölüm çizgisinin üzerinde, yani uygulamanın çizim yapabileceği tarayıcı penceresinin alanı dışında gösterilmesidir. Kullanıcıların, pencerenin alt kısmındaki bir düğmeyi tıkladıktan sonra tarayıcı penceresinin üst kısmındaki istemi kaçırması sıkça görülür. Bu sorun, tarayıcıdaki spam azaltma önlemleri uygulandığında genellikle daha da kötüleşir.

Kolayca geri alınamaz

Son olarak, kullanıcıların çıkmaz sokağa girmesi çok kolaydır. Örneğin, kullanıcı bir özelliğe erişimi engelledikten sonra, site bilgileri açılır listesini bilmesi gerekir. Bu listede izinleri sıfırlayabilir veya engellenen izinleri tekrar etkinleştirebilir. En kötü durumda, güncellenen ayar geçerli olana kadar sayfanın tamamen yeniden yüklenmesi gerekir. Siteler, kullanıcıların mevcut izin durumunu değiştirmesi için kolay bir kısayol sağlayamaz ve kullanıcılara ayarlarını nasıl değiştireceklerini aşağıdaki Google Haritalar ekran görüntüsünün en altında gösterildiği gibi ayrıntılı bir şekilde açıklamak zorunda kalır.

İzin, deneyim için önemliyse (ör. video konferans uygulaması için mikrofon erişimi) Google Meet gibi uygulamalar, kullanıcıya iznin nasıl engelleneceğini açıklayan rahatsız edici iletişim kutuları gösterir.

Bildirimsel bir <permission> öğesi

Chrome izinleri ekibi, bu yayında açıklanan sorunları gidermek için yeni bir HTML öğesi olan <permission> ile ilgili bir kaynak denemesi başlattı. Bu öğe, geliştiricilerin web sitelerinin kullanabildiği güçlü özelliklerin bir alt kümesini kullanmak için izin istemesine olanak tanır. En basit haliyle, aşağıdaki örnekte gösterildiği gibi kullanabilirsiniz:

<permission type="camera" />

<permission> öğesinin boş bir öğe olup olmaması gerektiği hâlâ aktif olarak tartışılmaktadır. Boş öğe, HTML'de kendi kendini kapatan ve alt düğümleri olamayan bir öğedir. Bu nedenle, HTML'de bitiş etiketi olmayabilir.

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ı stiline sahip 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çlanır. Bu nedenle doğrudan özelleştirilemez. Tarayıcı, metnin dilini dokümanın veya üst öğe zincirinin devralınan diline ya da isteğe bağlı bir lang özelliğine göre değiştirir. Bu sayede geliştiricilerin <permission> öğesini kendilerinin yerelleştirmesi gerekmez. <permission> öğesi, deneme aşamasının ötesine geçerse esnekliği artırmak için her izin türünde birkaç dize veya simge desteklenebilir. <permission> öğesini kullanmak istiyorsanız ve belirli bir dizeye veya simgeye ihtiyacınız varsa bize ulaşın.

Davranış

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

• Daha önce izin vermedikleri bir özelliği her ziyarette veya mevcut ziyaret için etkinleştirebilirler.

  

• Özelliğe daha önce izin vermişlerse izin vermeye devam edebilir veya izin vermeyi durdurabilirler.

  

• Daha önce bir özelliğe izin vermemişlerse bu özelliği yine devre dışı bırakabilir veya bu kez etkinleştirebilirler.

  

<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ğini belirtecek şekilde 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şmek için kullanılabilecek bir yüzey olarak kolayca tanımasını sağlamak amacıyla <permission> öğesinin stili kısıtlanmıştır. Stil kısıtlamaları kullanım alanınız için uygun değilse nasıl ve neden uygun olmadığını bize bildirirseniz çok seviniriz. Tüm stil ihtiyaçları karşılanamasa da, kaynak denemesinden sonra <permission> öğesinin daha fazla stilinin kullanılmasına izin verecek güvenli yollar bulmayı umuyoruz. Aşağıdaki tabloda, kısıtlamaların veya özel kuralların uygulandığı bazı özellikler ayrıntılı olarak açıklanmıştır. Kurallardan herhangi biri ihlal edilirse <permission> öğesi devre dışı bırakılır ve etkileşimde bulunulamaz. Bu öğeyle etkileşimde bulunma girişimleri, JavaScript ile yakalanabilen istisnalara neden olur. Hata mesajında, tespit edilen ihlalle ilgili daha fazla ayrıntı 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ülkler)
• 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 hariç)
• 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, eşdeğerleriyle aynı kurallar geçerli olmak üzere mantıksal olarak eşdeğer tüm özellikler kullanılabilir (ör. inline-size, width ile eşdeğerdir).

Sözde sınıflar

Duruma göre <permission> öğesini stilize etmeye olanak tanıyan iki özel sözde sınıf vardır:

• :granted: :granted sözde sınıfı, izin verildiğinde özel stil oluşturmaya olanak tanır.
• :invalid: :invalid sözde sınıfı, öğe geçersiz durumdayken (ör. kaynaklar arası bir iframe'de sunulduğunda) özel stil oluşturulmasına 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> öğesi, Permissions API ile birlikte kullanılmak üzere tasarlanmış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üğmesi tıklanarak veya istemin dışı tıklanarak) 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, izin durumunun değiştiği anlamına gelmez. Kullanıcı, mevcut durumu koruyan bir işlem yapmış olabilir (ör. izne izin vermeye devam etme).

• onvalidationstatuschange: Bu etkinlik, öğe "valid" durumundan "invalid" durumuna geçtiğinde tetiklenir. Kullanıcı tıkladığında tarayıcı sinyalin bütünlüğüne güvenirse öğe "valid", aksi takdirde (ör. öğe kısmen başka HTML içeriğiyle kapatıldığında) "invalid" olarak kabul edilir.

Bu etkinlikler için etkinlik dinleyicilerini doğrudan HTML kodunda (<permission type="…" onpromptdismiss="alert('The prompt was dismissed');" />) 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 göstermez. Bu, HTML kodunuzda <permission> öğesi varsa tarayıcı bunu bilmediği için hiçbir şey olmaz demektir. Örneğin, normal bir <button> tıklamasıyla tetiklenen bir izin istemi oluşturmak için JavaScript kullanarak desteği algılamaya devam etmek isteyebilirsiniz.

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

Kaynak denemesi

Sitenizdeki <permission> öğesini gerçek kullanıcılarla denemek için kaynağın 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'dan 131'e kadar (19 Şubat 2025) devam edecektir.

Demo

Demoyu inceleyin ve GitHub'daki kaynak koduna göz atın. Desteklenen bir tarayıcıdaki deneyimin ekran görüntüsünü burada bulabilirsiniz.

Geri bildirim

<permission> özelliğinin kullanım alanınızda nasıl çalıştığıyla ilgili görüşlerinizi öğrenmek isteriz. Depodaki sorunlardan birine yanıt verebilir veya yeni bir sorun kaydı oluşturabilirsiniz. <permission> öğesi için depodaki herkese açık sinyaller, bizim ve diğer tarayıcıların bu öğeyle ilgilendiğinizi anlamasını sağlar.

SSS

• Bu, İzinler API'si ile birlikte kullanılan normal bir <button>'den nasıl daha iyidir? <button> simgesinin tıklanması bir kullanıcı hareketi olsa da tarayıcılar, bunun izin isteme isteğiyle bağlantılı olduğunu doğrulayamaz. Kullanıcı bir <permission> tıklamışsa tarayıcı, tıklamanın izin isteğiyle ilgili olduğundan emin olabilir. Bu sayede tarayıcı, aksi takdirde çok daha riskli olacak akışları kolaylaştırabilir. Örneğin, kullanıcının bir iznin engellenmesini kolayca geri almasına izin verme.
• Diğer tarayıcılar <permission> öğesini desteklemiyorsa ne olur? <permission> öğesi, aşamalı geliştirme olarak kullanılabilir. Desteklenmeyen tarayıcılarda klasik izin akışı kullanılabilir. Örneğin, normal bir <button> tıklamasına dayalı olarak. İzinler ekibi de bir polyfill üzerinde çalışıyor. Hazır olduğunda bildirim almak için GitHub deposunda yıldız simgesini tıklayın.
• Bu konu diğer tarayıcı satıcılarıyla görüşüldü mü? <permission> öğesi, 2023'te W3C TPAC'de grup oturumunda etkin şekilde tartışıldı. Herkese açık oturum notlarını okuyabilirsiniz. Chrome Ekibi, her iki satıcıdan da resmi Standartlar Pozisyonları talep etti. İ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 gerçekten boş bir öğe olmalı mı? <permission> öğesinin boş bir öğe olup olmaması gerektiği hâlâ aktif olarak tartışılmaktadır. Geri bildiriminiz varsa soruna yorum yapın.

İlgili bağlantılar

• Açıklayıcı
• WebKit Standartları Konumu
• Mozilla Standards Position

Teşekkür

Bu belge Balázs Engedy, Thomas Nguyen, Penelope McLachlan, Marian Harbach, David Warren ve Rachel Andrew tarafından incelenmiştir.