Özellik Politikasına Giriş

Özet

Özellik Politikası, web geliştiricilerinin istedikleri zaman etkinleştirme, devre dışı bırakma ve Tarayıcıdaki belirli API'lerin ve web özelliklerinin davranışını değiştirebilir. CSP (ancak güvenliği kontrol etmek yerine) kontrol eder.

Özellik politikaları, geliştiricinin kendi aralarında küçük seçim yüksek düzeyde oluşturma (ve sürdürme) hedeflerimizi desteklemeye yardımcı olan bir tarayıcı kaliteli web uygulamaları.

Giriş

Web için geliştirme, zorlu bir maceradır. Birinci sınıf bir iş modeli oluşturmak yeterince zor performansı gösteren ve güncel en iyi uygulamaların tümünü kullanan bir web uygulamasıdır. Hatta sürdürmenin başka yolları da var. Projeniz ilerledikçe, geliştiriciler programa dahil olur, yeni özellikler açılır ve kod tabanı büyür. O Bir zamanlar elde ettiğiniz Great Experience TM ile birlikte bozulmaya başlayabilir ve kullanıcı deneyiminizi olumsuz yönde etkileyebilirsiniz. acı çekmeye başlar! Özellik Politikası, her şeyin yolunda gitmesini sağlamak için tasarlanmıştır.

Özellik Politikası ile tarayıcının aşağıdakileri yapması için bir dizi "politikayı" etkinleştirirsiniz. sitenizde kullanılan belirli özelliklerde zorunlu kılın. Bu politikalar sitenin hangi API'lere erişebileceği veya tarayıcının varsayılan davranışını değiştirebileceği bazı özellikler.

Özellik Politikası ile yapabileceklerinize dair bazı örnekler:

  • Varsayılan davranışı değiştirin autoplay oranında mobil ve üçüncü taraf video.
  • 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 (ör. kullanıcının bant genişliğinin israf edilmesi).

Politikalar, geliştirici ile tarayıcı arasında yapılan bir sözleşmedir. Bu durum amacının ne olduğunu daha iyi anlamamızı sağlayacak ve böylece, Uygulamamız rayından çıkıp kötü bir şey yapmaya çalışıyor. Site veya yerleştirilmiş Geliştiricinin önceden seçtiği içeriklerden herhangi birini ihlal etmeye çalışan üçüncü taraf içerikleri kuralları belirlendiğinde tarayıcı, daha iyi bir kullanıcı deneyimi sunan davranışı geçersiz kılar veya API'yi engeller. Hepsini.

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

Özellik Politikası'nı kullanmanın en kolay yolu, Feature-Policy HTTP başlığını veya sonraki sürümleri içerir. Bu başlığın değeri bir politika veya grup tarayıcının belirli bir kaynak için uymasını istediğiniz politikaların tümünü içerir:

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 yerleştirilmiş bağlamlarda izin verilir bağlamları (iframe) kullanabilirsiniz.
  • 'self': Bu özelliğe üst düzey tarama bağlamlarında izin verilir ve aynı kaynaktan iç içe yerleştirilmiş göz atma bağlamları. Kaynaklar arası olarak izin verilmiyor göz atma bağlamlarında kullanabilirsiniz.
  • 'none': Bu özelliğe üst düzey tarama bağlamlarında izin verilmez ve iç içe geçmiş tarama bağlamlarında izin verilmez.
  • <origin(s)>: Politikanın etkinleştirileceği belirli kaynaklar (ör. https://example.com).

Örnek

Tüm içeriklerin coğrafi konum API'sini kullanabilirsiniz. Bunu, katı kurallı bir geolocation özelliği için 'none' izin verilenler listesi:

Feature-Policy: geolocation 'none'

Bir kod parçası veya iframe Coğrafi Konum API'sini kullanmaya çalışırsa tarayıcı tarafından engellenir. Bu durum, kullanıcı daha önce izin verebilmesidir.

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. YouTube'da coğrafi konum API'sini kullanmak için kendi kaynağımızı, ancak üçüncü taraf içeriklerinin izin verilenler listesinde 'self' iznini ayarlayarak ona erişebilirsiniz:

Feature-Policy: geolocation 'self'

iframe allow özelliği

Özellik Politikası'nı kullanmanın ikinci yolu, iframe. Şunlar için bir politika listesi belirtmek üzere allow özelliğini kullanın: yerleştirilmiş içerik:

<!-- 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 özelliklerin bazılarında mevcut bir özelliğini kullanın. Örneğin, <iframe allowfullscreen> iframe içeriğinin HTMLElement.requestFullscreen() API'sı. Ayrıca allowpaymentrequest ve şunlara izin vermek için allowusermedia özellikleri: Payment Request API ve getUserMedia(), tıklayın.

Bu eski özellikler yerine allow özelliğini kullanmayı deneyin özelliklerini ekleyebilirsiniz. Geriye dönük destek gerektiren durumlar için allow özelliğini, eşdeğer bir eski özellikle birlikte kullanarak uyumluluk son derece iyi (ör. <iframe allowfullscreen allow="fullscreen">). Ancak daha kısıtlayıcı olan politikanın geçerli olduğunu unutmayın. Örneğin, iframe'in tam ekrana girmesine izin verilmeyecek, çünkü allow="fullscreen 'none'", allowfullscreen varyantından daha kısıtlayıcı:

<!-- Blocks fullscreen access if the browser supports feature policy. -->
<iframe allowfullscreen allow="fullscreen 'none'" src="..."></iframe>

Aynı anda birden fazla politikayı kontrol etme

HTTP üstbilgisi göndererek aynı anda birçok özellik kontrol edilebilir. ; ile ayrılmış bir politika yönergeleri listesi ile:

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.
  • Aşağıdaki hariç tüm tarama bağlamlarında geolocation kullanımına izin vermez: sayfanızın kendi kaynağı ve https://example.com.
  • 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'ta Feature-Policy HTTP üst bilgisi ve iframe'lerdeki allow özelliği için JavaScript API, Chrome 74'te eklendi.

Bu API, istemci tarafı kodun hangi özelliklere izin verileceğini belirlemesini sağlar. veya tarayıcıya uygun olabilir. Avantajlara şuradan erişebilirsiniz: Ana doküman için document.featurePolicy veya frame.featurePolicy iframe'ler.

Örnek

Aşağıdaki örnekte, https://example.com sitesindeki Feature-Policy: geolocation 'self':

/* @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ığına dair yeterli sayıda belge yok fikir edinmiş oldunuz. Liste, zaman içinde farklı tarayıcılar tarafından ve çeşitli politikalar uygulamaktır. Özellik politikasının ihlaline neden olacak hedef ve iyi referans belgelere 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. Örnekler var her politika hakkında daha fazla bilgi edinin.
  • Chrome'un kaynağını kontrol edin. sayfasına bakın.
  • 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",
        ...
  • Politikalardaki politikaları görmek için chromestatus.com'u kontrol edin: göz atılıyor.

Bu politikalardan bazılarının nasıl kullanılacağını belirlemek için özelliklerin GitHub deposu'na bakabilirsiniz. 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, Örneğin, uygulamanız bir resim galerisiyse maximum-downscaling-image büyük boyutlu resimlerin mobil görüntü alanlarına gönderilmesini önlemenize yardımcı olur.

document-write ve sync-xhr gibi diğer politikalar daha fazla özellikle kullanılmalıdır özen gösteriyoruz. Bunları etkinleştirmek, reklam gibi üçüncü taraf içeriklerini bozabilir. Öte yandan, Özellik Politikası testler aracılığıyla sayfalarınızın bu korkunç API'leri asla kullanmaz.

Özellik Politikası'nı geliştirme veya üretim aşamasında kullanıyor muyum?

Her ikisi de. Geliştirme sırasında politikaları etkinleştirmenizi ve politikalar üretim sırasında etkin olmalıdır. Geliştirme sırasında politikaları etkinleştirmek doğru yoldan başlamanıza yardımcı olur. Beklenmedik fikirlerle karşılaşmanıza Bunlar gerçekleşmeden önce regresyonlar hakkında bilgi edinir. Politikaları üretimde açık tut kullanıcılara belirli bir kullanıcı deneyimini garantilemenizi sağlar.

Politika ihlallerini sunucuma bildirmenin bir yolu var mı?

Reporting API çalışıyor! Sitelerin, aşağıdakilerle ilgili raporlar almayı tercih etmek için kullandıkları yönteme benzer: CSP ihlalleri veya kullanımdan kaldırma, özellik politikası ihlalleriyle ilgili raporlar alabilmeleri gerekir.

iframe içeriği için devralma kuralları nelerdir?

Komut dosyaları (birinci veya üçüncü taraf), kullanıcıların göz atma politikasını devralır bağlam. 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ği, üst sayfa ile allow arasında daha katı bir politikadır. kazanın. iframe kullanımıyla ilgili daha fazla bilgi için şuraya bakın: iframe'lerde allow özelliği.

Hayır. Bir politikanın kullanım ömrü tek bir sayfada gezinme yanıtı içindir. Eğer Kullanıcı yeni bir sayfaya gittiğinde Feature-Policy üstbilgisi açıkça belirtilmelidir. yeni yanıtta gönderilmiştir.

Özellik Politikası'nı hangi tarayıcılar destekler?

En güncel bilgiler için caniuse.com adresini ziyaret edin. ayrıntılar için tıklayın.

Şu anda Chrome, özellik politikasını destekleyen tek tarayıcıdır. Ancak, API yüzeyinin tamamı etkinleştirilebilir veya özellik algılanabilir olduğundan, Özellik Politikası ilerlemeye uygun olduğunu unutmayın.

Sonuç

Özellik Politikası, kullanıcılara daha iyi bir kullanıcı deneyimi sunmak, iyi performansa sahip olabilir. Bu araç, özellikle uygulama geliştirirken veya bakımını yaparken kullanışlıdır. çünkü kod tabanınıza gizlice girmeden önce olası ayak tabancalarını önlemenize yardımcı olur.

Ek kaynaklar: