Ö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
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 (ö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:
Feature-Policy
HTTP başlığı üzerinden.- iframe'lerde
allow
özelliğiyle.
Feature-Policy
HTTP üstbilgisi
Ö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](https://developer.chrome.google.cn/static/blog/feature-policy/image/violating-set-geolocatio-2e1e841fd18d8.png?authuser=0000&hl=tr)
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ğı vehttps://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 ilgilidocument.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.
Uyguladığım politika sayfa gezinmelerini etkiler mi?
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:
- Ö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