Özellik Politikası ile Sitenizi Koruma

Son Chrome Geliştirici Zirvesi'nde vurgulanan web platformu özelliklerinden biri, "site yazarlarının çeşitli tarayıcı özelliklerinin ve API'lerinin kullanımını seçici olarak etkinleştirmesine ve devre dışı bırakmasına izin vermeyi" amaçlayan Özellik Politikası idi. Bu yazıda, bazı pratik örneklerle bunun web geliştiricileri için ne anlama geldiğine bir göz atacağım.

Google Developers sitesindeki giriş makalesinde Eric Bidelman, Özellik Politikasını şu şekilde açıklıyor:

"Özellik politikalarının kendisi, geliştirici ile tarayıcı arasında yüksek kaliteli web uygulamaları oluşturma (ve sürdürme) hedeflerimizi güçlendirmeye yardımcı olabilecek küçük katılım anlaşmalarıdır."

Spesifikasyon, Google'da Web Platformu İnkübatör Grubu etkinliğinin bir parçası olarak geliştirilmiştir. Özellik Politikasının amacı, web geliştiricileri olarak bizim için bir web platformu özelliği kullanımımızı tarayıcıya açıkça belirtebilmektir. Bunu yaparak, bu belirli özelliği kullanımımız veya kullanmamamız hakkında bir anlaşma yaparız. Buna dayanarak, tarayıcı belirli özellikleri engellemek için hareket edebilir veya görmeyi beklemediği bir özelliğin kullanıldığını bize bildirebilir.

Örnekler şunları içerebilir:

1. Bir iframe yerleştiriyorum ve gömülü sitenin ziyaretçimin kamerasına erişmesini istemiyorum;
2. Optimize edilmemiş görüntülerin CMS aracılığıyla siteme dağıtıldığı durumları yakalamak istiyorum;
3. Projem üzerinde çalışan birçok geliştirici var ve onların document.write gibi güncel olmayan API'leri kullanıp kullanmadıklarını bilmek istiyorum.

Tüm bunlar, Özellik Politikasının bir parçası olarak izlenebilir, engellenebilir veya rapor edilebilir.

Özellik Politikası Nasıl Kullanılır

Özellik İlkesi'ni kullanmak için tarayıcının iki şeyi bilmesi gerekir: hangi özellik için ilke oluşturduğunuz ve bu özelliğin nasıl ele alınmasını istediğiniz.

 Feature-Policy: <directive> <allowlist>

<directive> , ilkeyi ayarladığınız özelliğin adıdır.

Mevcut özellik listesi (Chrome Dev Summit'te verilen sunumdan alınmıştır) aşağıdaki gibidir:

• ivmeölçer
• ortam-ışık-sensörü
• otomatik oynatma
• kamera
• belge yazma
• şifreli medya
• Tam ekran
• coğrafi konum
• jiroskop
• düzen-animasyonlar
• tembel yük
• eski-görüntü-formatları
• manyetometre
• midi
• büyük boyutlu resimler
• Ödeme
• fotoğraf içinde fotoğraf
• konuşmacı
• senkronizasyon komut dosyası
• senkronizasyon-xhr
• optimize edilmemiş-görüntüler
• boyutsuz medya
• USB bağlantı
• dikey kaydırma
• sanal gerçeklik

<allowlist> , özelliğin nasıl kullanılabileceğini (eğer varsa) ayrıntılarıyla anlatır ve aşağıdaki değerlerden bir veya daha fazlasını alır.

• *
  Bu belgede ve bu alandan veya başka bir yerden herhangi bir iframe'de özelliğe izin verileceğini belirten en liberal politika. Örneğin, her şeyi etkinleştirmenin ve ayrıca bir alan listesinden geçmenin bir anlamı olmadığı için yalnızca tek bir değer olarak kullanılabilir.
• self
  Bu özellik, belgede ve tüm iframe'lerde kullanılabilir olacaktır, ancak iframe'lerin aynı kökene sahip olması gerekir.
• src
  Yalnızca bir iframe allow özelliği kullanıldığında geçerlidir. Bu, içine yüklenen belge iframe'in src özelliğindeki URL ile aynı Köken'den geldiği sürece bir özelliğe izin verir.
• none
  Belge ve tüm iç içe iframe'ler için özelliği devre dışı bırakır. Yalnızca tek bir değer olarak kullanılabilir.
• <origin(s)>
  Özelliğe belirli kaynaklar için izin verilir; bu, özelliğe izin verilen bir alan listesi belirtebileceğiniz anlamına gelir. Alanların listesi boşlukla ayrılmıştır.

Sitenizde özellik politikalarını etkinleştirebileceğiniz iki yöntem vardır: Bir HTTP Üstbilgisi gönderebilir veya bir iframe'de allow niteliğini kullanabilirsiniz.

HTTP Başlığı

Bir HTTP Üstbilgisi göndermek, o üstbilgiyi ayarlayan sayfa veya sitenin tamamı ve ayrıca siteye katıştırılmış herhangi bir şey için bir özellik ilkesini etkinleştirebileceğiniz anlamına gelir. Web sunucusunda tüm siteniz için başlıklar ayarlanabilir veya uygulamanızdan gönderilebilir.

Örneğin, coğrafi konum API'sinin kullanımını engellemek isteseydim ve NGINX web sunucusunu kullanıyor olsaydım, sitemdeki herhangi bir belgeyi ve herhangi bir belgeyi engelleyen aşağıdaki başlığı eklemek için NGINX'te sitemin yapılandırma dosyalarını düzenleyebilirdim. coğrafi konum API'sini kullanarak yerleşik iframe.

 add_header Feature-Policy "geolocation none;";

Tek bir başlıkta birden çok politika ayarlanabilir. Coğrafi konumu ve titreşimi önlemek, ancak example.com etki alanından unsized-media izin vermek için aşağıdakileri ayarlayabilirim:

 add_header Feature-Policy "vibrate none; geolocation none; unsized-media https://example.com;";

iFrame'lerde allow verilen Nitelik

Öncelikle bir iframe içindeki içeriğe ne olduğuyla ilgileniyorsak, iframe'in kendisinde Özellik Politikasını kullanabiliriz; bu, Chrome ve Safari bu kullanımı destekleyen yazı yazarken biraz daha iyi tarayıcı desteğinden yararlanır.

Bir siteyi gömüyorsam ve o sitenin coğrafi konum, kamera veya mikrofon API'lerini kullanmasını istemiyorsam, iframe'im aşağıdaki örneğe benzer:

 <iframe allow="geolocation 'none'; camera 'none'; microphone 'none'">

iframe'lerin allowfullscreen , allowpaymentrequest ve allowusermedia içeriğini denetleyen ayrı öznitelikleri zaten biliyor olabilirsiniz. Bunlar, Özellik Politikası allow özniteliği ile değiştirilebilir ve tarayıcı uyumluluğu nedeniyle her ikisini de bir iframe'de kullanabilirsiniz. Her iki özelliği de kullanırsanız, en kısıtlayıcı olan geçerli olacaktır. Google makalesi, allowfullscreen kullanan bir iframe örneğini gösterir; yani, iframe'in tam ekrana girmesine izin verilir, ancak ardından, fullscreen none ile çelişen bir Özellik Politikası. Bu çakışmalar, dolayısıyla en kısıtlayıcı politika kazanır ve bu iframe'in tam ekrana girmesine izin verilmez.

 <iframe allowfullscreen allow="fullscreen 'none'" src="...">

iframe öğesinin ayrıca birçok özellik için desteği yönetmek üzere tasarlanmış bir sandbox özelliği vardır. Bu özellik ayrıca, tüm korumalı alan özelliklerini devre dışı bırakan ve daha sonra seçime bağlı olarak yeniden etkinleştirilebilen bir sandbox değeriyle İçerik Güvenliği İlkesi'ne eklenmiştir. Korumalı alan özellikleri ile Özellik İlkesi tarafından kontrol edilenler arasında bir miktar geçiş vardır ve Özellik İlkesi, halihazırda korumalı alan tarafından kapsanan bu değerleri çoğaltmaya çalışmaz. Bununla birlikte, her şeyi büyük bir politika seti olarak küresel olarak kapatmak yerine, bu politikaları yönetmek için daha ince taneli bir yaklaşım benimseyerek korumalı alanın bazı sınırlamalarını ele alıyor.

Özellik Politikası ve Raporlama API'si

Özellik Politikası ihlalleri, Raporlama API'si aracılığıyla bildirilebilir; bu, sitenizde özellik kullanımını izleyen kapsamlı bir politika seti geliştirebileceğiniz anlamına gelir. Bu, kullanıcılarınız için tamamen şeffaf olacaktır, ancak size özelliklerin nasıl kullanıldığı hakkında büyük miktarda bilgi verecektir.

Özellik Politikası için Tarayıcı Desteği

Şu anda, Özellik Politikası için tarayıcı desteği Chrome ile sınırlıdır, ancak çoğu durumda, Özellik Politikası'nı geliştirme sırasında ve siteleri önizlerken kullandığınızda bu mutlaka bir sorun değildir.

Aşağıda ana hatlarıyla anlatacağım kullanım durumlarının çoğu, tarayıcıları desteksiz kullanan site ziyaretçilerine herhangi bir etkide bulunmadan şu anda kullanılabilir.

Özellik Politikası Ne Zaman Kullanılır?

Siteyi geliştirirken alınan kararları yedeklemeye yardımcı olması için Özellik Politikasını kullanabilme fikrini gerçekten seviyorum. Performans bütçesi gibi belgelerde veya GDPR denetiminin bir parçası olarak iyi bir şekilde yazılabilen, ancak daha sonra sitenin ömrü boyunca korumamız gereken bir şey haline gelen kararlar. Bir sitede birden fazla kişi çalıştığında bu her zaman kolay değildir; belki de bu ilk karar verme sürecine dahil olmayan veya sadece gereksinimlerin farkında olmayan kişiler. Sitemizi bir şekilde etkilemeyi başaran üçüncü şahıslar hakkında çok düşünüyoruz, ancak bazen sitelerimizin kendimizden korunmaya ihtiyacı var!

Üçüncü Taraflara Göz Atma

iframe'de allow özniteliğiyle bir özellik ilkesi kullanarak üçüncü taraf bir sitenin kameraya veya mikrofona erişmesini engelleyebilirsiniz. Bu siteyi gömme nedeninin bu özelliklerle hiçbir ilgisi yoksa, bunları devre dışı bırakmak, sitenin hiçbir zaman bunları istemeye başlayamayacağı anlamına gelir. Bu, daha sonra GDPR uyumluluğunu sağlamaya yönelik süreçlerinizle ilişkilendirilebilir. Sitenizin gizlilik etkisini denetlerken, özellik politikası yoluyla üçüncü tarafların erişimini kilitlemek için süreçler oluşturabilirsiniz; bu da size ve ziyaretçilerinize ek güvenlik ve gönül rahatlığı sağlar.

Bu kullanım, kullanımı engellemek için Özellik İlkesi için tarayıcı desteğine dayanır. Ancak, üçüncü taraf yapacaklarını değiştirirse, bu API'lerin kullanımı hakkında sizi bilgilendirmek için Özellik Politikası raporlama modunu kullanabilirsiniz. Bu size çok hızlı bir uyarı sağlar - esasen Chrome'u kullanan ilk kişi siteye girer girmez.

Seçici Olarak Etkinleştirme Özellikleri

Normalde engellenen bazı özellikleri seçici olarak etkinleştirmek de isteyebiliriz. Belki de tarayıcıdaki coğrafi konum özelliğini kullanmak için başka bir siteden iframe yükleme içeriğine izin vermek istiyoruz. Chrome varsayılan olarak bunu engeller, ancak güvenilir bir siteden içerik yüklüyorsanız, Özellik Politikası'nı kullanarak kaynaklar arası isteği etkinleştirebilirsiniz. Bu, kontrolünüz altındaki başka bir etki alanından içerik yüklerken özellikleri güvenle açabileceğiniz anlamına gelir.

Eski API'lerin Kullanımının ve Düşük Performanslı Özelliklerin Yakalanması

Özellik İlkesi, yalnızca rapor modunda çalıştırılabilir. Daha sonra belirli özelliklerin kullanımını izleyebilir ve sitede bulunduklarında size haber verebilir. Bu, birçok senaryoda faydalı olabilir. Çok sayıda eski kod içeren çok büyük bir siteniz varsa, Özellik Politikasını etkinleştirmek, dikkat edilmesi gereken yerleri izlemenize yardımcı olur. Büyük bir ekiple çalışıyorsanız (özellikle geliştiriciler genellikle bazı üçüncü taraf kod kitaplıklarını çekiyorsa), Özellik Politikası sitede görmemeyi tercih ettiğiniz şeyleri yakalayabilir.

Kötü Optimize Edilmiş Görüntülerle Başa Çıkma

Özellik Politikası hakkında gördüğüm makalelerin çoğu güvenlik ve gizlilik yönlerine odaklanırken, teknik ve teknik olmayan kullanıcılar tarafından oluşturulan çok sayıda içerikle ilgilenen biri olarak görüntü optimizasyonu ile ilgili özellikler gerçekten beni etkiledi. Özellik Politikası, ziyaretçiler tarafından aşırı büyük veya optimize edilmemiş resimlerin indirilmesini önleyerek kullanıcı deneyiminin yanı sıra sitenizin performansını korumaya yardımcı olmak için kullanılabilir.

İdeal bir dünyada, CMS'niz, görüntülerin makul bir şekilde yeniden boyutlandırılmasını, web için optimize edilmesini ve görüntülenecekleri bağlam için optimize edilmesini sağlayarak görüntü yönetimiyle ilgilenir. Ancak, gerçek hayat nadiren bu ideal dünyadır ve bu nedenle bazen yeniden boyutlandırma işidir. ve görselleri optimize etmek, web'e çok büyük görseller yüklememelerini sağlamak için içerik editörlerine bırakılmıştır. Bu, özellikle üzerinde içerik yönetimi katmanı olmayan statik bir CMS kullanıyorsanız bir sorundur. Teknik bir kişi olarak bile, bir klasöre yerleştirdiğiniz dev ekran görüntüsünü veya kamera görüntüsünü yer tutucu olarak yeniden boyutlandırmayı unutmak çok kolaydır.

Şu anda Chrome'da bir bayrağın arkasında yardımcı olabilecek özellikler var. Bu özelliklerin arkasındaki fikir, sorunlu görüntüleri vurgulayarak siteyi tamamen bozmadan düzeltilebilmelerini sağlamaktır.

unsized-media özelliği ilkesi, HTML veya CSS'de bir boyut ayarı olmayan resimleri veya videoları arar. Boyutlandırılmamış bir medya öğesi yüklendiğinde, sayfadaki içeriğin yeniden akmasına neden olabilir.

Siteye boyutlandırılmamış medya eklenmesini önlemek için aşağıdaki başlığı ayarlayın. Medya daha sonra varsayılan 300×150 piksel boyutunda görüntülenecektir. Sitenizin küçük medyalarla yüklendiğini görecek ve çözmeniz gereken bir sorununuz olduğunu anlayacaksınız.

 Feature-Policy: unsized-media 'none'

Bir demoya bakın (Deneysel Web Platformu Özelliklerinin açık olduğu Chrome Canary gerekir).

Büyük oversized-images , görüntülerin kapsayıcılarından çok büyük olmadığını görmek için ilke denetimlerini içerir. Varsa, bunun yerine bir yer tutucu gösterilir. Bu politika, mobil kullanıcılarınıza çok büyük masaüstü görüntüleri göndermediğinizi kontrol etmek için inanılmaz derecede kullanışlıdır.

 Feature-Policy: oversized-images 'none'

Bir demoya bakın (Deneysel Web Platformu Özelliklerinin açık olduğu Chrome Canary gerekir).

unoptimized-images özellik ilkesi, görüntülerin bayt cinsinden veri boyutunun piksel cinsinden oluşturma alanından 0,5 kat daha büyük olup olmadığını kontrol eder. Bu politika etkinleştirilirse ve resimler bunu ihlal ederse, resim yerine bir yer tutucu gösterilir.

 Feature-Policy: unoptimized-images 'none'

Bir demoya bakın (Deneysel Web Platformu Özelliklerinin açık olduğu Chrome Canary gerekir).

Özellik Politikasının Test Edilmesi ve Raporlanması

Chrome DevTools, belirli özelliklerin bir Özellik Politikası tarafından engellendiğini veya etkinleştirildiğini size bildirmek için bir mesaj görüntüler. Sitenizde Özellik Politikasını etkinleştirdiyseniz, bunun çalışıp çalışmadığını kontrol edebilirsiniz.

Güvenlik Başlıkları sitesine Özellik Politikası desteği de eklenmiştir; bu, sitenizdeki veya web'deki diğer sitelerdeki İçerik Güvenliği Politikası gibi başlıklarla birlikte bunları kontrol edebileceğiniz anlamına gelir.

Farklı Özellik Politikalarını açıp kapatmanıza izin veren bir Chrome DevTools Uzantısı vardır (herhangi bir üstbilgi yapılandırmanıza gerek kalmadan sayfalarınızı kontrol etmenin harika bir yolu).

Özellik Politikalarınızı Raporlama API'si ile entegre etmek istiyorsanız, bunun nasıl yapılacağına ilişkin daha fazla bilgiyi burada bulabilirsiniz.

Daha Fazla Okuma ve Kaynaklar

Birçoğunu bu makaleyi araştırırken kullandığım bir dizi kaynak buldum. Bunlar, Özellik Politikasını kendi uygulamalarınızda uygulamaya başlamak için ihtiyacınız olan her şeyi size vermelidir. Halihazırda İçerik Güvenliği Politikası kullanıyorsanız, bu, sitenizi kullanan kişilerin güvenliğini ve gizliliğini sağlamaya yardımcı olmak için sitenizin tarayıcıyla çalışma şeklini kontrol etmeye yönelik ek bir mantıklı adım gibi görünüyor. Zaman içinde sitenize eklenen performansa zarar veren öğelerden haberdar olmanıza yardımcı olmak için Özellik Politikasını kullanabilme avantajına sahipsiniz.

• Özellik Politikası Belirtimi
• Özellik Politikası ile tanışın
• Chrome Geliştirici Zirvesi'nden görünüm
• MDN'de Özellik Politikası
• Özellik Politikasını Kullanabilir miyim
• Özellik Politikası Demoları
• Nginx'te Feature-Policy, Referrer-Policy ve Content Security Policy başlıklarını ayarlayın