Özellik Politikasına Giriş

Ö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 veya microphone 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:

  1. Feature-Policy HTTP başlığı üzerinden.
  2. iframe'lerde allow özelliğiyle.

Ö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.

Belirlenen coğrafi konum politikasını ihlal etme
Belirlenen coğrafi konum politikasını ihlal ediyor.

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çin geolocation 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 ilgili document.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.

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: