Özellik Politikasına Giriş

Eric Bidelman

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

  1. Feature-Policy HTTP üst bilgisi aracılığıyla.
  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)>

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.

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

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ında 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 ç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 üzerinde document.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.

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: