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 birtakım zorluklarla birlikte gelir. Bu nedenle Chrome izinleri ekibi, yeni bir beyan yöntemi (özel bir HTML <permission> öğesi) denemektedir. 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 istemesi gerekir. Örneğin, Google Haritalar Geolocation API'yi kullanarak kullanıcının konumunu gerektirdiğinde tarayıcılar genellikle kullanıcıya 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, izin istemi ilk çağrıda otomatik olarak açılır.
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şime geçmeden önce bir izin istemi gösteriliyordu. 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ıda azaltıcı önlemler ve kullanıcı hareketi şartı
İzin spam'i, tarayıcı tedarikçilerinin izin istemi göstermeden önce bir düğme tıklaması veya klavye tuşuna basma gibi bir kullanıcı hareketi gerektirmesine yol açtı. Bu yaklaşımın sorunu, tarayıcının belirli bir kullanıcı hareketinin izin istemi gösterilip gösterilmeyeceğini belirlemesinin imkansız olmasa da çok zor olmasıdır. Kullanıcı, sayfanın yüklenmesi çok uzun sürdüğü için sayfayı tıklıyor olabilir veya gerçekten Beni bul düğmesini tıklıyor olabilir. Bazı web siteleri, kullanıcıları istemi tetiklemek için içerikleri tıklamaya yönlendirme konusunda da oldukça başarılı hale geldi.
İ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ğlama yerleştirme
Ö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, tarayıcının penceresinin alt kısmındaki bir düğmeyi tıkladıktan sonra pencerenin üst kısmındaki istemi kaçırması sık karşılaşılan bir durumdur. 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ın çıkmaza girmesi çok kolaydır. Ö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 haliyle, aşağıdaki örnekte gösterildiği 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 ve 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 zincirine ya da 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ı aşarsa esnekliği artırmak için her izin türü için çeşitli dize veya simgeler 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.
Özelliğe daha önce izin vermişse 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ğe 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 kullanabilecekleri bir yüzey olarak kolayca tanıyabilmesi için <permission> öğesinin stili kısıtlanmıştı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.
| Özellik | Kurallar |
|---|---|
|
Sırasıyla metin ve arka plan rengini ayarlamak için kullanılabilir. İki renk arasındaki kontrastın, metnin net bir şekilde okunabilmesi için yeterli olması gerekir (en az 3 kontrast oranı). Alfa kanalı 1 olmalıdır. |
|
small ve xxxlarge'e eşdeğer bir değerde ayarlanmalıdır. Aksi takdirde öğe devre dışı bırakılır. Yakınlaştırma, font-size hesaplanırken dikkate alınır. |
|
Negatif değerler 0 olarak düzeltilir. |
margin (tümü) |
Negatif değerler 0 olarak düzeltilir. |
|
200'ün altındaki değerler 200 olarak düzeltilir. |
|
normal ve italic dışındaki değerler normal olarak düzeltilir. |
|
0.5em'ün üzerindeki değerler 0.5em olarak düzeltilir. 0'ün altındaki değerler 0 olarak düzeltilir. |
|
inline-block ve none dışındaki değerler inline-block olarak düzeltilir. |
|
0.2em'ün üzerindeki değerler 0.2em olarak düzeltilir. -0.05em'ün altındaki değerler -0.05em olarak düzeltilir. |
|
Varsayılan değeri 1em olur. Sağlanırsa varsayılan değer ile sağlanan değerler arasındaki maksimum hesaplanmış değer dikkate alınır. |
|
Varsayılan değeri 3em olur. Sağlanırsa varsayılan değer ile sağlanan değerler arasında hesaplanan minimum değer dikkate alınır. |
|
Varsayılan değeri fit-content olur. Sağlanırsa varsayılan ve sağlanan değerler arasında hesaplanan maksimum değer dikkate alınır. |
|
Varsayılan değeri fit-content'ün üç katı olacaktır. Bu parametre sağlanırsa varsayılan değer ile sağlanan değer arasında hesaplanan minimum değer dikkate alınır. |
|
Yalnızca height, auto olarak ayarlandığında geçerli olur. Bu durumda, 1em'ten yüksek değerler 1em olarak düzeltilir ve padding-bottom, padding-top değerine ayarlanır. |
|
Yalnızca width, auto olarak ayarlandığında geçerli olur. Bu durumda, 5em'ten yüksek değerler 5em olarak düzeltilir ve padding-right, padding-left. değerine ayarlanır. |
|
Görsel efektlerin çarpıtılmasına izin verilmez. Şu anda yalnızca 2D çeviri ve orantılı yakınlaştırma kabul ediyoruz. |
Aşağıdaki CSS özellikleri normal şekilde kullanılabilir:
font-kerningfont-optical-sizingfont-stretchfont-synthesis-weightfont-synthesis-stylefont-synthesis-small-capsfont-feature-settingsforced-color-adjusttext-renderingalign-selfanchor-name aspect-ratioborder(ve tümborder-*mülkleri)clearcolor-schemecontaincontain-intrinsic-widthcontain-intrinsic-heightcontainer-namecontainer-typecounter-*flex-*floatheightisolationjustify-selfleftorderorphansoutline-*(outline-offsetiçin daha önce belirtilen istisna hariç)overflow-anchoroverscroll-behavior-*pagepositionposition-anchorcontent-visibilityrightscroll-margin-*scroll-padding-*text-spacing-trimtopvisibilityxyruby-positionuser-selectwidthwill-changez-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::grantedsözde sınıfı, izin verildiğinde özel stil oluşturmanıza olanak tanır.:invalid::invalidsözde sınıfı, öğe geçersiz bir 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 inceleyin ve GitHub'daki kaynak koda göz atın. Desteklenen bir tarayıcıda bu deneyimin ekran görüntüsünü burada bulabilirsiniz.
Geri bildirim
<permission>'ün kullanım alanınızda nasıl çalıştığını öğrenmekten memnuniyet duyarız. Depodaki sorunlardan birine yanıt verebilir veya yeni bir sorun kaydı oluşturabilirsiniz. <permission> öğesi için repo bulunan herkese açık sinyaller, bu öğeye ilgi duyduğunuzu bize ve diğer tarayıcılara bildirir.
SSS
- Bu, izinler API'siyle 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ının bir yolu yoktur. 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 iznin engellemesini kolayca geri almasına izin verebilirsiniz. - 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ına dayalı olarak. İzinler ekibi de bir polyfill üzerinde çalışıyor. Hazır olduğunda bilgilendirilmek için GitHub deposuna yıldız verin. - Bu konu diğer tarayıcı tedarikçileriyle 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 tedarikçiden de resmi standartlar görüşleri de istedi. İ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 boş bir öğe olup olmadığı hâlâ aktif olarak tartışılıyor. Geri bildiriminiz varsa konuyla ilgili yorumda bulunun.
İlgili bağlantılar
Teşekkür ederiz
Bu doküman, Balázs Engedy, Thomas Nguyen, Penelope McLachlan, Marian Harbach, David Warren ve Rachel Andrew tarafından incelendi.