Özet
Özellik Politikası; web geliştiricilerinin, tarayıcıdaki belirli API'lerin ve web özelliklerinin davranışını seçerek etkinleştirmelerine, devre dışı bırakmalarına ve değiştirmelerine olanak tanır. CSP'ye benzer ancak güvenliği kontrol etmek yerine özellikleri kontrol eder.
Özellik politikaları, geliştirici ve tarayıcı arasında yüksek kaliteli web uygulamaları oluşturma (ve sürdürme) hedeflerimize ulaşmamıza yardımcı olabilecek küçük sözleşmelerdir.
Giriş
Web için geliştirme, zorlu bir maceradır. Performansı artıran ve güncel en iyi uygulamaların tümünü kullanan birinci sınıf bir web uygulaması geliştirmek yeterince zordur. Bu deneyimin zamanla mükemmel olmasını sağlamak daha da zordur. Projeniz geliştikçe geliştiriciler devreye girer, yeni özellikler ortaya çıkar ve kod tabanı büyür. Daha önce ulaştığınız Mükemmel DeneyimTM kötüleşebilir ve kullanıcı deneyimi olumsuz yönde etkilenir. Özellik Politikası, her şeyin yolunda gitmesini sağlamak için 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 hangi API'lere erişebileceğini kısıtlar veya belirli özellikler için tarayıcının varsayılan davranışını değiştirir.
Özellik Politikası ile yapabileceklerinize dair bazı örnekler:
- Mobil ve üçüncü taraf videolarda
autoplay
etiketinin 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 eski API'lerin kullanımını engelleyin. - Resimlerin uygun şekilde boyutlandırıldığından (ör. düzenin bozulmasını önleyin) ve görüntü alanı için çok büyük olmadığından (ör. kullanıcının bant genişliğini israfa yol açmadığından) emin olun.
Politikalar, geliştirici ile tarayıcı arasında yapılan bir sözleşmedir. Tarayıcıyı geliştiricinin niyeti hakkında bilgilendirirler ve böylece uygulamamız rayından çıkmaya ve kötü bir şey yapmaya çalıştığında dürüst olmamıza yardımcı olur. Site veya yerleştirilmiş üçüncü taraf içerik, geliştiricinin önceden seçilmiş kurallarından herhangi birini ihlal etmeye çalışırsa tarayıcı bu davranışı daha iyi bir kullanıcı deneyimi ile geçersiz kılar veya API'yi tamamen engeller.
Özellik Politikası'nı kullanma
Özellik Politikası, özellikleri kontrol etmek için iki yol sunar:
Feature-Policy
HTTP başlığı üzerinden.- 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)>
Kaynak izin verilenler listesi birkaç farklı değer alabilir:
*
: Bu özelliğe, üst düzey tarama bağlamlarında ve iç içe göz atma bağlamlarında (iframe'ler) izin verilir.'self'
: Bu özelliğe, üst düzey tarama bağlamlarında ve aynı kaynak iç içe göz atma bağlamlarında izin verilir. İç içe tarama bağlamlarında kaynaklar arası belgelerde bu dosyaya izin verilmez.'none'
: Bu özelliğe, üst düzey tarama bağlamlarında ve iç içe göz atma bağlamlarında izin verilmez.<origin(s)>
: Politikanın etkinleştirileceği belirli kaynaklar (ör.https://example.com
).
Örnek
Sitenizde tüm içeriklerin Geolocation API'sini
kullanmasını engellemek istediğinizi varsayalım. geolocation
özelliği için katı bir 'none'
izin verilenler listesi göndererek bunu yapabilirsiniz:
Feature-Policy: geolocation 'none'
Bir kod parçası veya iframe Geolocation API'yi 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 politikayı biraz gevşetmek mantıklı olabilir. Kendi kaynağımızın Geolocation API'yi kullanmasına izin verebilir, ancak izin verilenler listesinde 'self'
politikasını ayarlayarak üçüncü taraf içeriklerinin buna 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çerikler için bir politika listesi belirtmek üzere 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 ne olacak?
Özellik Politikası tarafından kontrol edilen bazı özelliklerin davranışlarını kontrol eden mevcut bir özelliği vardır. Örneğin <iframe allowfullscreen>
, iframe içeriğinin HTMLElement.requestFullscreen()
API'yi kullanmasına izin veren bir özelliktir. Ayrıca Payment Request API'ye ve getUserMedia()
'ye izin vermek için sırasıyla allowpaymentrequest
ve allowusermedia
özellikleri de bulunur.
Mümkün olduğunda bu eski özellikler yerine allow
özelliğini kullanmayı deneyin. Eşdeğer eski bir özelliğe sahip allow
özelliğini kullanarak geriye dönük uyumluluğu desteklemeniz gereken durumlar için son derece uygundur (ör. <iframe allowfullscreen allow="fullscreen">
).
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ğu için 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 fazla politikayı kontrol etme
;
ile ayrılmış bir politika yönergeleri listesi ile HTTP üst bilgisi gönderilerek birçok özellik aynı anda kontrol edilebilir:
Feature-Policy: unsized-media 'none'; geolocation 'self' https://example.com; camera *;
veya her politika için ayrı bir başlık göndererek:
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ı için
unsized-media
kullanımına izin vermez. - Sayfanın kendi kaynağı ve
https://example.com
dışındaki tüm tarama bağlamları içingeolocation
kullanımına izin vermez. camera
uygulamasının tüm tarama bağlamlarına erişmesine izin verir.
Örnek: Bir iframe'de birden fazla 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'a iframe'lerde Feature-Policy
HTTP üst bilgisi ve allow
özelliği için destek, Chrome 74'te ise JavaScript API eklendi.
Bu API, istemci taraflı kodun bir sayfa, çerçeve veya tarayıcının hangi özelliklere izin verdiğini belirlemesini sağlar. Ana doküman için document.featurePolicy
, iframe'ler için frame.featurePolicy
altında öğelerin özelliklerine 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, Özellik Politikası aracılığıyla hangi özellikler kontrol edilebilir?
Şu anda, hangi politikaların uygulandığı ve bunların nasıl kullanılacağıyla ilgili bir belge yok. Liste, zaman içinde farklı tarayıcılar spesifikasyonu kabul ettikçe ve çeşitli politikalar uyguladıkça büyüyecektir. Özellik politikası sürekli geçiş yapan bir hedef olacak ve iyi referans belgelere kesinlikle ihtiyaç olacaktır.
Şimdilik hangi özelliklerin kontrol edilebilir olduğunu görmenin birkaç yolu vardır.
- Demoların yer aldığı Özellik Politikası Mutfak Lavabo'na göz atın. Bu rehberde, Blink'te uygulanan her politikaya örnekler verilmiştir.
- Özellik adlarının listesi için Chrome'un kaynağını kontrol edin.
- Listeyi bulmak için
about:blank
ile ilgilidocument.featurePolicy.allowedFeatures()
sorgusunu sorgulayın:
["geolocation",
"midi",
"camera",
"usb",
"magnetometer",
"fullscreen",
"animations",
"payment",
"picture-in-picture",
"accelerometer",
"vr",
...
- Uygulanan veya Blink'te değerlendirilmekte olan politikalar için chromestatus.com adresini kontrol edin.
Bu politikalardan bazılarının nasıl kullanılacağını belirlemek için özelliklerin GitHub deposuna göz atın. Bazı politikalar hakkında birkaç açıklama içerir.
SSS
Özellik Politikası'nı ne zaman kullanabilirim?
Tüm politikalar isteğe bağlıdır. Bu nedenle, Özellik Politikası'nı uygun olduğu zaman/yerlerde 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ı etkinleştirmek, reklam gibi üçüncü taraf içeriklerini bozabilir. Öte yandan, sayfalarınızın bu korkunç API'leri hiçbir zaman kullanmadığından emin olmak için Özellik Politikası bir içgüdü kontrolü olabilir!
Özellik Politikası'nı geliştirme veya üretim aşamasında kullanıyor muyum?
Her ikisi de. Politikaları geliştirme sırasında etkinleştirmenizi ve üretim sırasında etkin durumda tutmanızı öneririz. Geliştirme sırasında politikaları etkinleştirmek, doğru yolda ilerlemenize yardımcı olabilir. Beklenmedik regresyonları henüz gerçekleşmeden yakalamanıza yardımcı olur. Kullanıcılara belirli bir kullanıcı deneyimini garanti etmek için politikaları üretim sürümünde etkin tutun.
Politika ihlallerini sunucuma bildirmenin bir yolu var mı?
Bir Reporting API çalışıyor. Sitelerin İGP ihlalleri veya kullanımdan kaldırma ile ilgili raporları almayı etkinleştirme şekline benzer şekilde, kısa sürede özellik politikası ihlalleri hakkında raporlar alabilirsiniz.
iframe içeriği için devralma kuralları nelerdir?
Komut dosyaları (birinci veya üçüncü taraf), göz atma bağlamlarının politikasını devralır. Bu, üst düzey komut dosyalarının ana dokümanın politikalarını devraldığı anlamına gelir.
iframe
kullanıcıları kendi üst sayfalarının politikalarını devralır. iframe
, allow
özelliğine sahipse üst sayfa ile allow
listesi arasındaki daha katı politika kazanır. iframe
kullanımı hakkında daha fazla bilgi için iframe'lerdeki allow
özelliğine bakın.
Uyguladığım politika sayfa gezinmelerini etkiler mi?
Hayır. Bir politikanın kullanım ömrü tek bir sayfada gezinme yanıtı içindir. Kullanıcı yeni bir sayfaya giderse politikanın uygulanabilmesi için yeni yanıtta Feature-Policy
üstbilgisinin açıkça gönderilmesi gerekir.
Özellik Politikası'nı hangi tarayıcılar destekler?
Tarayıcı desteğiyle ilgili en son bilgiler için caniuse.com adresini ziyaret edin.
Şu anda Chrome, özellik politikasını destekleyen tek tarayıcıdır. Ancak API yüzeyinin tamamı etkinleştirilebildiği veya özellik algılanabilir olduğu için Özellik Politikası progresif geliştirmelere uygundur.
Sonuç
Özellik Politikası, daha iyi bir kullanıcı deneyimi ve iyi performans elde edebilmemiz için daha iyi aydınlatılmış bir yol sağlanmasına yardımcı olabilir. Potansiyel ayak tabancalarını kod tabanınıza gizlice girmeden kaçınmanıza yardımcı olabileceğinden, uygulama geliştirirken veya bakımını yaparken özellikle kullanışlıdır.
Ek kaynaklar:
- Özellik Politikası Açıklayıcısı
- Özellik Politikası spesifikasyonları
- Mutfak Lavabosu Demoları
- Özellik Politikası Geliştirici Araçları Uzantısı: Bir sayfadaki özellik politikalarını denemek için test kullanıcısı.
- chromestatus.com girişleri