Alat pembangun · URL pengekod & penyahkod
Mengapa + menjadi ruang apabila anda menyahkod rentetan pertanyaan dan apabila tidak
· Bagaimana ia berfungsi
pengekodan url javascript aliran kerja pembangun
Sama ada + bermakna ruang bergantung pada penyahkod yang anda panggil. Siaran ini menerangkan cara decodeURIComponent, URLSearchParams dan rangka kerja pelayan setiap merawat + dan cara mengelak daripada menukar tambah sebenar kepada ruang.
Mengapa + menjadi ruang apabila anda menyahkod rentetan pertanyaan dan apabila tidak
HTML penyerahan borang menggunakan format application/x-www-form-urlencoded, dengan ruang menjadi tambah. Pelayan yang menerima nama=Alice+Smith menggantikan setiap tambah dengan ruang sebelum mengekstrak nilai. Apabila tambah sebenar tergolong dalam data, seperti dalam pengiraan 5+3, ia tiba di pelayan sebagai 5 3 selepas langkah penyahkodan borang. Penukaran yang tidak kelihatan ini adalah punca kekeliruan.
JavaScript penyahkodan menghasilkan hasil yang berbeza bergantung pada fungsi yang anda gunakan. URLSearchParams menganggap tambah sebagai ruang, padanan kelakuan pelayan. Tetapi daun decodeURIComponent ditambah tidak disentuh, merawatnya secara literal. Asimetri antara fungsi inilah yang menyebabkan input yang sama menyahkod secara berbeza. Seorang pembangun yang mengharapkan kedua-dua penyahkod menghasilkan hasil yang sama mendapati mereka tidak.
Dua pengekodan yang kelihatan sama — RFC 3986 peratus pengekodan berbanding aplikasi/x-www-form-urlencoded
Dua piawaian pengekodan kelihatan serupa tetapi berfungsi secara berbeza. RFC 3986 mentakrifkan pengekodan peratus: mana-mana aksara menjadi %HH. Ruang menjadi %20. Standard application/x-www-form-urlencoded menambah trengkas: ruang boleh ditambah. Sama ada berfungsi dalam konteks bentuk, tetapi tambah adalah pilihan dan khusus untuk standard itu. Mereka adalah domain yang berbeza dengan penampilan yang serupa.
Memanggil decodeURIComponent terpakai RFC 3986 penyahkodan sahaja. Ia berbunyi %20 sebagai ruang dan tambah sebagai tambah literal. URLSearchParams menggunakan peraturan penyahkodan borang: peratus-pelepasan aksara menjadi aksaranya dan ditambah menjadi ruang. Kedua-dua fungsi menyelesaikan masalah yang sama dalam domain yang berbeza. Mencampurkannya menyebabkan sama ada tambah sebenar hilang, atau ruang menjadi tambah dan gagal ditukar.
decodeURIKomponen daun + sahaja; URLSearchParams mengubahnya menjadi ruang — dua JavaScript gelagat dibandingkan
Tingkah laku pelayan berbeza-beza, yang menambah masalah. Rails atau Django secara automatik menggunakan peraturan borang: tambah menjadi ruang. Tetapi mengekstrak dan menyahkod rentetan pertanyaan mentah secara manual dengan daun penyahkod URL ditambah utuh. Nilai yang sama diproses oleh rangka kerja yang berbeza menghasilkan hasil yang berbeza. Kod pelayan sering mengendalikan perkara ini secara tersirat, menyembunyikan isu sehingga anda menulis penyahkod tersuai.
Contoh: medan nombor telefon menyimpan +1-555-0100 dengan tambah sebagai kod negara. Borang HTML mengekodnya sebagai %2B1-555-0100 kerana JavaScript mengekod tambah sebagai %2B. Pelayan menerima ini. Jika ia menggunakan penyahkodan borang, %2B menjadi tambah dan nilainya betul. Jika proksi mengekod jalur, memanggil decodeURIComponent pada hasil carian menghasilkan +1-555-0100. Setiap lapisan menyahkod sekali.
Perkara yang dilakukan oleh pelayan — gelagat rangka kerja biasa dalam rentetan pertanyaan dan badan permintaan, diterangkan secara umum
JavaScript boleh mengekod nilai menggunakan encodeURIComponent. Diberi a+b, ia menghasilkan a%2Bb. Apabila rentetan yang dikodkan itu mencapai pelayan atau penyahkod sedar bentuk, %2B menyahkod sebagai tambah dan hasilnya betul. Jika anda mengekod menggunakan peraturan borang sebaliknya, ruang menjadi tambah dan tambah sebenar menjadi %2B. Sama ada cara, pengekodan menghasilkan% 2Bb. Tafsiran bergantung pada peraturan penyahkodan yang digunakan.
Uji perjalanan pergi dan balik: mulakan dengan a+b. Encode dengan encodeURIComponent untuk mendapatkan%2Bb. Nyahkod a%2Bb dengan decodeURIComponent dan pulihkan a+b. Lulus a+b ke URLSearchParams: ia menganggap tambah sebagai ruang, menghasilkan b. Lulus a%2Bb kepada URLSearchParams untuk mendapatkan a+b kembali. Input yang sama didekod dua cara menghasilkan output yang berbeza bergantung pada penyahkod yang anda gunakan.
Contoh berfungsi: 'a+b' dan 'a%2Bb' melalui kedua-dua penyahkod — empat hasil dalam jadual
Kesilapan biasa mengikuti secara langsung. Seorang pembangun menyahkod dengan decodeURIComponent dan tertanya-tanya mengapa data borang masuk dengan tambah sebenar rosak. Mereka sepatutnya menggunakan URLSearchParams. Sebaliknya, seseorang menggunakan URLSearchParams apabila mereka harus menggunakan decodeURIComponent, dan setiap tambah literal hilang. Pengekodan dua kali menghasilkan %252B, memerlukan padanan pasangan pengekod-penyahkod untuk menyahkod dengan betul.
Satu lagi kesilapan ialah membina rentetan pertanyaan dengan tangan sebagai ?q=value tanpa pengekodan. Mana-mana ampersand atau sama dalam nilai secara senyap mencipta parameter baharu. Pelayar tidak meneka penggabungan; ia memperlakukan hasilnya sebagai bentuk yang betul. Sahaja pengekodan yang disengajakan dengan encodeURIComponent menghalang perkara ini. URL pengekod & penyahkod menunjukkan ketiga-tiga fungsi, mendedahkan perkara yang dihasilkan oleh setiap satu.
Kesilapan biasa — penyahkodan dua kali atau pengekodan ruang sebagai + dalam segmen laluan
Peraturan pengekodan borang dipanggil application/x-www-form-urlencoded kerana ia menerangkan pengepala Jenis Kandungan HTTP badan permintaan. HTML borang tanpa muat naik fail menghantar badan dalam format ini. Rentetan pertanyaan dalam URL juga menggunakan konvensyen ini, walaupun secara teknikal ia tidak mempunyai standard pengekodan rasmi. URL spesifikasi menganggap pertanyaan sebagai legap; ditambah makna tidak diwajibkan. Tetapi dalam aplikasi web, tambah biasanya bermaksud ruang.
Untuk menjamin tingkah laku yang betul, mengekod secara sengaja dan menyahkod dengan fungsi padanan. Jika anda mengekod dengan encodeURIComponent, nyahkod dengan decodeURIComponent. Jika membaca HTML data borang atau meminta badan dalam format borang, gunakan URLSearchParams. Jangan sesekali meneka berdasarkan rupa. Rentetan seperti a+b adalah samar-samar. Penyahkod tidak boleh ditukar ganti.
Perkara ini tidak meliputi — data borang berbilang bahagian dan badan permintaan JSON
Data borang berbilang bahagian, badan permintaan JSON dan piawaian lain mempunyai peraturan pengekodan yang berasingan. JSON tidak menggunakan tambah untuk ruang atau pengekodan peratus; ia menggunakan Unicode escapes. Multipart menggunakan sempadan yang berbeza. Artikel ini merangkumi rentetan pertanyaan dan badan berkod bentuk sahaja, kerana di situlah kesamaran tambah muncul. Sentiasa semak pengepala Jenis Kandungan dan RFC yang mentakrifkannya.
Sentiasa kodkan tambah literal sebagai %2B apabila ia tergolong dalam nilai pertanyaan. URL pengekod & penyahkod menunjukkan cara tambah dilindungi sebagai %2B dalam mod komponen, berasingan daripada ruang yang menjadi %20. Lulus a+b dan a%2Bb melalui setiap mod, kemudian periksa hasilnya. Perbandingan itu menunjukkan mengapa input yang sama menyahkod secara berbeza. Perbezaannya ialah tingkah laku yang betul dari dua piawaian yang berbeza.
Bawa pulang: sentiasa mengekod tambah literal sebagai %2B — cara pengekod & penyahkod URL menunjukkan rupa nilai sebagai nilai pertanyaan yang dikodkan peratus
Bawa pulang: tambah dalam rentetan pertanyaan ialah bentuk pengekodan trengkas untuk ruang, bukan tambah literal, melainkan ia datang daripada pengekodan yang melindunginya sebagai %2B. Penyahkod yang salah kehilangan perlindungan itu. URLSearchParams paling selamat dalam JavaScript moden; ia mengendalikan pengekodan borang dan memberikan akses parameter bernama. Untuk rentetan mentah, encodeURIComponent melindungi segala-galanya; decodeURIComponent mentafsir %20 dan peratus tetapi merawat tambah secara literal.
Uji ini: bina ?x=a+b dengan tangan dan tampal ke dalam URL pengekod & penyahkod. Periksa dan tonton URLSearchParams membahagikannya kepada parameter x dengan nilai a b. Tampal ?x=a%2Bb dan lihat nilai a+b. Gunakan encodeURIComponent untuk membina URL dan bandingkan. Pengesahan visual itu menjelaskan peraturan: peraturan borang menggunakan tambah, pengekodan peratus menggunakan %20, mencampurkannya adalah sebab tambah hilang ke angkasa.