Ringkasan
Kebijakan Fitur memungkinkan pengembang web mengaktifkan, menonaktifkan, dan mengubah perilaku API dan fitur web tertentu di browser. Ini seperti CSP, tetapi alih-alih mengontrol keamanan, kontrol fitur!
Kebijakan fitur itu sendiri merupakan persetujuan keikutsertaan kecil antara developer dan browser yang dapat membantu mendorong sasaran kami dalam membuat (dan mempertahankan) aplikasi web yang berkualitas.
Pengantar
Membuat aplikasi untuk web merupakan petualangan yang menantang. Cukup sulit untuk membuat yang terbaik aplikasi web yang meningkatkan performa dan menggunakan semua praktik terbaik terbaru. Bahkan dapat akan semakin sulit untuk menjaga pengalaman yang baik dari waktu ke waktu. Seiring perkembangan proyek, developer bergabung, fitur baru akan tersedia, dan codebase berkembang. Bahwa Great Experience TM yang pernah Anda capai mungkin mulai menurun dan UX mulai menderita! Kebijakan Fitur dirancang agar Anda tetap berada di jalur.
Dengan Kebijakan Fitur, Anda ikut serta dalam serangkaian "kebijakan" agar browser dapat berlaku pada fitur khusus yang digunakan di seluruh situs Anda. Kebijakan tersebut membatasi API apa yang dapat diakses situs atau mengubah perilaku default browser untuk fitur tertentu.
Berikut adalah contoh hal-hal yang dapat Anda lakukan dengan Kebijakan Fitur:
- Mengubah perilaku default
dari
autoplay
di video seluler dan pihak ketiga. - Batasi situs agar tidak menggunakan API sensitif seperti
camera
ataumicrophone
. - Izinkan iframe menggunakan
fullscreen
API. - Blokir penggunaan API usang seperti XHR sinkron dan
document.write()
. - Pastikan gambar memiliki ukuran yang tepat (misalnya, mencegah layout thrashing) dan tidak terlalu besar untuk area pandang (misalnya membuang-buang bandwidth pengguna).
Kebijakan adalah kontrak antara developer dan browser. Keduanya menginformasikan browser tentang maksud pengembang, dan oleh karena itu, membantu menjaga kami tetap jujur saat aplikasi kita mencoba keluar dari rel dan melakukan sesuatu yang buruk. Jika situs atau sematan konten pihak ketiga mencoba melanggar salah satu browser akan mengganti perilaku tersebut dengan UX yang lebih baik atau memblokir API secara menyeluruh.
Menggunakan Kebijakan Fitur
Kebijakan Fitur menyediakan dua cara untuk mengontrol fitur:
- Melalui header HTTP
Feature-Policy
. - Dengan atribut
allow
di iframe.
Header HTTP Feature-Policy
Cara termudah untuk menggunakan Kebijakan Fitur adalah dengan mengirimkan permintaan HTTP Feature-Policy
dengan respons halaman. Nilai header ini adalah kebijakan atau kumpulan
kebijakan yang Anda inginkan agar dipatuhi oleh browser untuk origin tertentu:
Feature-Policy: <feature> <allow list origin(s)>
Daftar origin yang diizinkan dapat menggunakan beberapa nilai yang berbeda:
*
: Fitur ini diizinkan dalam konteks penjelajahan tingkat atas dan di halaman bertingkat konteks penjelajahan (iframe).'self'
: Fitur ini diizinkan dalam konteks penjelajahan tingkat atas dan konteks penjelajahan bertingkat dengan origin yang sama. Tidak diizinkan di lintas origin dokumen dalam konteks penjelajahan bertingkat.'none'
: Fitur ini tidak diizinkan dalam konteks penjelajahan tingkat atas dan tidak diizinkan dalam konteks penjelajahan bertingkat.<origin(s)>
: origin tertentu yang akan mengaktifkan kebijakan (misalnya,https://example.com
).
Contoh
Misalkan Anda ingin memblokir semua konten agar tidak menggunakan
Geolocation API di seluruh situs Anda. Anda dapat melakukannya dengan mengirimkan permintaan
daftar 'none'
yang diizinkan untuk fitur geolocation
:
Feature-Policy: geolocation 'none'
Jika sepotong kode atau iframe mencoba menggunakan Geolocation API, memblokirnya. Hal ini tetap berlaku meskipun pengguna sebelumnya telah memberikan izin untuk membagikan lokasi mereka.
Dalam kasus lain, sebaiknya kebijakan ini sedikit longgar. Kita dapat mengizinkan
asal sendiri untuk menggunakan Geolocation API tetapi mencegah konten pihak ketiga
mengaksesnya dengan menyetel 'self'
di daftar yang diizinkan:
Feature-Policy: geolocation 'self'
Atribut allow
iframe
Cara kedua untuk menggunakan Kebijakan Fitur
adalah untuk mengontrol konten dalam
iframe
. Gunakan atribut allow
untuk menentukan daftar kebijakan untuk
konten yang disematkan:
<!-- 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>
Bagaimana dengan atribut iframe yang sudah ada?
Beberapa fitur yang dikontrol oleh Kebijakan Fitur memiliki
untuk mengontrol perilakunya. Misalnya, <iframe allowfullscreen>
adalah atribut yang memungkinkan konten iframe menggunakan
API HTMLElement.requestFullscreen()
. Ada juga allowpaymentrequest
dan
atribut allowusermedia
untuk memungkinkan
Payment Request API dan getUserMedia()
,
secara berurutan.
Coba gunakan atribut allow
, bukan atribut lama
atribut jika memungkinkan. Untuk kasus di mana Anda perlu memberikan dukungan
kompatibilitas menggunakan atribut allow
dengan atribut lama yang setara
tidak apa-apa (mis. <iframe allowfullscreen allow="fullscreen">
).
Perhatikan bahwa kebijakan yang lebih ketat berlaku. Misalnya,
iframe tidak diizinkan masuk ke layar penuh karena
allow="fullscreen 'none'"
lebih ketat daripada allowfullscreen
:
<!-- Blocks fullscreen access if the browser supports feature policy. -->
<iframe allowfullscreen allow="fullscreen 'none'" src="..."></iframe>
Mengontrol beberapa kebijakan sekaligus
Beberapa fitur dapat dikontrol pada saat yang sama dengan mengirimkan header HTTP
dengan daftar perintah kebijakan terpisah ;
:
Feature-Policy: unsized-media 'none'; geolocation 'self' https://example.com; camera *;
atau dengan mengirim header terpisah untuk setiap kebijakan:
Feature-Policy: unsized-media 'none'
Feature-Policy: geolocation 'self' https://example.com
Feature-Policy: camera *;
Contoh ini akan melakukan hal berikut:
- Melarang penggunaan
unsized-media
untuk semua konteks penjelajahan. - Melarang penggunaan
geolocation
untuk semua konteks penjelajahan kecuali untuk asal halaman itu sendiri danhttps://example.com
. - Mengizinkan akses
camera
untuk semua konteks penjelajahan.
Contoh - menetapkan beberapa kebijakan di iframe
<!-- Blocks the iframe from using the camera and microphone
(if the browser supports feature policy). -->
<iframe allow="camera 'none'; microphone 'none'"></iframe>
JavaScript API
Sementara Chrome 60 menambahkan dukungan untuk header HTTP Feature-Policy
dan
Atribut allow
di iframe, JavaScript API telah ditambahkan di Chrome 74.
API ini memungkinkan kode sisi klien untuk menentukan fitur mana yang diizinkan oleh
halaman, bingkai, atau browser. Anda dapat mengakses barangnya di
document.featurePolicy
untuk dokumen utama atau frame.featurePolicy
untuk
iframe.
Contoh
Contoh di bawah mengilustrasikan hasil pengiriman kebijakan
Feature-Policy: geolocation 'self'
di situs https://example.com
:
/* @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"]
Daftar kebijakan
Jadi, fitur apa yang dapat dikontrol melalui Kebijakan Fitur?
Saat ini, kurangnya dokumentasi tentang kebijakan yang diterapkan dan cara menggunakannya. Daftar ini juga akan bertambah seiring waktu karena berbagai {i>browser<i} yang berbeda mengadopsi spesifikasi dan menerapkan berbagai kebijakan. Kebijakan fitur akan berubah target dan dokumen referensi yang baik pasti akan diperlukan.
Untuk saat ini, ada beberapa cara untuk melihat fitur apa yang dapat dikontrol.
- Lihat demo Kit Dapur Kebijakan Fitur kami. Contoh ini memiliki contoh setiap kebijakan yang diterapkan di Blink.
- Periksa sumber Chrome untuk daftar nama fitur.
- Buat kueri
document.featurePolicy.allowedFeatures()
diabout:blank
untuk menemukan daftar:
["geolocation",
"midi",
"camera",
"usb",
"magnetometer",
"fullscreen",
"animations",
"payment",
"picture-in-picture",
"accelerometer",
"vr",
...
- Buka chromestatus.com untuk melihat kebijakan yang telah diterapkan atau sedang dipertimbangkan dalam Blink.
Untuk menentukan cara menggunakan beberapa kebijakan tersebut, lihat repo GitHub spesifikasi. Video ini berisi beberapa penjelasan tentang beberapa kebijakan.
FAQ
Kapan saya menggunakan Kebijakan Fitur?
Semua kebijakan bersifat opsional, jadi gunakan Kebijakan Fitur jika/jika perlu. Sebagai
misalnya, jika aplikasi Anda adalah galeri gambar, maximum-downscaling-image
kebijakan ini akan membantu Anda menghindari pengiriman gambar berukuran besar ke area pandang seluler.
Kebijakan lain seperti document-write
dan sync-xhr
harus digunakan dengan lebih banyak
perawatan. Mengaktifkan setelan ini dapat merusak konten pihak ketiga seperti iklan. Pada
di sisi lain, Kebijakan Fitur dapat menjadi pemeriksaan usus untuk memastikan halaman Anda
tidak pernah menggunakan API buruk ini!
Apakah saya menggunakan Kebijakan Fitur dalam pengembangan atau produksi?
Keduanya. Sebaiknya aktifkan kebijakan selama pengembangan dan jaga kebijakan yang aktif saat dalam produksi. Mengaktifkan kebijakan selama pengembangan dapat membantu Anda memulai di jalur yang benar. Ini akan membantu Anda mendeteksi kejadian regresi sebelum terjadi. Tetap aktifkan kebijakan dalam produksi untuk menjamin UX tertentu bagi pengguna.
Apakah ada cara untuk melaporkan pelanggaran kebijakan ke server saya?
Reporting API sedang dalam proses. Serupa dengan bagaimana situs dapat ikut serta menerima laporan tentang Pelanggaran CSP atau penghentian, Anda akan dapat menerima laporan tentang pelanggaran kebijakan fitur dalam dunia nyata.
Apa saja aturan pewarisan untuk konten iframe?
Skrip (baik pihak pertama atau ketiga) mewarisi kebijakan penjelajahannya konteks tambahan. Artinya skrip tingkat atas mewarisi kebijakan dokumen utama.
iframe
mewarisi kebijakan dari halaman induknya. Jika iframe
memiliki
Atribut allow
, kebijakan yang lebih ketat antara halaman induk dan allow
ada di daftar, menang. Untuk informasi selengkapnya tentang penggunaan iframe
, lihat
Atribut allow
di iframe.
Jika saya menerapkan kebijakan, apakah kebijakan tersebut akan berlaku di seluruh navigasi halaman?
Tidak. Masa berlaku kebijakan berlaku untuk respons navigasi satu halaman. Jika
pengguna membuka halaman baru, header Feature-Policy
harus secara eksplisit
dikirim di respons baru agar kebijakan dapat diterapkan.
Browser apa yang mendukung Kebijakan Fitur?
Lihat caniuse.com untuk mengetahui detail tentang dukungan browser.
Untuk saat ini, Chrome adalah satu-satunya browser yang mendukung kebijakan fitur. Namun, karena seluruh platform API diikutsertakan atau dapat terdeteksi oleh fitur, Kebijakan Fitur sangat cocok untuk progressive enhancement.
Kesimpulan
Kebijakan Fitur dapat membantu memberikan jalur yang baik menuju UX yang lebih baik dan performa yang baik. Hal ini sangat berguna saat mengembangkan atau memelihara aplikasi karena dapat membantu menghindari kemungkinan Footgun sebelum masuk ke codebase Anda.
Referensi tambahan:
- Penjelasan Kebijakan Fitur
- Spesifikasi Kebijakan Fitur
- Demo Wastafel Dapur
- Feature Policy DevTools Extension - Penguji untuk mencoba kebijakan fitur pada halaman.
- entri chromestatus.com