Ringkasan
Kebijakan Fitur memungkinkan developer web mengaktifkan, menonaktifkan, dan mengubah perilaku API dan fitur web tertentu secara selektif di browser. Ini seperti CSP, tetapi alih-alih mengontrol keamanan, CSP mengontrol fitur.
Kebijakan fitur itu sendiri adalah perjanjian kecil antara developer dan browser yang dapat membantu mendorong tujuan kami dalam membuat (dan mempertahankan) aplikasi web berkualitas tinggi.
Pengantar
Membangun web adalah petualangan yang sulit. Cukup sulit untuk membangun aplikasi web terbaik yang menyempurnakan kinerja dan menggunakan semua praktik terbaik terbaru. Bahkan lebih sulit untuk mempertahankan pengalaman yang baik dari waktu ke waktu. Seiring berkembangnya project Anda, developer mulai menggunakan fitur baru, dan codebase akan berkembang. Bahwa Pengalaman Bagus yang pernah Anda capai mungkin mulai memburuk dan UX mulai menurun! Kebijakan Fitur dirancang untuk menjaga Anda tetap fokus.
Dengan Kebijakan Fitur, Anda memilih untuk menerapkan serangkaian "kebijakan" agar browser menerapkan fitur tertentu yang digunakan di seluruh situs Anda. Kebijakan ini membatasi API yang dapat diakses situs atau mengubah perilaku default browser untuk fitur tertentu.
Berikut adalah contoh hal yang dapat Anda lakukan dengan Kebijakan Fitur:
- Ubah perilaku default
autoplay
pada video seluler dan pihak ketiga. - Membatasi situs agar tidak menggunakan API sensitif seperti
camera
ataumicrophone
. - Izinkan iframe menggunakan
fullscreen
API. - Blokir penggunaan API yang sudah tidak berlaku seperti XHR sinkron dan
document.write()
. - Pastikan gambar berukuran tepat (mis., mencegah layout thrashing) dan tidak terlalu besar untuk area pandang (mis., memboroskan bandwidth pengguna).
Kebijakan adalah kontrak antara developer dan browser. Library ini memberi tahu browser tentang maksud developer dan dengan demikian, membantu kami untuk tetap jujur saat aplikasi kami mencoba keluar dari rel dan melakukan hal buruk. Jika situs atau konten pihak ketiga yang disematkan mencoba melanggar aturan developer yang telah dipilih sebelumnya, browser akan mengganti perilaku dengan UX yang lebih baik atau memblokir API sama sekali.
Menggunakan Kebijakan Fitur
Kebijakan Fitur memberikan dua cara untuk mengontrol fitur:
- Melalui header HTTP
Feature-Policy
. - Dengan atribut
allow
di iframe.
Header HTTP Feature-Policy
Cara termudah untuk menggunakan Feature Policy adalah dengan mengirimkan header HTTP Feature-Policy
beserta respons halaman. Nilai header ini adalah kebijakan atau rangkaian
kebijakan yang Anda inginkan agar dipatuhi oleh browser untuk asal tertentu:
Feature-Policy: <feature> <allow list origin(s)>
Daftar yang diizinkan asal dapat menggunakan beberapa nilai berbeda:
*
: Fitur ini diizinkan dalam konteks penjelajahan tingkat atas dan dalam konteks penjelajahan bertingkat (iframe).'self'
: Fitur ini diizinkan dalam konteks penjelajahan tingkat atas dan konteks penjelajahan bertingkat asal yang sama. Pendekatan ini tidak diizinkan dalam dokumen lintas-asal dalam konteks penjelajahan bertingkat.'none'
: Fitur ini tidak diizinkan dalam konteks penjelajahan tingkat atas dan tidak diizinkan dalam konteks penjelajahan bertingkat.<origin(s)>
: origin spesifik untuk 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 daftar
'none'
ketat yang diizinkan untuk fitur geolocation
:
Feature-Policy: geolocation 'none'
Jika sepotong kode atau iframe mencoba menggunakan Geolocation API, browser akan memblokirnya. Hal ini berlaku meskipun sebelumnya pengguna telah memberikan izin untuk membagikan lokasinya.
Dalam kasus lain, sebaiknya Anda sedikit melonggarkan kebijakan ini. Kami dapat mengizinkan origin kami sendiri untuk menggunakan Geolocation API, tetapi mencegah konten pihak ketiga mengaksesnya dengan menetapkan 'self'
dalam 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 bagi
konten tersemat:
<!-- 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 atribut yang sudah ada untuk mengontrol perilakunya. Misalnya, <iframe allowfullscreen>
adalah atribut yang memungkinkan konten iframe menggunakan
HTMLElement.requestFullscreen()
API. Ada juga atribut allowpaymentrequest
dan
allowusermedia
untuk mengizinkan
Payment Request API dan getUserMedia()
.
Cobalah untuk menggunakan atribut allow
, bukan atribut
lama ini jika memungkinkan. Untuk kasus yang mengharuskan Anda mendukung kompatibilitas
mundur menggunakan atribut allow
dengan atribut lama yang setara,
tidak masalah (misalnya <iframe allowfullscreen allow="fullscreen">
).
Perlu diperhatikan bahwa kebijakan yang lebih ketat akan menang. Misalnya, iframe berikut tidak akan diizinkan untuk 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 secara bersamaan dengan mengirimkan header HTTP
dengan daftar perintah kebijakan yang dipisahkan ;
:
Feature-Policy: unsized-media 'none'; geolocation 'self' https://example.com; camera *;
atau dengan mengirimkan 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
camera
mengakses semua konteks penjelajahan.
Contoh - menetapkan beberapa kebijakan pada 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
Meskipun 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 menentukan fitur mana yang diizinkan oleh
halaman, frame, atau browser. Anda dapat mengakses itemnya di bagian
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, tidak ada dokumentasi tentang kebijakan yang diterapkan dan cara menggunakannya. Daftar ini juga akan bertambah seiring waktu karena berbagai browser mengadopsi spesifikasi dan menerapkan berbagai kebijakan. Kebijakan fitur akan menjadi target yang bergerak dan dokumen referensi yang baik pasti akan dibutuhkan.
Untuk saat ini, ada beberapa cara untuk melihat fitur apa yang dapat dikontrol.
- Lihat Wastafel Dapur Kebijakan Fitur dari demo. Contoh ini mencantumkan setiap kebijakan yang diterapkan di Blink.
- Periksa sumber Chrome untuk mengetahui daftar nama fitur.
- Kueri
document.featurePolicy.allowedFeatures()
padaabout:blank
untuk menemukan daftar:
["geolocation",
"midi",
"camera",
"usb",
"magnetometer",
"fullscreen",
"animations",
"payment",
"picture-in-picture",
"accelerometer",
"vr",
...
- Periksa chromestatus.com untuk mengetahui kebijakan yang telah diterapkan atau sedang dipertimbangkan di Blink.
Untuk menentukan cara menggunakan beberapa kebijakan ini, lihat repo GitHub spesifikasi. Dokumen ini berisi beberapa penjelasan tentang beberapa kebijakan.
FAQ
Kapan saya menggunakan Kebijakan Fitur?
Semua kebijakan bersifat opsional, jadi gunakan Kebijakan Fitur jika diperlukan. Misalnya, jika aplikasi Anda adalah galeri gambar, kebijakan maximum-downscaling-image
akan membantu Anda menghindari pengiriman gambar raksasa ke area pandang seluler.
Kebijakan lain seperti document-write
dan sync-xhr
harus digunakan dengan lebih
hati-hati. Mengaktifkannya dapat merusak konten pihak ketiga seperti iklan. Di sisi lain, Kebijakan Fitur dapat menjadi pemeriksaan awal 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 pastikan kebijakan tetap aktif selama dalam produksi. Mengaktifkan kebijakan selama pengembangan dapat membantu Anda memulai di jalur yang benar. Cara ini akan membantu Anda mendeteksi regresi yang tidak terduga sebelum hal itu 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 digunakan. Serupa dengan cara situs dapat memilih untuk menerima laporan tentang pelanggaran CSP atau penghentian, Anda akan dapat menerima laporan tentang pelanggaran kebijakan fitur secara langsung.
Apa saja aturan pewarisan untuk konten iframe?
Skrip (pihak pertama atau ketiga) mewarisi kebijakan konteks penjelajahannya. Artinya, skrip tingkat atas mewarisi kebijakan dokumen utama.
iframe
mewarisi kebijakan halaman induknya. Jika iframe
memiliki
atribut allow
, kebijakan yang lebih ketat antara halaman induk dan daftar
allow
akan menang. Untuk informasi selengkapnya tentang penggunaan iframe
, lihat
atribut allow
di iframe.
Jika saya menerapkan kebijakan, apakah kebijakan tersebut berlaku di seluruh navigasi halaman?
Tidak. Masa berlaku kebijakan hanya berlaku untuk respons navigasi halaman tunggal. Jika
pengguna membuka halaman baru, header Feature-Policy
harus secara eksplisit
dikirim dalam respons baru agar kebijakan dapat diterapkan.
Browser apa yang mendukung Kebijakan Fitur?
Lihat caniuse.com untuk mengetahui detail terbaru tentang dukungan browser.
Hingga saat ini, Chrome adalah satu-satunya browser yang mendukung kebijakan fitur. Namun, karena seluruh platform API diikutsertakan atau terdeteksi oleh fitur, Kebijakan Fitur sangat cocok untuk peningkatan progresif.
Kesimpulan
Kebijakan Fitur dapat membantu memberikan jalur yang cukup terang menuju UX yang lebih baik dan performa yang baik. Alat ini sangat berguna saat mengembangkan atau memelihara aplikasi karena dapat membantu menghindari potensi pistol sebelum masuk ke codebase Anda.
Referensi tambahan:
- Penjelasan Kebijakan Fitur
- Spesifikasi Kebijakan Fitur
- Demo Wastafel Dapur
- Ekstensi DevTools Kebijakan Fitur - Penguji untuk mencoba kebijakan fitur di halaman.
- Entri chromestatus.com