Melindungi Situs Anda Dengan Kebijakan Fitur

Salah satu fitur platform web yang disorot pada Chrome Dev Summit baru-baru ini adalah Kebijakan Fitur, yang bertujuan untuk “memungkinkan penulis situs secara selektif mengaktifkan dan menonaktifkan penggunaan berbagai fitur browser dan API.” Pada artikel ini, saya akan melihat apa artinya bagi pengembang web, dengan beberapa contoh praktis.

Dalam artikel pengantarnya di situs Google Developers, Eric Bidelman menjelaskan Kebijakan Fitur sebagai berikut:

“Kebijakan fitur itu sendiri adalah sedikit perjanjian keikutsertaan antara pengembang dan browser yang dapat membantu mendorong tujuan kami dalam membangun (dan memelihara) aplikasi web berkualitas tinggi.”

Spesifikasi telah dikembangkan di Google oleh sebagai bagian dari aktivitas Grup Inkubator Platform Web. Tujuan dari Kebijakan Fitur adalah agar kami, sebagai pengembang web, dapat menyatakan penggunaan kami atas fitur platform web, secara eksplisit ke browser. Dengan demikian, kami membuat kesepakatan tentang penggunaan kami, atau tidak menggunakan fitur khusus ini. Berdasarkan ini browser dapat bertindak untuk memblokir fitur tertentu, atau melaporkan kembali kepada kami bahwa fitur yang tidak diharapkan untuk dilihat sedang digunakan.

Contohnya mungkin termasuk:

1. Saya menyematkan iframe dan saya tidak ingin situs yang disematkan dapat mengakses kamera pengunjung saya;
2. Saya ingin menangkap situasi di mana gambar yang tidak dioptimalkan disebarkan ke situs saya melalui CMS;
3. Ada banyak pengembang yang mengerjakan proyek saya, dan saya ingin tahu apakah mereka menggunakan API usang seperti document.write .

Semua hal ini dapat dilacak, diblokir, atau dilaporkan sebagai bagian dari Kebijakan Fitur.

Cara Menggunakan Kebijakan Fitur

Untuk menggunakan Kebijakan Fitur, browser perlu mengetahui dua hal: fitur mana yang Anda buat kebijakannya, dan bagaimana Anda ingin fitur tersebut ditangani.

 Feature-Policy: <directive> <allowlist>

<directive> adalah nama fitur yang Anda atur kebijakannya.

Daftar fitur saat ini (bersumber dari presentasi yang diberikan di Chrome Dev Summit) adalah sebagai berikut:

• akselerometer
• sensor-cahaya-ambien
• putar otomatis
• kamera
• dokumen-tulis
• terenkripsi-media
• layar penuh
• geolokasi
• giroskop
• layout-animasi
• beban malas
• format-gambar-warisan
• magnetometer
• midi
• gambar kebesaran
• pembayaran
• gambar di dalam gambar
• pembicara
• sinkronisasi-skrip
• sinkronisasi-xhr
• gambar yang tidak dioptimalkan
• tidak berukuran-media
• usb
• gulir vertikal
• vr

<allowlist> merinci bagaimana fitur dapat digunakan — jika ada — dan mengambil satu atau beberapa nilai berikut.

• *
  Kebijakan paling liberal, yang menyatakan bahwa fitur akan diizinkan dalam dokumen ini, dan iframe apa pun baik dari domain ini atau di tempat lain. Hanya dapat digunakan sebagai nilai tunggal karena tidak masuk akal untuk mengaktifkan semuanya dan juga meneruskan daftar domain, misalnya.
• self
  Fitur ini akan tersedia di dokumen dan iframe apa pun, namun iframe harus memiliki asal yang sama.
• src
  Hanya berlaku saat menggunakan atribut iframe allow . Ini memungkinkan fitur selama dokumen yang dimuat ke dalamnya berasal dari asal yang sama dengan URL di atribut src iframe.
• none
  Menonaktifkan fitur untuk dokumen dan iframe bersarang apa pun. Hanya dapat digunakan sebagai nilai tunggal.
• <origin(s)>
  Fitur ini diperbolehkan untuk asal tertentu; ini berarti Anda dapat menentukan daftar domain tempat fitur tersebut diizinkan. Daftar domain dipisahkan oleh spasi.

Ada dua metode yang dapat digunakan untuk mengaktifkan kebijakan fitur di situs Anda: Anda dapat mengirim Header HTTP, atau menggunakan atribut allow pada iframe.

Tajuk HTTP

Mengirim Header HTTP berarti Anda dapat mengaktifkan kebijakan fitur untuk halaman atau seluruh situs yang mengatur header itu, dan juga apa pun yang disematkan di situs. Header dapat diatur untuk seluruh situs Anda di server web atau dapat dikirim dari aplikasi Anda.

Misalnya, jika saya ingin mencegah penggunaan API geolokasi dan saya menggunakan server web NGINX, saya dapat mengedit file konfigurasi untuk situs saya di NGINX untuk menambahkan tajuk berikut, yang akan mencegah dokumen apa pun di situs saya dan semua iframe yang disematkan dari menggunakan API geolokasi.

 add_header Feature-Policy "geolocation none;";

Beberapa kebijakan dapat diatur dalam satu header. Untuk mencegah geolokasi dan getar tetapi mengizinkan unsized-media tidak berukuran dari domain example.com , saya dapat mengatur yang berikut:

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

Atribut allow di iFrames

Jika kami terutama memperhatikan apa yang terjadi dengan konten dalam iframe, kami dapat menggunakan Kebijakan Fitur pada iframe itu sendiri; ini mendapat manfaat dari dukungan browser yang sedikit lebih baik pada saat penulisan dengan Chrome dan Safari yang mendukung penggunaan ini.

Jika saya menyematkan situs dan tidak ingin situs tersebut menggunakan API geolokasi, kamera, atau mikrofon, maka iframe saya akan terlihat seperti contoh berikut:

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

Anda mungkin sudah familiar dengan atribut individual yang mengontrol konten iframes allowfullscreen , allowpaymentrequest , dan allowusermedia . Ini allow diganti dengan atribut Allow Policy, dan untuk alasan kompatibilitas browser, Anda dapat menggunakan keduanya pada iframe. Jika Anda menggunakan kedua atribut, maka atribut yang paling ketat akan berlaku. Artikel Google menunjukkan contoh iframe yang menggunakan layar penuh yang allowfullscreen — artinya iframe diizinkan masuk ke layar penuh, tetapi Kebijakan Fitur yang bertentangan dengan fullscreen none . Konflik ini, sehingga kebijakan yang paling ketat menang dan iframe ini tidak akan diizinkan masuk ke layar penuh.

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

Elemen iframe juga memiliki atribut sandbox yang dirancang untuk mengelola dukungan bagi banyak fitur. Fitur ini juga ditambahkan ke Kebijakan Keamanan Konten dengan nilai sandbox yang menonaktifkan semua fitur kotak pasir, yang kemudian dapat dipilih kembali secara selektif. Ada beberapa persilangan antara fitur kotak pasir dan yang dikendalikan oleh Kebijakan Fitur, dan Kebijakan Fitur tidak berusaha untuk menduplikasi nilai-nilai yang sudah dicakup oleh kotak pasir. Namun, itu mengatasi beberapa keterbatasan kotak pasir dengan mengambil pendekatan yang lebih halus untuk mengelola kebijakan ini, daripada mematikan semuanya secara global sebagai satu set kebijakan besar.

Kebijakan Fitur Dan API Pelaporan

Pelanggaran Kebijakan Fitur dapat dilaporkan melalui API Pelaporan, yang berarti Anda dapat mengembangkan serangkaian kebijakan yang komprehensif yang melacak penggunaan fitur di seluruh situs Anda. Ini akan benar-benar transparan bagi pengguna Anda, tetapi memberi Anda banyak informasi tentang bagaimana fitur digunakan.

Dukungan Browser Untuk Kebijakan Fitur

Saat ini, dukungan browser untuk Kebijakan Fitur terbatas pada Chrome, namun, dalam banyak kasus di mana Anda menggunakan Kebijakan Fitur selama pengembangan dan saat melihat pratinjau situs, hal ini tidak selalu menjadi masalah.

Banyak kasus penggunaan yang akan saya uraikan di bawah ini dapat digunakan saat ini, tanpa menimbulkan dampak apa pun bagi pengunjung situs yang menggunakan browser tanpa dukungan.

Kapan Menggunakan Kebijakan Fitur

Saya sangat menyukai gagasan untuk dapat menggunakan Kebijakan Fitur untuk membantu mencadangkan keputusan yang dibuat saat mengembangkan situs. Keputusan yang mungkin ditulis dalam dokumen seperti anggaran kinerja, atau sebagai bagian dari audit GDPR, tetapi yang kemudian menjadi sesuatu yang harus kita ingat untuk dilestarikan sepanjang masa pakai situs. Ini tidak selalu mudah ketika banyak orang bekerja di sebuah situs; orang-orang yang mungkin tidak terlibat selama pengambilan keputusan awal itu, atau mungkin tidak menyadari persyaratannya. Kami banyak berpikir tentang pihak ketiga yang mengelola entah bagaimana memengaruhi situs kami, namun, terkadang situs kami perlu dilindungi dari diri kami sendiri!

Mengawasi Pihak Ketiga

Anda dapat mencegah situs pihak ketiga mengakses kamera atau mikrofon menggunakan kebijakan fitur pada iframe dengan atribut allow . Jika alasan penyematan situs tersebut tidak ada hubungannya dengan fitur tersebut, maka menonaktifkannya berarti situs tersebut tidak akan pernah bisa mulai meminta fitur tersebut. Ini kemudian dapat dikaitkan dengan proses Anda untuk memastikan kepatuhan GDPR. Saat Anda mengaudit dampak privasi situs Anda, Anda dapat membangun proses untuk mengunci akses pihak ketiga melalui kebijakan fitur — memberi Anda dan pengunjung Anda keamanan tambahan dan ketenangan pikiran.

Penggunaan ini memang bergantung pada dukungan browser untuk Kebijakan Fitur untuk memblokir penggunaan. Namun, Anda dapat menggunakan mode pelaporan Kebijakan Fitur untuk memberi tahu Anda tentang penggunaan API ini jika pihak ketiga mengubah apa yang akan mereka lakukan. Ini akan memberi Anda peringatan yang sangat cepat — pada dasarnya segera setelah orang pertama yang menggunakan Chrome membuka situs.

Mengaktifkan Fitur Secara Selektif

Kami juga mungkin ingin secara selektif mengaktifkan beberapa fitur yang biasanya diblokir. Mungkin kami ingin mengizinkan iframe memuat konten dari situs lain untuk menggunakan fitur geolokasi di browser. Chrome secara default memblokir ini, tetapi jika Anda memuat konten dari situs tepercaya, Anda dapat mengaktifkan permintaan lintas-asal menggunakan Kebijakan Fitur. Artinya, Anda dapat mengaktifkan fitur dengan aman saat memuat konten dari domain lain yang berada di bawah kendali Anda.

Menangkap Penggunaan API Kedaluwarsa Dan Fitur Berkinerja Buruk

Kebijakan Fitur dapat dijalankan dalam mode hanya laporan. Kemudian dapat melacak penggunaan fitur tertentu dan memberi tahu Anda saat fitur tersebut ditemukan di situs. Ini dapat berguna dalam banyak skenario. Jika Anda memiliki situs yang sangat besar dengan banyak kode lawas, mengaktifkan Kebijakan Fitur akan membantu Anda melacak tempat-tempat yang memerlukan perhatian. Jika Anda bekerja dengan tim besar (terutama jika pengembang sering menarik beberapa pustaka kode pihak ketiga), Kebijakan Fitur dapat menangkap hal-hal yang tidak ingin Anda lihat di situs.

Menangani Gambar yang Dioptimalkan dengan Buruk

Sementara sebagian besar artikel yang saya lihat tentang Kebijakan Fitur berkonsentrasi pada aspek keamanan dan privasi, fitur seputar pengoptimalan gambar sangat menarik bagi saya, sebagai seseorang yang menangani banyak konten yang dihasilkan oleh pengguna teknis dan non-teknis. Kebijakan Fitur dapat digunakan untuk membantu melindungi pengalaman pengguna serta kinerja situs Anda dengan mencegah gambar yang terlalu besar — ​​atau tidak dioptimalkan — diunduh oleh pengunjung.

Di dunia yang ideal, CMS Anda akan menangani manajemen gambar, memastikan bahwa gambar diubah ukurannya dengan bijaksana, dioptimalkan untuk web dan konteks tempat mereka akan ditampilkan. Namun, kehidupan nyata jarang menjadi dunia yang ideal itu, dan terkadang tugas mengubah ukuran dan pengoptimalan gambar diserahkan kepada editor konten untuk memastikan mereka tidak mengunggah gambar berukuran besar ke web. Ini terutama menjadi masalah jika Anda menggunakan CMS statis tanpa lapisan manajemen konten di atasnya. Bahkan sebagai orang teknis, sangat mudah untuk lupa mengubah ukuran tangkapan layar raksasa atau gambar kamera yang Anda masukkan ke dalam folder sebagai pengganti.

Saat ini di belakang bendera di Chrome adalah fitur yang dapat membantu. Ide di balik fitur ini adalah untuk menyorot gambar yang bermasalah sehingga dapat diperbaiki — tanpa merusak situs sepenuhnya.

Kebijakan fitur unsized-media tidak berukuran mencari gambar atau video yang tidak memiliki ukuran yang ditetapkan di HTML atau CSS. Saat elemen media yang tidak berukuran dimuat, hal itu dapat menyebabkan konten pada halaman mengalir ulang.

Untuk mencegah media berukuran tidak ditambahkan ke situs, atur tajuk berikut. Media kemudian akan ditampilkan dengan ukuran default 300x150 piksel. Anda akan melihat situs Anda memuat dengan media kecil, dan menyadari bahwa Anda memiliki masalah untuk diperbaiki.

 Feature-Policy: unsized-media 'none'

Lihat demo (membutuhkan Chrome Canary dengan Fitur Platform Web Eksperimental aktif).

Pemeriksaan kebijakan fitur oversized-images untuk melihat bahwa gambar tidak lebih besar dari wadahnya. Jika ya, placeholder akan ditampilkan sebagai gantinya. Kebijakan ini sangat berguna untuk memeriksa bahwa Anda tidak mengirim gambar desktop berukuran besar ke pengguna seluler Anda.

 Feature-Policy: oversized-images 'none'

Lihat demo (membutuhkan Chrome Canary dengan Fitur Platform Web Eksperimental aktif).

Kebijakan fitur unoptimized-images memeriksa untuk melihat apakah ukuran data gambar dalam byte tidak lebih dari 0,5x lebih besar dari area renderingnya dalam piksel. Jika kebijakan ini diaktifkan dan gambar melanggarnya, placeholder akan ditampilkan, bukan gambar.

 Feature-Policy: unoptimized-images 'none'

Lihat demo (membutuhkan Chrome Canary dengan Fitur Platform Web Eksperimental aktif).

Pengujian Dan Pelaporan Kebijakan Fitur

Chrome DevTools akan menampilkan pesan untuk memberi tahu Anda bahwa fitur tertentu telah diblokir atau diaktifkan oleh Kebijakan Fitur. Jika Anda telah mengaktifkan Kebijakan Fitur di situs Anda, Anda dapat memeriksa apakah ini berfungsi.

Dukungan untuk Kebijakan Fitur juga telah ditambahkan ke situs Header Keamanan, yang berarti Anda dapat memeriksanya bersama dengan header seperti Kebijakan Keamanan Konten di situs Anda — atau situs lain di web.

Ada Ekstensi Chrome DevTools yang memungkinkan Anda mengaktifkan dan menonaktifkan Kebijakan Fitur yang berbeda (juga cara yang bagus untuk memeriksa halaman Anda tanpa perlu mengonfigurasi header apa pun).

Jika Anda ingin mengintegrasikan Kebijakan Fitur Anda dengan Reporting API, maka ada informasi lebih lanjut tentang cara melakukannya di sini.

Bacaan dan Sumber Daya Lebih Lanjut

Saya telah menemukan sejumlah sumber, banyak yang saya gunakan ketika meneliti artikel ini. Ini akan memberi Anda semua yang Anda butuhkan untuk mulai menerapkan Kebijakan Fitur di aplikasi Anda sendiri. Jika Anda sudah menggunakan Kebijakan Keamanan Konten, ini tampaknya merupakan langkah logis tambahan untuk mengontrol cara kerja situs Anda dengan browser untuk membantu memastikan keamanan dan privasi orang-orang yang menggunakan situs Anda. Anda memiliki bonus tambahan karena dapat menggunakan Kebijakan Fitur untuk membantu Anda tetap mengetahui elemen perusak kinerja yang ditambahkan ke situs Anda dari waktu ke waktu.

• Spesifikasi Kebijakan Fitur
• Memperkenalkan Kebijakan Fitur
• Lihat dari Chrome Dev Summit
• Kebijakan Fitur di MDN
• Dapatkah Saya Menggunakan Kebijakan Fitur
• Demo Kebijakan Fitur
• Siapkan tajuk Kebijakan Fitur, Kebijakan Perujuk, dan Kebijakan Keamanan Konten di Nginx