Özet
Özellik Politikası, web geliştiricilerinin tarayıcıdaki belirli API'lerin ve web özelliklerinin davranışını seçerek etkinleştirmesine, devre dışı bırakmasına ve değiştirmesine olanak tanır. CSP'ye benzer ancak güvenliği kontrol etmek yerine özellikleri kontrol eder.
Özellik politikaları, geliştirici ile tarayıcı arasında yapılan küçük katılım anlaşmalarıdır ve yüksek kaliteli web uygulamaları oluşturma (ve sürdürme) hedeflerimizi destekleyebilir.
Giriş
Web için uygulama geliştirme zorlu bir maceradır. Performansı zirveye çıkaran ve güncel en iyi uygulamaların tümünü kullanan birinci sınıf bir web uygulaması oluşturmak yeterince zordur. Bu deneyimi zaman içinde mükemmel hale getirmek daha da zordur. Projeniz geliştikçe, geliştiriciler bunu yapar, yeni özellikler kullanıma sunulur ve kod tabanı genişler. Bir zamanlar elde ettiğiniz Harika Deneyim ÇB'si bozulmaya ve kullanıcı deneyimi kötü yönde etkilenmeye başlayabilir. Özellik Politikası, bunları takip etmenizi sağlamak üzere tasarlanmıştır.
Özellik Politikası ile, tarayıcının sitenizde kullanılan belirli özellikleri zorunlu kılması için bir dizi "politikayı" etkinleştirirsiniz. Bu politikalar, sitenin erişebileceği API'leri kısıtlar veya belirli özellikler için tarayıcının varsayılan davranışını değiştirir.
Aşağıda, Özellik Politikası ile yapabileceklerinize ilişkin örnekler yer almaktadır:
- Mobil ve üçüncü taraf videolarda
autoplay
varsayılan davranışını değiştirin. - Bir sitenin
camera
veyamicrophone
gibi hassas API'leri kullanmasını kısıtlayın. - iframe'lerin
fullscreen
API'yi kullanmasına izin ver. - Eşzamanlı XHR ve
document.write()
gibi güncel olmayan API'lerin kullanımını engelleyin. - Resimlerin uygun şekilde boyutlandırıldığından (ör. düzen karmaşasını önleyin) ve görüntü alanı için çok büyük olmadığından (ör. kullanıcının bant genişliğini boşa harcandığından) emin olun.
Politikalar, geliştirici ve tarayıcı arasında imzalanan bir sözleşmedir. Bu reklamlar, tarayıcıya geliştiricinin amacını bildirir ve böylece, uygulamamız rayından çıkmaya ve kötü bir şey yapmaya çalıştığında dürüst kalmamıza yardımcı olur. Site veya yerleştirilmiş üçüncü taraf içeriği, geliştiricinin önceden seçilmiş kurallarından herhangi birini ihlal etmeye çalışırsa tarayıcı, bu davranışı daha iyi bir kullanıcı deneyimiyle geçersiz kılar veya API'yi toplu olarak engeller.
Özellik Politikasını Kullanma
Özellik Politikası, özellikleri kontrol etmek için iki yol sağlar:
Feature-Policy
HTTP üst bilgisi aracılığıyla.- iframe'lerde
allow
özelliğiyle.
Feature-Policy
HTTP üstbilgisi
Özellik Politikası'nı kullanmanın en kolay yolu, bir sayfanın yanıtıyla birlikte Feature-Policy
HTTP üst bilgisini göndermektir. Bu başlığın değeri, tarayıcının belirli bir kaynak için uymasını istediğiniz bir politika veya politika grubudur.
Feature-Policy: <feature> <allow list origin(s)>
Kaynakların izin verilenler listesi birkaç farklı değer alabilir:
*
: Bu özelliğe, üst düzey göz atma bağlamlarında ve iç içe yerleştirilmiş tarama bağlamlarında (iframe'ler) izin verilir.'self'
: Bu özelliğe, üst düzey tarama bağlamlarında ve aynı kaynaklı iç içe yerleştirilmiş tarama bağlamlarında izin verilir. İç içe yerleştirilmiş tarama bağlamlarındaki kaynaklar arası dokümanlarda buna izin verilmez.'none'
: Bu özelliğe üst düzey göz atma bağlamlarında izin verilmez, iç içe yerleştirilmiş tarama bağlamlarında ise izin verilmez.<origin(s)>
: Politikanın etkinleştirileceği belirli kaynaklar (ör.https://example.com
).
Örnek
Diyelim ki siteniz genelinde tüm içeriğin
Coğrafi Konum API'sini kullanmasını engellemek istiyorsunuz. Bunu, geolocation
özelliği için 'none'
içeren katı bir izin verilenler listesi göndererek yapabilirsiniz:
Feature-Policy: geolocation 'none'
Bir kod parçası veya iframe Coğrafi Konum API'sini kullanmaya çalışırsa tarayıcı bunu engeller. Kullanıcı daha önce konumunu paylaşma izni vermiş olsa bile bu durum geçerlidir.
Diğer durumlarda bu politikanın biraz gevşetilmesi mantıklı olabilir. Kendi kaynağımızın Geolocation API'yi kullanmasına izin verebiliriz ancak izin verilenler listesinde 'self'
ayarını yaparak üçüncü taraf içeriklerin ona erişmesini engelleyebiliriz:
Feature-Policy: geolocation 'self'
iframe allow
özelliği
Özellik Politikası'nı kullanmanın ikinci yolu, iframe
içindeki içeriği kontrol etmektir. Yerleştirilmiş içeriğe yönelik bir politika listesi belirtmek için allow
özelliğini kullanın:
<!-- Allow all browsing contexts within this iframe to use fullscreen. -->
<iframe src="https://example.com..." allow="fullscreen"></iframe>
<!-- Equivalent to: -->
<iframe src="https://example.com..." allow="fullscreen *"></iframe>
<!-- Allow only iframe content on a particular origin to access the user's location. -->
<iframe
src="https://another-example.com/demos/..."
allow="geolocation https://another-example.com"
></iframe>
Mevcut iframe özellikleri için durum nedir?
Özellik Politikası tarafından kontrol edilen bazı özelliklerin davranışını kontrol eden mevcut bir özellik vardır. Örneğin <iframe allowfullscreen>
, iframe içeriğinin HTMLElement.requestFullscreen()
API'yi kullanmasına izin veren bir özelliktir. Payment Request API'ye ve getUserMedia()
'a izin vermek için sırasıyla allowpaymentrequest
ve allowusermedia
özellikleri de vardır.
Mümkün olduğunda bu eski özellikler yerine allow
özelliğini kullanmayı deneyin. Eşdeğer bir eski özellikle (ör.<iframe allowfullscreen allow="fullscreen">
) allow
özelliğini kullanarak geriye dönük uyumluluğu desteklemeniz gereken durumlarda hiçbir sorun yoktur (ör. <iframe allowfullscreen allow="fullscreen">
). Ancak daha kısıtlayıcı politikanın kazanacağını unutmayın. Örneğin, allow="fullscreen 'none'"
, allowfullscreen
değerinden daha kısıtlayıcı olduğundan aşağıdaki iframe'in tam ekrana girmesine izin verilmez:
<!-- Blocks fullscreen access if the browser supports feature policy. -->
<iframe allowfullscreen allow="fullscreen 'none'" src="..."></iframe>
Aynı anda birden çok politikayı denetleme
HTTP üst bilgisini, ;
ile ayrılmış bir politika yönergeleri listesiyle birlikte göndererek aynı anda birkaç özellik kontrol edilebilir:
Feature-Policy: unsized-media 'none'; geolocation 'self' https://example.com; camera *;
veya her politika için ayrı bir başlık gönderebilirsiniz:
Feature-Policy: unsized-media 'none'
Feature-Policy: geolocation 'self' https://example.com
Feature-Policy: camera *;
Bu örnek aşağıdaki işlemleri gerçekleştirir:
- Tüm göz atma bağlamlarında
unsized-media
kullanımına izin vermez. - Sayfanın kendi kaynağı ve
https://example.com
dışındaki tüm tarama bağlamlarındageolocation
kullanımına izin vermez. camera
uygulamasının tüm tarama bağlamlarına erişmesine izin verir.
Örnek - Bir iframe'de birden çok politika ayarlama
<!-- Blocks the iframe from using the camera and microphone
(if the browser supports feature policy). -->
<iframe allow="camera 'none'; microphone 'none'"></iframe>
JavaScript API
Chrome 60'ta iframe'lerde Feature-Policy
HTTP üst bilgisi ve allow
özelliği için destek eklenmişken JavaScript API Chrome 74'te eklenmiştir.
Bu API; istemci taraflı kodun bir sayfa, çerçeve veya tarayıcının hangi özelliklere izin verdiğini belirlemesine olanak tanır. Bu öğenin avantajlarına ana doküman için document.featurePolicy
bölümünden veya iframe'ler için frame.featurePolicy
bölümünden erişebilirsiniz.
Örnek
Aşağıdaki örnekte https://example.com
sitesinde Feature-Policy: geolocation 'self'
politikası göndermenin sonuçları gösterilmektedir:
/* @return {Array<string>} List of feature policies allowed by the page. */
document.featurePolicy.allowedFeatures();
// → ["geolocation", "midi", "camera", "usb", "autoplay",...]
/* @return {boolean} True if the page allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature('geolocation');
// → true
/* @return {boolean} True if the provided origin allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature(
'geolocation',
'https://another-example.com/'
);
// → false
/* @return {Array<string>} List of feature policies allowed by the browser
regardless of whether they are in force. */
document.featurePolicy.features();
// → ["geolocation", "midi", "camera", "usb", "autoplay",...]
/* @return {Array<string>} List of origins (used throughout the page) that are
allowed to use the 'geolocation' feature. */
document.featurePolicy.getAllowlistForFeature('geolocation');
// → ["https://example.com"]
Politika listesi
Peki hangi özellikler Özellik Politikası ile kontrol edilebilir?
Şu anda hangi politikaların uygulandığı ve bu politikaların nasıl kullanılacağı konusunda belge eksiktir. Ayrıca, farklı tarayıcılar bu özellikleri benimseyip çeşitli politikalar uyguladıkça liste de genişleyecektir. Özellik politikası sürekli değişen bir hedef olacak ve mutlaka iyi referans belgelere ihtiyaç duyacaksınız.
Şu an için, hangi özelliklerin kontrol edilebilir olduğunu görmenin birkaç yolu vardır.
- Demolardan oluşan Özellik Politikası Mutfak Havuzu'na göz atın. Blink'de uygulanan her politikaya ilişkin örnekleri burada bulabilirsiniz.
- Özellik adlarının listesi için Chrome'un kaynağını kontrol edin.
- Listeyi bulmak için
about:blank
üzerindedocument.featurePolicy.allowedFeatures()
sorgusunu sorgulayın:
["geolocation",
"midi",
"camera",
"usb",
"magnetometer",
"fullscreen",
"animations",
"payment",
"picture-in-picture",
"accelerometer",
"vr",
...
- Blink'te uygulanan veya değerlendirilmekte olan politikalar için chromestatus.com adresini kontrol edin.
Bu politikalardan bazılarını nasıl kullanacağınızı belirlemek için spesifikasyonun GitHub deposuna göz atın. Politikalardan bazılarıyla ilgili açıklayıcı bilgiler içerir.
SSS
Özellik Politikası'nı ne zaman kullanabilirim?
Tüm politikalar isteğe bağlıdır. Bu nedenle, Özellik Politikası'nı uygun zamanda/yerde kullanın. Örneğin, uygulamanız bir resim galerisiyse maximum-downscaling-image
politikası, mobil görüntü alanlarına devasa resimler göndermekten kaçınmanıza yardımcı olur.
document-write
ve sync-xhr
gibi diğer politikalar daha dikkatli kullanılmalıdır. Bunların etkinleştirilmesi, reklam gibi üçüncü taraf içeriklerin düzgün çalışmamasına neden olabilir. Diğer yandan, sayfalarınızın bu kötü amaçlı API'leri kullanmadığından emin olmak için Özellik Politikası'nı doğrudan kontrol edebilirsiniz.
Özellik Politikası'nı geliştirme veya üretimde mi kullanmalıyım?
Her ikisi de. Geliştirme sırasında politikaları etkinleştirmenizi ve üretim sırasında politikaları etkin tutmanızı öneririz. Geliştirme sırasında politikaları etkinleştirmek, doğru bir başlangıç yapmanıza yardımcı olabilir. Bu sayede beklenmedik regresyonları oluşmadan önce yakalayabilirsiniz. Kullanıcılara belirli bir kullanıcı deneyimi sunmak için üretim aşamasında politikaları açık tutun.
Politika ihlallerini sunucuma bildirmenin bir yolu var mı?
Reporting API çalışıyor. Sitelerin İGP ihlalleri veya kullanımdan kaldırma ile ilgili rapor almayı seçme şekline benzer şekilde, normalde kullanıma sunulan özellik politikası ihlalleri hakkında raporlar da alabilirsiniz.
iframe içeriği için devralma kuralları nelerdir?
Komut dosyaları (birinci taraf veya üçüncü taraf) göz atma bağlamlarının politikasını devralır. Diğer bir deyişle, üst düzey komut dosyaları ana dokümanın politikalarını devralır.
iframe
sayfaları, üst sayfalarının politikalarını devralır. iframe
öğesinde allow
özelliği varsa üst sayfa ile allow
listesi arasında daha katı olan politika kazanır. iframe
kullanımı hakkında daha fazla bilgi için iframe'lerde allow
özelliğine bakın.
Bir politikayı uyguladığımda bu politika sayfa gezinmelerinde geçerli olur mu?
Hayır. Bir politikanın kullanım ömrü, tek sayfada gezinme yanıtı içindir. Kullanıcı yeni bir sayfaya giderse politikanın uygulanabilmesi için Feature-Policy
üst bilgisi yeni yanıtta açıkça gönderilmelidir.
Hangi tarayıcılar Özellik Politikası'nı destekler?
Tarayıcı desteğiyle ilgili en son ayrıntılar için caniuse.com adresine bakın.
Şu anda özellik politikasını destekleyen tek tarayıcı Chrome'dur. Bununla birlikte, tüm API yüzeyi isteğe bağlı veya özellik algılanabilir olduğundan, Özellik Politikası progresif geliştirmelere uygundur.
Sonuç
Özellik Politikası, daha iyi bir kullanıcı deneyimi ve performans için iyi aydınlatılmış bir yol sunmanıza yardımcı olabilir. Bu özellik, uygulama geliştirirken veya sürdürürken özellikle faydalıdır. Çünkü bu sayede, kod tabanınıza sızmadan potansiyel tabancalardan kaçınmanıza yardımcı olabilir.
Ek kaynaklar:
- Özellik Politikası Açıklayıcısı
- Özellik Politikası spesifikasyonu
- Mutfak Lavabo Demoları
- Özellik Politikası Geliştirici Araçları Uzantısı - Bir sayfadaki özellik politikalarını denemek için test kullanıcısıdır.
- chromestatus.com girişleri