Γιατί η επεξεργασία εικόνων στο πρόγραμμα περιήγησης είναι κέρδος για την ιδιωτικότητα

Η προεπιλεγμένη προσδοκία είναι λανθασμένη

Για το μεγαλύτερο μέρος των τελευταίων είκοσι ετών, το να κάνεις οτιδήποτε μη τετριμμένο με μια εικόνα στο web σήμαινε να τη μεταφορτώσεις σε έναν διακομιστή. Να μετατρέψεις μια φωτογραφία HEIC, να αφαιρέσεις τα EXIF metadata της, να δημιουργήσεις ένα favicon — κάθε ένα από αυτά τα εργαλεία ιστορικά βρισκόταν πίσω από μια φόρμα multipart. Ο χρήστης έκανε κλικ στο μεταφόρτωση, το αρχείο ταξίδευε στο δημόσιο διαδίκτυο και ένας διακομιστής κάπου έκανε τη δουλειά.

Αυτή η προεπιλογή δεν είναι πλέον τεχνικά απαραίτητη. Τα προγράμματα περιήγησης διέθεσαν εδώ και χρόνια APIs που κάνουν ολόκληρο το pipeline να εκτελείται τοπικά:

• <canvas> and OffscreenCanvas για εργασία σε επίπεδο pixel
• createImageBitmap() για γρήγορη αποκωδικοποίηση εκτός κύριου νήματος
• File and Blob για ανάγνωση μεταφορτωμένων αρχείων χωρίς να σταλούν πουθενά
• WebAssembly για βιβλιοθήκες όπως libheif, libwebp and ffmpeg
• Web Workers για να παραμένει το UI αποκρίσιμο όσο εκτελείται βαριά εργασία

Αν τα συνδυάσετε, το αρχείο δεν φεύγει ποτέ από τη συσκευή. Ο διακομιστής δεν το βλέπει ποτέ. Δεν υπάρχει τίποτα για καταγραφή, τίποτα για διαρροή, τίποτα που να μπορεί να απαιτηθεί με δικαστική εντολή.

Τι σημαίνει πραγματικά το "client-side"

Αξίζει να είμαστε ακριβείς, επειδή το marketing copy σε πολλά «ιδιωτικά» εργαλεία είναι χαλαρό.

Ένα εργαλείο είναι πραγματικά client-side όταν, αφού φορτωθεί η σελίδα, κανένα μέρος του περιεχομένου του αρχείου δεν ταξιδεύει ποτέ σε διακομιστή. Η ίδια η σελίδα φορτώνεται από έναν διακομιστή (HTML, JavaScript, ίσως ένα WebAssembly module). Μετά από αυτό, το αρχείο σας μπαίνει στη μνήμη του προγράμματος περιήγησης και μένει εκεί μέχρι να κλείσετε την καρτέλα.

Ένα εργαλείο δεν είναι client-side αν:

• Κάνει POST το αρχείο σε ένα endpoint /api/...
• Στέλνει μια μικρογραφία ή προεπισκόπηση σε διακομιστή
• Καλεί ένα analytics endpoint με metadata αρχείου (διαστάσεις, όνομα, hash)
• Δρομολογεί το αρχείο μέσω CDN τρίτου μέρους που επιστρέφει ένα επεξεργασμένο URL

Ο πίνακας δικτύου στα devtools του προγράμματος περιήγησής σας λέει την αλήθεια. Ανοίξτε τον, ρίξτε μέσα ένα αρχείο και ελέγξτε τι μεταφορτώνεται. Αν δείτε το όνομα του αρχείου σας ή το μέγεθός του να φεύγει προς τα έξω, το εργαλείο δεν είναι τόσο ιδιωτικό όσο ισχυρίζεται.

Γιατί αυτό έχει σημασία στην πράξη

Τρεις ομάδες ανθρώπων ωφελούνται αθόρυβα όταν η επεξεργασία εικόνας μετακινείται στο πρόγραμμα περιήγησης.

Δημοσιογράφοι, ακτιβιστές και ερευνητές χειρίζονται υλικό πηγών που θα ήταν επικίνδυνο αν διέρρεε. Τα EXIF metadata μπορεί να περιλαμβάνουν συντεταγμένες GPS από τη συσκευή που τράβηξε τη φωτογραφία. Ένα εργαλείο αφαίρεσης EXIF στην πλευρά του προγράμματος περιήγησης σημαίνει ότι το αρχικό αρχείο δεν διασχίζει ποτέ το δίκτυο.

Εταιρείες υπό κανονιστικό πλαίσιο — υγεία, χρηματοοικονομικά, νομικές υπηρεσίες — διαφορετικά θα χρειάζονταν συμφωνία επεξεργασίας δεδομένων με όποιον λειτουργεί το εργαλείο. Μια στατική σελίδα που κάνει τη δουλειά τοπικά δεν έχει DPA για υπογραφή, επειδή δεν υπάρχει εκτελών την επεξεργασία.

Όλοι οι υπόλοιποι παίρνουν τα προφανή οφέλη: ταχύτερη ολοκλήρωση (χωρίς χρόνο μεταφόρτωσης), κανένα όριο μεγέθους αρχείου που να επιβάλλεται από τον λογαριασμό φιλοξενίας, καμία αποτυχία όταν ο διακομιστής είναι εκτός λειτουργίας.

Πού εξακολουθούν να υπάρχουν οι συμβιβασμοί

Το client-side δεν είναι μαγεία. Υπάρχουν πραγματικά κόστη που πρέπει να σκεφτείτε πριν το επιλέξετε για ένα συγκεκριμένο πρόβλημα.

Το cold start είναι βαρύτερο

Ένα WebAssembly bundle για αποκωδικοποίηση HEIC είναι μερικές εκατοντάδες kilobytes. Το ffmpeg μεταγλωττισμένο σε WASM είναι αρκετά megabytes. Η πρώτη επίσκεψη πληρώνει αυτό το κόστος. Η προσωρινή αποθήκευση βοηθά, και το code-splitting βοηθά ακόμη περισσότερο — φορτώστε μόνο το codec που επέλεξε πραγματικά ο χρήστης.

Το hardware του χρήστη θέτει το όριο

Ένα RAW αρχείο 200 megapixel θα ξεμείνει από μνήμη σε ένα οικονομικό τηλέφωνο πολύ πριν ξεμείνει σε έναν διακομιστή. Να είστε ειλικρινείς στο UI σχετικά με το τι είναι ρεαλιστικό στη συσκευή.

Δεν μπορείτε να κάνετε batching μεταξύ χρηστών

Η server-side επεξεργασία μπορεί να αφαιρεί διπλότυπα και να επιμερίζει το κόστος. Αν ένα εκατομμύριο χρήστες μετατρέψουν την ίδια stock εικόνα, ένας διακομιστής μπορεί να την επεξεργαστεί μία φορά. Το client-side το κάνει ένα εκατομμύριο φορές. Για τους περισσότερους φόρτους εργασίας προσωπικών εργαλείων αυτό είναι εντάξει — η εργασία είναι ούτως ή άλλως μοναδική — αλλά αξίζει να το γνωρίζετε.

Κάποιες λειτουργίες χρειάζονται διακομιστή

Η αντίστροφη αναζήτηση εικόνας χρειάζεται index. Το content moderation χρειάζεται ένα μοντέλο που είναι πολύ μεγάλο για να αποσταλεί. Οτιδήποτε συγκρίνει το αρχείο σας με ένα corpus που δεν σας ανήκει χρειάζεται backend.

Ένα μικρό ηθικό σημείο

Αν το εργαλείο σας είναι πραγματικά client-side, πείτε το καθαρά και αποδείξτε το. Παραπέμψτε στον πηγαίο κώδικα, δείξτε τον πίνακα δικτύου, εξηγήστε τι εκτελείται πού. Φράσεις όπως «δεν αποθηκεύουμε τα δεδομένα σας» δεν σημαίνουν τίποτα χωρίς αρχιτεκτονική που να τις υποστηρίζει — κάθε server-side εργαλείο που διέρρευσε ποτέ δεδομένα πελατών είπε επίσης ακριβώς αυτό και το εννοούσε τότε.

Ισχύει και το αντίστροφο. Αν το εργαλείο σας είναι server-side, μην προσποιείστε το αντίθετο. Οι χρήστες έχουν μάθει να αναγνωρίζουν το μοτίβο, και το πλήγμα στην εμπιστοσύνη όταν σας πιάσουν είναι μόνιμο.

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

💡 Δοκιμάστε αυτό: Δείτε την επεξεργασία στην πλευρά του πελάτη σε δράση με το Image Compressor, το οποίο συρρικνώνει εικόνες εξ ολοκλήρου στο πρόγραμμα περιήγησής σας, ώστε τίποτα να μην ανεβαίνει ποτέ σε διακομιστή.

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

Πού να πάτε από εδώ

Αν φτιάχνετε σήμερα ένα μικρό εργαλείο εικόνας, ξεκινήστε με προεπιλογή το client-side και καταφύγετε σε διακομιστή μόνο όταν έχετε συγκεκριμένο λόγο. Το πρόγραμμα περιήγησης θα σας εκπλήξει με το πόσο μακριά μπορεί να μεταφέρει τη δουλειά — και οι άνθρωποι στην άλλη άκρη της σύνδεσης δικτύου θα σας ευχαριστούν αθόρυβα για τα bytes που δεν έφυγαν ποτέ από το μηχάνημά τους.