Privacy & Security

Mengapa pemprosesan imej dalam pelayar ialah kemenangan untuk privasi

Bagaimana API web moden membolehkan anda membina alat imej yang benar-benar peribadi — dan maknanya untuk orang yang menggunakannya.

The Wux Webtools Team The Wux Webtools Team 4 min baca
Editorial illustration of a closed laptop with a small lock icon, soft green and slate palette
Jadual kandungan
  1. Jangkaan lalai itu salah
  2. Maksud sebenar "sisi klien"
  3. Mengapa ini penting dalam amalan
  4. Di mana pertukaran nilainya masih wujud
  5. Permulaan sejuk lebih berat
  6. Perkakasan pengguna menetapkan had tertinggi
  7. Anda tidak boleh melakukan batch merentas pengguna
  8. Sesetengah operasi memerlukan pelayan
  9. Satu perkara etika kecil
  10. Ke mana selepas ini

Jangkaan lalai itu salah

Sepanjang hampir dua puluh tahun yang lalu, melakukan apa-apa yang bukan remeh dengan imej di web biasanya bermaksud memuat naiknya ke pelayan. Menukar foto HEIC, membuang metadata EXIF, menjana favicon — setiap alat itu secara sejarahnya berada di sebalik borang multipart. Pengguna mengklik upload, fail bergerak merentasi internet awam, dan pelayan di suatu tempat melakukan kerjanya.

Lalai itu tidak lagi diperlukan dari segi teknikal. Pelayar telah menghantar API beberapa tahun lalu yang membolehkan keseluruhan pipeline berjalan secara setempat:

  • <canvas> and OffscreenCanvas untuk kerja pada tahap piksel
  • createImageBitmap() untuk penyahkodan pantas di luar thread utama
  • File and Blob untuk membaca muat naik tanpa menghantarnya ke mana-mana
  • WebAssembly untuk pustaka seperti libheif, libwebp and ffmpeg
  • Web Workers untuk memastikan UI kekal responsif semasa kerja berat berjalan

Jika anda menggabungkannya, fail tidak pernah meninggalkan peranti. Pelayan tidak pernah melihatnya. Tiada apa-apa untuk dilog, tiada apa-apa untuk bocor, tiada apa-apa untuk disepina.

Maksud sebenar "sisi klien"

Perlu tepat di sini, kerana salinan pemasaran pada banyak alat "peribadi" agak longgar.

Sesuatu alat benar-benar bersifat sisi klien apabila, selepas halaman dimuatkan, tiada bahagian kandungan fail pernah bergerak ke pelayan. Halaman itu sendiri dimuatkan daripada pelayan (HTML, JavaScript, mungkin modul WebAssembly). Selepas itu, fail anda masuk ke memori pelayar dan kekal di sana sehingga anda menutup tab.

Sesuatu alat bukan sisi klien jika ia:

  • melakukan POST fail ke endpoint /api/...
  • Menghantar thumbnail atau pratonton ke pelayan
  • Memanggil endpoint analitik dengan metadata fail (dimensi, nama, hash)
  • Menghalakan fail melalui CDN pihak ketiga yang mengembalikan URL yang telah diproses

Panel rangkaian dalam devtools pelayar anda ialah penentu kebenaran. Buka panel itu, lepaskan fail, dan semak apa yang dimuat naik. Jika anda melihat nama fail atau saiz fail anda terbang keluar, alat itu tidak seperibadi yang didakwanya.

Mengapa ini penting dalam amalan

Tiga kumpulan orang mendapat manfaat secara senyap apabila pemprosesan imej berpindah ke dalam pelayar.

Wartawan, aktivis dan penyelidik mengendalikan bahan sumber yang boleh menjadi berbahaya jika bocor. Metadata EXIF boleh merangkumi koordinat GPS daripada peranti yang mengambil foto tersebut. Pembuang EXIF sisi pelayar bermaksud fail asal tidak pernah melintasi rangkaian.

Syarikat yang tertakluk kepada peraturan — penjagaan kesihatan, kewangan, perundangan — jika tidak, perlu ada perjanjian pemprosesan data dengan pihak yang menjalankan alat tersebut. Halaman statik yang melakukan kerja secara setempat tidak memerlukan DPA untuk ditandatangani kerana tiada pemproses.

Semua orang lain mendapat manfaat yang jelas: pusingan kerja lebih pantas (tiada masa muat naik), tiada had saiz fail yang ditetapkan oleh bil pengehosan, tiada kegagalan apabila pelayan tidak berfungsi.

Di mana pertukaran nilainya masih wujud

Sisi klien bukan sihir. Ada kos sebenar yang perlu anda fikirkan sebelum memilihnya untuk sesuatu masalah.

Permulaan sejuk lebih berat

Bundle WebAssembly untuk penyahkodan HEIC bersaiz beberapa ratus kilobait. ffmpeg yang dikompil kepada WASM bersaiz beberapa megabait. Lawatan pertama membayar kos itu. Caching membantu, dan code-splitting lebih membantu — hanya muatkan codec yang benar-benar dipilih oleh pengguna.

Perkakasan pengguna menetapkan had tertinggi

Fail RAW 200 megapiksel akan kehabisan memori pada telefon bajet jauh sebelum ia kehabisan pada pelayan. Bersikap jujur dalam UI tentang perkara yang realistik pada peranti.

Anda tidak boleh melakukan batch merentas pengguna

Pemprosesan sisi pelayan boleh menyahduplikasi dan mengagihkan kos. Jika sejuta pengguna menukar imej stok yang sama, pelayan boleh memprosesnya sekali. Sisi klien melakukannya sejuta kali. Untuk kebanyakan beban kerja alat peribadi, ini tidak menjadi masalah — kerja itu memang unik — tetapi ia wajar diketahui.

Sesetengah operasi memerlukan pelayan

Carian imej terbalik memerlukan indeks. Penyederhanaan kandungan memerlukan model yang terlalu besar untuk dihantar. Apa-apa yang membandingkan fail anda dengan korpus yang bukan milik anda memerlukan backend.

Satu perkara etika kecil

Jika alat anda benar-benar bersifat sisi klien, nyatakannya dengan jelas dan buktikan. Pautkan kepada sumber, tunjukkan panel rangkaian, terangkan apa yang berjalan di mana. Frasa seperti "kami tidak menyimpan data anda" tidak bermakna tanpa seni bina yang menyokongnya — setiap alat sisi pelayan yang pernah membocorkan data pelanggan juga mengatakan perkara yang sama, dan memang memaksudkannya pada masa itu.

Sebaliknya juga benar. Jika alat anda memang sisi pelayan, jangan berpura-pura sebaliknya. Pengguna sudah mula mengenali coraknya, dan kehilangan kepercayaan apabila mereka menangkap anda adalah kekal.

<!-- tool-cta:start -->

💡 Cuba ini: Lihat pemprosesan sisi klien beraksi dengan Image Compressor, yang mengecilkan imej sepenuhnya dalam pelayar anda supaya tiada apa-apa pun pernah dimuat naik ke pelayan.

<!-- tool-cta:end -->

Ke mana selepas ini

Jika anda membina utiliti imej kecil hari ini, jadikan sisi klien sebagai lalai dan hanya gunakan pelayan apabila anda mempunyai sebab yang konkrit. Pelayar akan mengejutkan anda dengan sejauh mana ia mampu memikul kerja tersebut — dan orang di hujung satu lagi sambungan rangkaian akan berterima kasih secara senyap untuk bait yang tidak pernah meninggalkan mesin mereka.

Diagram showing a browser-only image processing flow where the page loads once, then the file stays in browser memory and never reaches a server
InfographicWhat truly client-side image processing looks like — A genuinely client-side tool loads code first, then keeps the file entirely inside the browser
Two-column comparison of genuine client-side tools versus tools that still send files, thumbnails, or metadata to servers
InfographicClient-side vs fake-private processing — The network panel is the simplest test: if file contents, thumbnails, or metadata leave the browser, it is not fully client-side
Checklist-style visual summarizing privacy and speed benefits of browser processing alongside cold start, hardware, batching, and backend limits
InfographicWhere browser-side processing wins — and where it doesn't — Browser-side tools remove upload risk, but cold starts, device limits, and corpus-scale tasks still define the boundary

Soalan yang sering ditanya

Adakah pemprosesan sisi klien sentiasa lebih peribadi berbanding sisi pelayan?
Jika dilaksanakan dengan betul, ya — fail tidak pernah melintasi rangkaian, jadi ia tidak boleh dipintas, dilog atau dibocorkan. Kekangannya ialah pelaksanaan: sesuatu alat boleh dimuatkan melalui HTTPS, dipaparkan dalam pelayar anda, dan masih menghantar fail anda ke endpoint pihak ketiga. Sentiasa semak panel rangkaian.
Jadi mengapa tidak semua alat berfungsi begini?
Tiga sebab. Sesetengah operasi memang memerlukan pelayan (carian terbalik, penyederhanaan kandungan, pengindeksan). Sesetengah produk lama memerlukan penulisan semula sepenuhnya. Dan sesetengah syarikat mahukan isyarat analitik yang datang daripada melihat apa yang dimuat naik oleh pengguna.
Adakah WebAssembly memperlahankan komputer saya?
Tidak secara bermakna. WASM moden berjalan hampir pada kelajuan native. Kos yang kelihatan ialah muat turun awal modul. Setelah dicache, larian seterusnya pada dasarnya percuma.
Bagaimana pula dengan fail yang sangat besar?
Memori pelayar ialah had tertinggi. Telefon dan komputer riba kelas rendah kehabisan memori jauh sebelum pelayan. Alat yang dibina dengan baik akan memberitahu anda lebih awal apabila sesuatu fail berkemungkinan terlalu besar untuk peranti, bukannya menyebabkan tab ranap.

Sumber & bacaan lanjut

  1. MDN — File API
  2. MDN — Web Workers
  3. WebAssembly.org — Use cases
Mengenai penulis
The Wux Webtools Team

Dikemas kini terakhir:

Teruskan membaca