Alat pembangun · URL pengekod & penyahkod
encodeURI vs encodeURIComponent: aksara yang masing-masing dibiarkan begitu sahaja
· Bagaimana ia berfungsi
pengekodan url javascript aliran kerja pembangun
Dua fungsi JavaScript berbeza dengan tepat sebelas aksara dan memilih yang salah sama ada memecahkan URL atau gagal melepaskan nilai. Siaran ini menerangkan set dan memberikan peraturan yang anda boleh ingat.
Carian yang mengembalikan segala-galanya kerana & dalam 'R&D' membahagikan pertanyaan — pepijat konkrit daripada fungsi yang salah
Carian untuk R&D secara tidak sengaja boleh mengembalikan hasil untuk R jika kod membina ?q=R&D dengan tangan. Ampersand ialah pemisah antara parameter pertanyaan; ia tidak dipelihara sebagai sebahagian daripada q melainkan anda mengekod nilainya. Memilih encodeURI untuk bahagian kecil itu ialah ralat, bukan pepijat pelayan. Pilihan paling selamat dalam kod aplikasi selalunya URLSearchParams, tetapi memahami dua primitif JavaScript menjadikan kod sedia ada lebih mudah untuk nyahpepijat.
Perkara yang dikongsi oleh kedua-dua fungsi — set tanpa simpanan yang tidak pernah mereka sentuh dan pengekodan peratus UTF-8 yang kedua-duanya digunakan
Kedua-dua kaedah meninggalkan ASCII huruf, digit dan tanda baca tidak terpelihara - _ . ! ~ * ' ( ) tidak disentuh di bawah peraturan pengekodan JavaScript. Mereka menukar aksara bukan ASCII kepada UTF-8 bait sebelum menulis peratus tiga kali ganda: é menjadi %C3%A9, bukan satu Latin-1 byte. Mereka juga mengekod ruang sebagai %20. Pengekodan peratusan ialah tentang memelihara struktur URI; ia bukan HTML pelepasan aksara, pengesahan input atau perlindungan terhadap skrip berniat jahat pada halaman penerima.
Sebelas aksara sahaja mengekodURI mengekalkan — ; , / ? : @ & = + $ # dan mengapa setiap satu mempunyai makna struktur dalam URL
encodeURI juga mengekalkan sebelas aksara struktur yang mengekodURIComponent mengekod: ; , / ? : @ & = + $ #. Untuk alamat yang lengkap, membiarkan garis miring dan tanda soal sahaja mengekalkan laluan dan sintaks pertanyaannya. Untuk nilai pertanyaan, membiarkan & atau = melalui akan mengubah senarai parameter, manakala # yang tidak dilepaskan boleh memulakan serpihan. Fungsi berbeza dengan tepat kerana satu bertujuan untuk seluruh alamat dan satu lagi untuk komponen di dalam alamat tersebut.
Peraturan yang memegang: nilai mendapat encodeURIKomponen, URL lengkap mendapat encodeURI — dan sebab 'lengkap URL' lebih jarang daripada yang didengari
Nilai hampir selalu mendapat encodeURIComponent; alamat lengkap dan sudah berstruktur ialah kes yang kurang biasa untuk encodeURI. Untuk URL yang anda bina secara pengaturcaraan, gunakan URL API untuk mengendalikan parameter laluan dan carian dan bukannya menggabungkan gabungan bahagian yang dikodkan dan mentah. Jangan kodkan keseluruhan URL dengan encodeURIComponent dan kemudian harapkan garis miring dan titik bertindih untuk terus bertindak sebagai pemisah. Sebaliknya, jangan suapkan istilah pertanyaan pengguna melalui encodeURI dan biarkan ampersandnya aktif.
Contoh yang berfungsi: rentetan yang sama melalui kedua-dua fungsi — jadual output untuk nilai dengan ruang, &, / dan aksen
Ambil R&D / kafe sebagai satu nilai pertanyaan. encodeURIComponent mengembalikan R%26D%20%2F%20caf%C3%A9, melindungi ampersand dan slash. encodeURI mengembalikan R&D%20/%20caf%C3%A9, memelihara tanda baca struktur; awalan ?q= yang naif kini akan mencipta pembatas yang tidak diingini. Kedua-duanya mengekod ruang dan aksen, jadi ujian yang sahaja menggunakan "hello world" terlepas perbezaan penting. Bandingkan rentetan yang dijana dalam ToolAcre, kemudian tampalkannya ke dalam penghurai URL dan semak bilangan parameter pertanyaan yang muncul.
Kesilapan biasa — mengekodkan URL penuh dengan pengekodanURIKomponen dan penyahkodan dengan rakan sejawat yang salah
Pengekodan penuh URL sebagai satu komponen menghasilkan %3A%2F%2F di mana pengguna menjangkakan ://. Menyahkod seluruh alamat sebelum mengesahkannya boleh memperkenalkan semula pemisah tersimpan dengan makna baharu. Elakkan juga mengekod dua kali nilai yang sudah mengandungi %26: tanda peratus itu sendiri boleh menjadi %25, jadi lapisan penyahkod kedua mungkin menukar makna sekali lagi. Gandingkan encodeURIComponent dengan decodeURIComponent untuk komponen dan layan peratusan pecah bentuk yang salah sebagai ralat input.
Perkara yang tidak dilindungi ini — pengekodan borang dengan + dan bina URL dengan URLSearchParams
HTML pengekodan pertanyaan borang menggunakan tanda tambah untuk ruang dalam aplikasi/x-www-form-urlencoded, yang berbeza daripada output %20 bagi kedua-dua fungsi ini. URLSearchParams mengendalikan peraturan borang tersebut untuk anda. Artikel ini tidak merangkumi penormalan laluan, penukaran nama hos Unicode atau memutuskan sama ada URL yang dinyahkod selamat untuk diminta; Pengekodan URL ialah langkah perwakilan, bukan dasar kebenaran.
Bawa pulang: mengekod bahagian, bukan keseluruhan — cara pengekod & penyahkod URL menunjukkan kedua-dua mod supaya anda boleh melihat perbezaan pada input anda sendiri
Sempadan yang tidak dapat dilupakan ialah bahagian berbanding keseluruhan: nilai parameter ialah sebahagian, jadi gunakan encodeURIComponent atau URLSearchParams. URL pengekod & penyahkod menunjukkan kedua-dua fungsi pelayar untuk rentetan yang sama dan mengekalkan percubaan setempat. Uji input yang mengandungi &, =, #, slash dan aksen sebelum memutuskan bahawa dua pengekod boleh ditukar ganti.