Sayfanızın ve sayfanızdaki üçüncü taraf iframe'lerin tarayıcı özelliklerine nasıl erişeceğini yönetin.
Önceki adıyla Özellik Politikası olan İzin Politikası, geliştiricilerin bir sayfa, onun iframe'leri ve özellikleri tarafından kullanılabilen tarayıcı özelliklerini tarayıcının zorunlu kılması için bir dizi politika beyan ederek alt kaynaklar sağlar. Bu politikalar, yanıt başlığı kaynak listesinde sağlanan kaynaklara uygulanır. Kaynak listesi, aynı kökleri ve/veya çapraz kaynakları içerebilir ve Geliştiricinin tarayıcı özelliklerine birinci ve üçüncü taraf erişimini kontrol etmesini sağlama.
Daha güçlü özelliklere erişim izni verme konusunda son karar kullanıcıya aittir. Kullanıcının bir istem aracılığıyla açık bir izin vermesi gerekir.
İzin Politikası, üst düzey sitenin kendisinin ve üçüncü ortadan kaldırır ve kullanıcının bu karara varma yükünü geçerli olup olmadığını kontrol edin. Örneğin, İzin Politikası aracılığıyla tüm üçüncü taraflar için coğrafi konum özelliğini engelleme, Geliştirici, hiçbir üçüncü tarafın kullanıcının coğrafi konum.
İzin Politikası'ndaki Değişiklikler
İzin Politikası daha önce Özellik Politikası olarak biliniyordu. Temel kavramlar aynıdır ancak adla birlikte bazı önemli değişiklikler söz konusudur.
Yapılandırılmış Alanlar kullanımı
Yapılandırılmış Alanlar, HTTP üst bilgisi alan değerlerinin ayrıştırılmasını ve serileştirilmesini standart hale getirmek için bir dizi ortak veri yapısı sağlar. Fastly'nin "Yapılandırılmış başlık alanlarıyla HTTP'yi iyileştirme" başlıklı blog yayınından Yapılandırılmış Alanlar hakkında daha fazla bilgi edinebilirsiniz.
geolocation 'self' https://example.com; camera 'none'
Özellik Politikası'ndan önce.
geolocation=(self "https://example.com"), camera=()
Artık İzin Politikası ile.
Üstbilgileri iframe allow
özelliğiyle birleştirme
Özellik Politikası ile kaynağı başlık kaynak listesine veya iframe etiketine bir allow
özelliği ekleyerek çapraz kaynak çerçevesine ekleyebilirsiniz. İzin Politikası ile, kaynak listesine bir kaynaklar arası çerçeve eklerseniz bu kaynağın iframe etiketi allow
özelliğini içermelidir.
Yanıtta İzin Politikası başlığı yoksa kaynak listesinin varsayılan değeri *
olarak kabul edilir. iframe'e allow
özelliğinin eklenmesi özelliğe erişime olanak tanır.
Bu nedenle, geliştiricilerin yanıtta İzin Politikası başlığını açıkça belirlemelerini öneririz. Böylece, kaynak listesinde yer almayan kaynaklar arası iframe'lerin, allow
mevcut olsa bile bu özelliğe erişimi engellenir.
Özellik Politikası, Chrome 88'den sonra da kullanılabilir ancak İzin Politikası için takma ad görevi görür. Söz dizimi dışında mantık açısından herhangi bir fark yok. Hem İzin Politikası hem de Özellik Politikası başlıkları birlikte kullanılırsa Permissions-Policy
başlığı daha yüksek önceliğe sahip olur ve Feature-Policy
başlığı tarafından sağlanan değerin üzerine yazılır.
İzin Politikası'nı nasıl kullanabilirim?
Hızlı genel bakış
Konunun ayrıntılarına geçmeden önce, bir web sitesinin sahibi olduğunuz ve siteniz ile üçüncü taraf kodunun tarayıcı özelliklerini nasıl kullandığını kontrol etmek istediğiniz yaygın bir senaryoya hızlıca göz atalım.
- Siteniz
https://your-site.example
. - Siteniz aynı kaynaktan (
https://your-site.example
) bir iframe yerleştiriyor. - Siteniz, güvendiğiniz bir
https://trusted-site.example
sitesinden iframe yerleştiriyor. - Sitenizde
https://ad.example
tarafından sunulan reklamlar da gösteriliyor. - Coğrafi konuma reklam için değil, yalnızca siteniz ve güvenilen site için izin vermek istiyorsanız.
Bu durumda, aşağıdaki üstbilgiyi kullanın:
Permissions-Policy: geolocation=(self "https://trusted-site.example")
Ayrıca allow
özelliğini, güvenilir sitenin iframe etiketine açık bir şekilde ayarlayın:
<iframe src="https://trusted-site.example" allow="geolocation">
Bu örnekte, başlık kaynak listesi yalnızca sitenizin (self
) ve trusted-site.example
sitesinin coğrafi konum özelliğini kullanmasına izin veriyor. ad.example
uygulamasının coğrafi konum kullanmasına izin verilmiyor.
your-site.example
sitenizin, kullanıcının izniyle coğrafi konum özelliğini kullanmasına izin veriliyor.- Aynı kaynaklı iframe'in (
your-site.example
),allow
özelliği kullanılmadan bu özelliği kullanmasına izin verilir. - Kaynak listesine eklenmemiş, farklı bir alt alan adından (
subdomain.your-site-example
) sunulan ve iframe etiketinde "allow" özelliği ayarlanmış bir iframe'in özelliği kullanması engellendi. Farklı alt alan adları, aynı site ancak çapraz kaynak olarak kabul edilir. - Kaynak listesine eklenen ve iframe etiketinde
allow
özelliği ayarlanmış olan kaynaklar arası iframe'in (trusted-site.example
) özelliği kullanmasına izin veriliyor. - Kaynak listeye eklenen,
allow
özelliği olmadan kaynak listeye eklenen kaynaklar arası iframe'in (trusted-site.example
) özelliği kullanması engellendi. - Kaynak listeye eklenmemiş bir çapraz kaynak iframe'in (
ad.example
),allow
özelliği iframe etiketine dahil edilmiş olsa bile bu özelliği kullanması engellendi.
Permissions-Policy
HTTP yanıt başlığı
Permissions-Policy: <feature>=(<token>|<origin(s)>)
Bir özellik için izin verilen kaynakları ayarlamak üzere sunucudan gelen yanıtta Permissions-Policy
üstbilgisi kullanın. Başlık değeri, jetonların ve kaynak dizelerinin bir kombinasyonunu alabilir. Kullanılabilir jetonlar tüm kaynaklar için *
ve aynı kaynak için self
şeklindedir.
Başlığınız birden çok özellikle ilgiliyse özellikleri virgülle ayırın. Birden fazla kaynak listeliyorsanız kaynak listesindeki her kaynağı boşlukla ayırın. Kaynaklar arası istek olan bir kaynağın listelendiği başlıklar için iframe etiketi, allow
özelliğini içermelidir.
Aşağıda bazı anahtar/değer çiftleri verilmiştir:
- Sözdizimi:
[FEATURE]=*
- Politika tüm kaynaklara uygulandı
- Örnek:
geolocation=*
- Sözdizimi:
[FEATURE]=(self)
- Aynı kaynağa uygulanan politika
- Örnek:
geolocation=(self)
- Sözdizimi:
[FEATURE]=(self [ORIGIN(s)])
- Politika aynı kaynağa ve belirtilen kaynaklara uygulandı
- Örnek:
geolocation=(self "https://a.example" "https://b.example")
self
,https://your-site.example
ifadesinin kısaltmasıdır
- Sözdizimi:
[FEATURE]=([ORIGIN(s)])
- Politika aynı kaynağa ve belirtilen kaynaklara uygulandı
- Örnek:
geolocation=("https://your-site.example" "https://a.example" "https://b.example")
- Bu söz dizimini kullanırken kaynaklardan biri, yerleştiricinin kaynağı olmalıdır. Yerleştiren sayfanın kendisine izinler verilmediğinde, söz konusu sayfaya yerleştirilmiş iframe'ler kaynak listesine eklenmiş olsalar bile, İzin Politikası'na yetki verdiğinden engellenir.
self
jetonunu da kullanabilirsiniz.
- Sözdizimi:
[FEATURE]=()
- Özellik tüm kaynaklar için engellendi
- Örnek:
geolocation=()
Farklı alt alan adları ve yollar
https://your-site.example
ve https://subdomain.your-site.example
gibi farklı alt alan adları aynı site, ancak çapraz kaynak olarak kabul edilir. Dolayısıyla, kaynak listesine bir alt alan adı eklemek aynı sitenin başka bir alt alan adına erişime izin vermez. Özelliği kullanmak isteyen her yerleştirilmiş alt alan adı, kaynak listesine ayrı olarak eklenmelidir. Örneğin, kullanıcının göz attığı konulara yalnızca Permissions-Policy: browsing-topics=(self)
başlığıyla aynı kaynağa erişim izni veriliyorsa aynı sitenin farklı bir alt alanındaki (https://subdomain.your-site.example
) iframe, konulara erişemez.
https://your-site.example
ve https://your-site.example/embed
gibi farklı yollar aynı kaynak olarak kabul edilir ve farklı yolların kaynak listesinde listelenmesi gerekmez.
iFrame allow
özelliği
Kaynaklar arası kullanıma yönelik olarak, iframe'in özelliğe erişim elde etmek için etikette allow
özelliğine ihtiyacı vardır.
Sözdizimi: <iframe src="[ORIGIN]" allow="[FEATURE] <'src' | [ORIGIN(s)]"></iframe>
Örneğin:
<iframe src="https://trusted-site.example" allow="geolocation">
iframe'de gezinmeyi işleme
Varsayılan olarak, bir iframe başka bir kaynağa giderse politika, iframe'in gittiği kaynağa uygulanmaz. iFrame'in gittiği kaynağı allow
özelliğinde listelediğinizde, orijinal iframe'e uygulanan İzin Politikası, iframe'in gittiği kaynağa da uygulanır.
<iframe src="https://trusted-site.example" allow="geolocation https://trusted-site.example https://trusted-navigated-site.example">
iframe gezinme demosunu ziyaret ederek bu widget'ın nasıl çalıştığını görebilirsiniz.
Örnek İzin Politikası kurulumları
Aşağıdaki kurulum örneklerine demo bölümünden ulaşabilirsiniz.
Bu özelliğe tüm kaynaklarda izin veriliyor
Permissions-Policy: geolocation=*
<iframe src="https://trusted-site.example" allow="geolocation">
<iframe src="https://ad.example" allow="geolocation">
Kaynak listesi *
jetonu olarak ayarlandığında, kendisi ve tüm iframe'ler dahil olmak üzere sayfada bulunan tüm kaynaklar için bu özelliğe izin verilir. Bu örnekte, https://your-site.example
kaynağından sunulan tüm kodların yanı sıra https://trusted-site.example
iframe ve https://ad.example
'den sunulan kodlar, kullanıcının tarayıcısındaki coğrafi konum özelliğine erişebilir. allow özelliğinin, başlangıç noktasının başlık kaynak listesine eklenmesiyle birlikte iframe'in kendisinde de ayarlanması gerektiğini unutmayın.
Bu kurulumu demoda inceleyebilirsiniz.
Özelliğe yalnızca aynı kaynakta izin veriliyor
Permissions-Policy: geolocation=(self)
self
jetonunun kullanılması, yalnızca aynı kaynakta coğrafi konum kullanımına izin verir. Çapraz kaynaklar bu özelliğe erişemez. Bu örnekte, coğrafi konuma yalnızca https://trusted-site.example
(self
) erişimi olacaktır. Özelliği yalnızca kendi sayfanız için kullanmak istiyorsanız ve başka kimse için kullanmak istemiyorsanız bu söz dizimini kullanın.
Bu kurulumu demoda inceleyebilirsiniz.
Aynı kaynağa ve belirli çapraz kaynaklarda bu özelliğe izin veriliyor
Permissions-Policy: geolocation=(self "https://trusted-site.example")
Bu söz dizimi, hem kendine (https://your-site.example
) hem de https://trusted-site.example
için coğrafi konum kullanımına izin verir. allow özelliğini iframe etiketine açıkça eklemeyi unutmayın. <iframe src="https://ad.example" allow="geolocation">
içeren başka bir iframe varsa https://ad.example
coğrafi konum özelliğine erişemez. Yalnızca orijinal sayfa, kaynak listesinde yer alan https://trusted-site.example
ve iframe etiketinde allow özelliğine sahip kullanıcı özelliğine erişebilir.
Bu kurulumu demoda inceleyebilirsiniz.
Özellik tüm kaynaklarda engellendi
Permissions-Policy: geolocation=()
Kaynak listesi boşsa özellik tüm kaynaklar için engellenir. Bu kurulumu demoda inceleyebilirsiniz.
JavaScript API'yi kullanma
Özellik Politikası'nın mevcut JavaScript API'si, dokümanda veya öğede (document.featurePolicy or element.featurePolicy
) nesne olarak bulundu. İzinler için JavaScript API Politikası henüz uygulanmadı.
Feature Policy API, bazı sınırlamalarla birlikte İzin Politikası tarafından belirlenen politikalar için kullanılabilir. JavaScript API uygulamasıyla ilgili kalan sorular bulunmaktadır ve mantığı Permissions API'ye taşımak için bir teklif oluşturulmuştur. Düşünceleriniz varsa tartışmaya katılabilirler.
featurePolicy.allowsFeature(feature)
- Özelliğe varsayılan kaynak kullanımı için izin veriliyorsa
true
değerini döndürür. - Bu davranış, İzin Politikası ve önceki Özellik Politikası tarafından belirlenen her iki politika için de aynıdır
- Bir iframe öğesinde (
iframeEl.featurePolicy.allowsFeature('geolocation')
)allowsFeature()
çağrıldığında, döndürülen değer, allow özelliğinin iframe'de ayarlanıp ayarlanmadığını yansıtır.
featurePolicy.allowsFeature(özellik; kaynak)
- Belirtilen kaynak için özelliğe izin veriliyorsa
true
değerini döndürür. - Yöntem
document
üzerinde çağrılırsa, Özellik Politikası'nda olduğu gibi belirtilen kaynak için bu özelliğe izin verilip verilmediğini artık bildirmez. Artık bu yöntem size söz konusu özelliğin söz konusu kaynağa izin verilebileceğini belirtir. iframe'deallow
özelliğinin ayarlanıp ayarlanmadığını kontrol eden ek bir kontrol yapmanız gerekir. Geliştirici, bu özelliğe üçüncü taraf kaynakta izin verilip verilmediğini belirlemek üzere iframe öğesindekiallow
özelliğine yönelik bir ek kontrol yapmalıdır.
element
nesnesiyle iframe'de özellik olup olmadığını kontrol edin
allow özelliğini dikkate almayan document.allowsFeature(feature, origin)
özelliğinin aksine, allow özelliğini dikkate alan element.allowsFeature(feature)
kullanabilirsiniz.
const someIframeEl = document.getElementById('some-iframe')
const isCameraFeatureAllowed = someIframeEl.featurePolicy.allowsFeature('camera')
featurePolicy.allowedFeatures()
- Varsayılan kaynak kullanımı için izin verilen özelliklerin listesini döndürür.
- Davranış, İzin Politikası ve Özellik Politikası tarafından belirlenen her iki politika için de aynıdır
- İlişkilendirilmiş düğüm bir iframe olduğunda, allow özelliği dikkate alınır.
featurePolicy.features()
- Tarayıcıda kullanılabilen özelliklerin listesini döndürür.
- Davranış, İzin Politikası ve Özellik Politikası tarafından belirlenen her iki politika için de aynıdır
Chrome Geliştirici Araçları entegrasyonu
Geliştirici Araçları'nda izin politikasının işleyiş şekline göz atın.
- Chrome Geliştirici Araçları'nı açın.
- Her bir karede izin verilen özellikleri ve izin verilmeyen özellikleri kontrol etmek için Uygulama panelini açın.
- Kenar çubuğunda, incelemek istediğiniz kareyi seçin. Seçilen karenin kullanmasına izin verilen özelliklerin ve bu çerçevede engellenen özelliklerin listesi gösterilir.
Özellik Politikasından Taşıma
Şu anda Feature-Policy
üstbilgisini kullanıyorsanız İzin Politikası'na geçiş yapmak için aşağıdaki adımları uygulayabilirsiniz.
Özellik Politikası başlıklarını İzinler Politikası başlıklarıyla değiştirin
Özellik Politikası başlıkları yalnızca Chromium tabanlı tarayıcılarda desteklendiğinden ve Chrome 88 sürümünden itibaren İzin Politikası başlıkları desteklendiğinden, mevcut üstbilgileri İzin Politikası ile güncellemek güvenlidir.
Feature-Policy: autoplay *; geolocation 'self'; camera 'self' 'https://trusted-site.example'; fullscreen 'none';
Özellik Politikası'ndan önce.
Permissions-Policy: autoplay=*, geolocation=(self), camera=(self "https://trusted-site.example"), fullscreen=()
Artık İzin Politikası ile.
document.allowsFeature(feature, origin)
kullanımını güncelle
iframe'lerde izin verilen özellikleri kontrol etmek için document.allowsFeature(feature, origin)
yöntemini kullanıyorsanız iFrame öğesine ekli allowsFeature(feature)
yöntemini kullanın, kapsayıcı document
yöntemini kullanmayın. element.allowsFeature(feature)
yöntemi allow özelliğini dikkate alırken document.allowsFeature(feature, origin)
yöntemi kabul etmez.
document
ile özellik erişimi kontrol ediliyor
Temel düğüm olarak document
kullanmaya devam etmek istiyorsanız iframe etiketinde allow
özelliği için ek bir kontrol yapmanız gerekir.
<iframe id="some-iframe" src="https://example.com" allow="camera"></iframe>
Permissions-Policy: camera=(self "https://example.com")
const isCameraPolicySet = document.featurePolicy.allowsFeature('camera', 'https://example.com')
const someIframeEl = document.getElementById('some-iframe')
const hasCameraAttributeValue = someIframeEl.hasAttribute('allow')
&& someIframeEl.getAttribute('allow').includes('camera')
const isCameraFeatureAllowed = isCameraPolicySet && hasCameraAttributeValue
Mevcut kodu document
kullanarak güncellemek yerine, önceki örnekte olduğu gibi element
nesnesinde allowsFeature()
çağrısı yapmanız önerilir.
Reporting API
Reporting API, web uygulamaları için tutarlı bir şekilde bir bildirme mekanizması sağlar. İzinler Politikası ihlalleri için Reporting API, deneysel bir özellik olarak kullanılabilir.
Deneysel özelliği test etmek isterseniz adım adım açıklamalı kılavuzu takip edin ve chrome://flags/#enable-experimental-web-platform-features
ürününde bayrağı etkinleştirin. İşaret etkinleştirildikten sonra Geliştirici Araçları'ndaki Uygulama sekmesinde İzin Politikası ihlallerini gözlemleyebilirsiniz:
Aşağıdaki örnekte, Reporting API başlığının nasıl oluşturulabileceği gösterilmektedir:
Reporting-Endpoints: main-endpoint="https://reports.example/main", default="https://reports.example/default"
Content-Security-Policy: script-src 'self'; object-src 'none'; report-to main-endpoint;
Document-Policy: document-write=?0; report-to=main-endpoint;
Mevcut uygulamada, "varsayılan" adlı bir uç noktayı yapılandırarak söz konusu çerçevede gerçekleşen tüm ihlallerle ilgili politika ihlali raporları alabilirsiniz yukarıdaki örnek gibi. Alt çerçeveler için kendi raporlama yapılandırmaları gerekir.
Daha fazla bilgi
İzin Politikası hakkında daha ayrıntılı bilgi için aşağıdaki kaynaklara bakın: