Miksi kuvien käsittely selaimessa on voitto yksityisyydelle

Oletus on väärä

Suurimman osan viimeisistä kahdestakymmenestä vuodesta vähänkään vaativan asian tekeminen kuvalle verkossa tarkoitti sen lataamista palvelimelle. HEIC-kuvan muuntaminen, EXIF-metadatan poistaminen, faviconin luominen — jokainen näistä työkaluista toimi historiallisesti multipart-lomakkeen takana. Käyttäjä napsautti lähetä, tiedosto kulki julkisen internetin yli, ja jokin palvelin teki työn.

Tämä oletus ei ole enää teknisesti välttämätön. Selaimiin on jo vuosia sitten tullut rajapintoja, joiden avulla koko putki voidaan suorittaa paikallisesti:

• <canvas> and OffscreenCanvas pikselitason työhön
• createImageBitmap() nopeaan, taustasäikeessä tapahtuvaan purkuun
• File and Blob tiedostojen lukemiseen lähettämättä niitä minnekään
• WebAssembly kirjastoille kuten libheif, libwebp ja ffmpeg
• Web Workers pitämään käyttöliittymä responsiivisena raskaan työn aikana

Kun nämä yhdistää, tiedosto ei koskaan poistu laitteelta. Palvelin ei koskaan näe sitä. Ei ole mitään lokitettavaa, mitään vuotavaa, mitään oikeusteitse vaadittavaa.

Mitä "client-side" todella tarkoittaa

Tässä kannattaa olla täsmällinen, koska monien "yksityisten" työkalujen markkinointiteksti on väljää.

Työkalu on aidosti client-side silloin, kun sivun latautumisen jälkeen mikään osa tiedoston sisällöstä ei koskaan kulje palvelimelle. Itse sivu latautuu palvelimelta (HTML, JavaScript, ehkä WebAssembly-moduuli). Sen jälkeen tiedosto siirtyy selaimen muistiin ja pysyy siellä, kunnes suljet välilehden.

Työkalu ei ole client-side, jos se:

• POSTs the file to an /api/... endpoint
• Lähettää pikkukuvan tai esikatselun palvelimelle
• Kutsuu analytiikka-endpointia tiedoston metadatalla (mitat, nimi, hash)
• Reitittää tiedoston kolmannen osapuolen CDN:n kautta, joka palauttaa käsitellyn URL-osoitteen

Selaimesi devtools-työkalujen verkkopaneeli kertoo totuuden. Avaa se, pudota tiedosto sisään ja tarkista, mitä lähetetään. Jos näet tiedostonimesi tai tiedostokokosi lähtevän ulos, työkalu ei ole niin yksityinen kuin se väittää.

Miksi tällä on käytännössä merkitystä

Kolme ihmisryhmää hyötyy hiljaisesti, kun kuvankäsittely siirtyy selaimeen.

Journalistit, aktivistit ja tutkijat käsittelevät lähdemateriaalia, jonka vuotaminen voisi olla vaarallista. EXIF-metadata voi sisältää kuvan ottaneen laitteen GPS-koordinaatit. Selainpuolella toimiva EXIF-poistaja tarkoittaa, että alkuperäinen tiedosto ei koskaan kulje verkon yli.

Sääntelyn alaiset yritykset — terveydenhuolto, rahoitusala, juridiikka — tarvitsisivat muuten tietojenkäsittelysopimuksen työkalun ylläpitäjän kanssa. Staattinen sivu, joka tekee työn paikallisesti, ei vaadi allekirjoitettavaa DPA:ta, koska käsittelijää ei ole.

Kaikki muut saavat ilmeiset hyödyt: nopeampi läpimeno (ei lähetysaikaa), ei hosting-laskun asettamia tiedostokokorajoja, ei epäonnistumista palvelimen ollessa alhaalla.

Missä kompromissit yhä ovat

Client-side ei ole taikuutta. Siihen liittyy todellisia kustannuksia, jotka kannattaa miettiä läpi ennen sen valitsemista tiettyyn ongelmaan.

Kylmäkäynnistys on raskaampi

HEIC-purkuun tarkoitettu WebAssembly-paketti on muutamia satoja kilotavuja. WASM-muotoon käännetty ffmpeg on useita megatavuja. Ensimmäinen käynti maksaa tämän hinnan. Välimuisti auttaa, ja koodin pilkkominen auttaa vielä enemmän — lataa vain se koodekki, jonka käyttäjä oikeasti valitsi.

Käyttäjän laitteisto asettaa katon

200 megapikselin RAW-tiedostosta loppuu muisti edullisessa puhelimessa kauan ennen kuin palvelimella. Ole käyttöliittymässä rehellinen siitä, mikä on laitteella realistista.

Et voi eräajaa käyttäjien yli

Palvelinpuolen käsittely voi poistaa duplikaatteja ja jakaa kustannuksia. Jos miljoona käyttäjää muuntaa saman kuvapankkikuvan, palvelin voi käsitellä sen kerran. Client-side tekee sen miljoona kertaa. Useimmissa henkilökohtaisten työkalujen kuormissa tämä on aivan hyvä — työ on joka tapauksessa yksilöllistä — mutta asia on hyvä tiedostaa.

Jotkin operaatiot tarvitsevat palvelimen

Käänteinen kuvahaku tarvitsee indeksin. Sisällön moderointi tarvitsee mallin, joka on liian suuri toimitettavaksi käyttäjälle. Kaikki, mikä vertaa tiedostoasi korpukseen, jota et omista, tarvitsee backendin.

Pieni eettinen huomio

Jos työkalusi on aidosti client-side, sano se ääneen ja todista se. Linkitä lähdekoodiin, osoita verkkopaneeliin, selitä mikä suoritetaan missä. Ilmaisut kuten "emme tallenna tietojasi" eivät tarkoita mitään ilman arkkitehtuuria niiden tueksi — jokainen asiakasdataa koskaan vuotanut palvelinpuolen työkalu sanoi täsmälleen samaa ja tarkoitti sitä sillä hetkellä.

Myös käänteinen pätee. Jos työkalusi on palvelinpuolen työkalu, älä esitä muuta. Käyttäjät ovat oppineet tunnistamaan kaavan, ja luottamuksen menetys heidän saadessaan sinut kiinni on pysyvä.

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

💡 Kokeile tätä: Näe asiakaspuolen käsittely toiminnassa Image Compressor -työkalulla, joka pienentää kuvat kokonaan selaimessasi, joten mitään ei koskaan ladata palvelimelle.

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

Mihin tästä kannattaa jatkaa

Jos rakennat tänään pientä kuvautiliteettia, valitse oletuksena client-side ja tartu palvelimeen vain, kun sinulla on konkreettinen syy. Selain yllättää sillä, kuinka pitkälle se pystyy kantamaan työn — ja verkkoyhteyden toisessa päässä olevat ihmiset kiittävät hiljaisesti niistä tavuista, jotka eivät koskaan poistuneet heidän koneeltaan.