Κωδικοποίηση και αποκωδικοποίηση URL, εξηγημένη για προγραμματιστές
Πληκτρολογήστε ένα κενό μέσα σε ένα URL, ή μια κυριλλική λέξη, ή ένα σύμβολο «και» που ανήκει στα δεδομένα σας αντί στη ίδια τη διεύθυνση, και κάτι πρέπει να υποχωρήσει. Το διαδίκτυο εγγυάται ασφαλή μεταφορά μόνο για ένα μικρό, προβλέψιμο σύνολο χαρακτήρων ASCII. Όλα τα υπόλοιπα πρέπει να τυλιχτούν σε μια μορφή που δρομολογητές, servers και προγράμματα περιήγησης συμφωνούν όλοι μεταξύ τους. Αυτή η μορφή είναι το percent-encoding, πιο συνηθισμένα γνωστό ως κωδικοποίηση URL, και αυτή η σελίδα σας επιτρέπει να μετατρέψετε κείμενο και προς τις δύο κατευθύνσεις απευθείας στο πρόγραμμα περιήγησής σας.
Τι είναι πραγματικά το percent-encoding
Ο κανόνας είναι μηχανικός και εύκολο να τον ακολουθήσετε. Κάθε χαρακτήρας που δεν μπορεί να εμφανιστεί κυριολεκτικά αντικαθίσταται από ένα σύμβολο % ακολουθούμενο από δύο δεκαεξαδικά ψηφία που δηλώνουν την τιμή byte αυτού του χαρακτήρα. Ένα κενό γίνεται %20. Ένα σύμβολο συν γίνεται %2B. Το σύμβολο δίεσης γίνεται %23. Όταν ένας χαρακτήρας αντιστοιχίζεται σε πολλά bytes, όπως συμβαίνει με τα περισσότερα μη-ASCII κείμενα υπό UTF-8, απλώς παίρνετε πολλές τριάδες στη σειρά: το σύμβολο του ευρώ μετατρέπεται σε %E2%82%AC. Η αποκωδικοποίηση αντιστρέφει τη διαδικασία, διαβάζοντας κάθε τριάδα πίσω στο αρχικό της byte.
Αυτή η σύμβαση ορίζεται στην προδιαγραφή URI (RFC 3986) και είναι σκόπιμα βαρετή. Το βαρετό είναι το ζητούμενο. Κάθε ευπρεπής HTTP client και server στον πλανήτη υλοποιεί τους ίδιους κανόνες, οπότε ένας σύνδεσμος που κωδικοποιείται σωστά σε ένα μέρος φτάνει άθικτος παντού αλλού.
Γιατί πρέπει να υπάρχει
Τα URL μεταφέρουν δύο είδη χαρακτήρων με πολύ διαφορετικές δουλειές. Οι δεσμευμένοι χαρακτήρες όπως /, ?, #, &, = και : είναι δομικοί. Λένε σε έναν parser πού τελειώνει η διαδρομή και πού αρχίζει το query string, ή πού σταματάει μια παράμετρος και ξεκινάει η επόμενη. Αν τα πραγματικά σας δεδομένα περιέχουν ένα από αυτά τα σύμβολα, πρέπει να κωδικοποιηθεί ώστε ο parser να μην το μπερδέψει με στίξη. Μια αναφορά παραγγελίας όπως A&B/2024 που ρίχνεται ακατέργαστη σε ένα query string θα διαβαζόταν λανθασμένα ως δύο παράμετροι και ένα τμήμα διαδρομής.
Υπάρχουν επίσης οι μη ασφαλείς και μη ASCII χαρακτήρες: κενά, εισαγωγικά, γωνιακές αγκύλες, τονισμένα γράμματα, emoji, οτιδήποτε εκτός του απλού εύρους ASCII. Αυτά δεν έχουν καμία δουλειά να εμφανίζονται κυριολεκτικά σε ένα URL, είτε επειδή αλλοιώνονται κατά τη μεταφορά είτε επειδή δεν έχουν καθορισμένη αναπαράσταση. Η κωδικοποίησή τους διατηρεί τους συνδέσμους καθαρούς και προβλέψιμους αντί να αφήνει το αποτέλεσμα στην τύχη.
Πού εμφανίζεται στην πραγματική δουλειά
Τα query strings είναι η κλασική περίπτωση. Κάθε τιμή που προσαρτάτε στο ?key=... πρέπει να κωδικοποιείται ώστε η εισαγωγή του χρήστη να μην μπορεί να σπάσει τη δομή. Το ίδιο ισχύει για υποβολές φορμών HTML που στέλνονται ως application/x-www-form-urlencoded, όπου το πρόγραμμα περιήγησης κωδικοποιεί αυτόματα τις τιμές πεδίων (και, από ιστορική σύμβαση, μετατρέπει τα κενά σε + αντί για %20). Θα το συναντήσετε επίσης όταν κατασκευάζετε συνδέσμους που δείχνουν σε σελίδες με μη λατινικούς τίτλους, όταν κατασκευάζετε αιτήματα API με το χέρι, όταν περνάτε στόχους ανακατεύθυνσης ως παραμέτρους, και όταν κάνετε debug γιατί ένα αίτημα που φαίνεται μια χαρά στη γραμμή διευθύνσεων φτάνει αλλοιωμένο στον server.
encodeURI εναντίον encodeURIComponent
Η JavaScript διαθέτει δύο κωδικοποιητές, και η επιλογή του λάθος είναι ένα συνηθισμένο σφάλμα. Η διαφορά αφορά την εμβέλεια. Το encodeURIComponent προορίζεται για ένα μεμονωμένο κομμάτι δεδομένων, όπως μία τιμή query. Κωδικοποιεί σχεδόν τα πάντα, συμπεριλαμβανομένων των δεσμευμένων χαρακτήρων /, ?, :, @, &, =, + και #. Αυτό ακριβώς θέλετε όταν τα δεδομένα επιτρέπεται να περιέχουν αυτά τα σύμβολα ως συνηθισμένο κείμενο.
Το encodeURI προορίζεται για μια ολόκληρη διεύθυνση που σκοπεύετε να διατηρήσετε λειτουργική. Αφήνει ανέγγιχτους τους δομικούς χαρακτήρες, ώστε οι κάθετες, οι άνω-κάτω τελείες και τα ερωτηματικά που κρατούν το URL ενωμένο να επιβιώνουν. Χρησιμοποιήστε το όταν έχετε ένα πλήρες URL και θέλετε απλώς να καθαρίσετε κενά ή μη-ASCII χαρακτήρες· καταφύγετε στο encodeURIComponent όποτε εισάγετε μια τιμή μέσα σε ένα μεγαλύτερο URL. Ένας απλός εμπειρικός κανόνας: κωδικοποιήστε ολόκληρο τον σύνδεσμο με το encodeURI, κωδικοποιήστε τα κομμάτια που χώνετε μέσα με το encodeURIComponent.
Όλα παραμένουν στη μηχανή σας
Αυτό το εργαλείο εκτελείται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας. Το κείμενο που επικολλάτε κωδικοποιείται ή αποκωδικοποιείται τοπικά με τις ίδιες τυπικές ρουτίνες και δεν ταξιδεύει ποτέ σε server, κάτι που το κάνει ασφαλές για tokens, υπογεγραμμένες παραμέτρους ή οτιδήποτε άλλο θα προτιμούσατε να μη στείλετε μέσα στο δίκτυο. Αν εργάζεστε με άλλους μετασχηματισμούς κειμένου, ο μετατροπέας Base64 βρίσκεται ακριβώς δίπλα, και μπορείτε να περιηγηθείτε στο πλήρες σύνολο εργαλείων προγραμματιστών μας για περισσότερους καθημερινούς βοηθούς.
Συχνές ερωτήσεις
Τι σημαίνει %20 σε ένα URL;
Είναι ένα κωδικοποιημένο κενό. Ο χαρακτήρας κενού δεν επιτρέπεται κυριολεκτικά σε ένα URL, οπότε αντικαθίσταται από ένα σύμβολο percent και τη δεκαεξαδική τιμή 20, που είναι η τιμή byte ενός κενού.
Γιατί βλέπω μερικές φορές ένα σύμβολο συν αντί για %20;
Τα δεδομένα φόρμας HTML τύπου application/x-www-form-urlencoded κωδικοποιούν τα κενά ως σύμβολο συν λόγω ιστορικής σύμβασης. Σε μια κανονική διαδρομή ή query, ένα κενό κωδικοποιείται ως %20. Και τα δύο αποκωδικοποιούνται πίσω σε κενό στο σωστό τους πλαίσιο.
Πότε πρέπει να χρησιμοποιώ το encodeURIComponent αντί για το encodeURI;
Χρησιμοποιήστε το encodeURIComponent για μια μεμονωμένη τιμή που εισάγετε σε ένα URL, όπως μια παράμετρος query, γιατί κωδικοποιεί και τους δεσμευμένους χαρακτήρες. Χρησιμοποιήστε το encodeURI για μια πλήρη διεύθυνση όταν θέλετε να διατηρήσετε τις κάθετες, τις άνω-κάτω τελείες και τα ερωτηματικά που την κρατούν ενωμένη.
Αλλάζει η κωδικοποίηση URL το νόημα των δεδομένων μου;
Όχι. Η κωδικοποίηση είναι πλήρως αντιστρέψιμη. Η αποκωδικοποίηση του αποτελέσματος δίνει πίσω ακριβώς το αρχικό κείμενο, byte προς byte, εφόσον χρησιμοποιείται το ίδιο σύνολο χαρακτήρων και στις δύο πλευρές.
Πώς αντιμετωπίζονται οι μη-ASCII χαρακτήρες όπως τόνοι ή emoji;
Πρώτα μετατρέπονται σε bytes UTF-8, μετά κάθε byte γίνεται η δική του τριάδα percent. Ένα μεμονωμένο τονισμένο γράμμα ή emoji μπορεί επομένως να επεκταθεί σε πολλές τριάδες στο κωδικοποιημένο αποτέλεσμα.
Στέλνεται το κείμενό μου σε server όταν χρησιμοποιώ αυτό το εργαλείο;
Όχι. Η κωδικοποίηση και η αποκωδικοποίηση γίνονται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας. Τίποτα από όσα επικολλάτε δεν ανεβαίνει, οπότε είναι ασφαλές να το χρησιμοποιήσετε με ιδιωτικές ή ευαίσθητες συμβολοσειρές.