Bagaimana cara Anda menyandikan URL menggunakan JavaScript dengan aman sehingga dapat dimasukkan ke dalam string GET?
var myUrl = "http://example.com/index.html?param=1&anotherParam=2";
var myOtherUrl = "http://example.com/index.html?url=" + myUrl;
Saya berasumsi bahwa Anda perlu menyandikan myUrl
variabel pada baris kedua itu?
javascript
url
urlencode
nickf
sumber
sumber
Jawaban:
Lihat fungsi built-in komponen encodeURIC (str) dan encodeURI (str) .
Dalam kasus Anda, ini harus bekerja:
sumber
escape
juga merupakan opsi yang valid.encodeURI
tidak benar-benar aman untuk pengkodean URL.:
,/
,@
dll ini 2 metode tidak digunakan dipertukarkan, Anda harus tahu apa yang Anda pengkodean menggunakan metode yang tepat.Anda memiliki tiga opsi:
escape()
tidak akan menyandikan:@*/+
encodeURI()
tidak akan menyandikan:~!@#$&*()=:/,;?+'
encodeURIComponent()
tidak akan menyandikan:~!*()'
Tetapi dalam kasus Anda, jika Anda ingin mengirimkan URL ke
GET
parameter halaman lain, Anda harus menggunakanescape
atauencodeURIComponent
, tetapi tidakencodeURI
.Lihat pertanyaan Stack Overflow Praktik terbaik: escape, atau encodeURI / encodeURICon komponen untuk diskusi lebih lanjut.
sumber
%uxxx
.Tetap dengan
encodeURIComponent()
. FungsiencodeURI()
ini tidak mengganggu untuk menyandikan banyak karakter yang memiliki kepentingan semantik dalam URL (mis. "#", "?", Dan "&").escape()
sudah tidak digunakan lagi, dan tidak perlu repot untuk menyandikan karakter "+", yang akan ditafsirkan sebagai ruang yang disandikan di server (dan, seperti yang ditunjukkan oleh orang lain di sini, tidak benar menyandi URL karakter non-ASCII).Ada penjelasan yang
encodeURI()
encodeURIComponent()
bagus tentang perbedaan antara dan di tempat lain. Jika Anda ingin menyandikan sesuatu sehingga bisa dimasukkan dengan aman sebagai komponen URI (misalnya sebagai parameter string kueri), Anda ingin menggunakannyaencodeURIComponent()
.sumber
Jawaban terbaik adalah dengan menggunakan
encodeURIComponent
pada nilai-nilai dalam string (dan tempat lain).Namun, saya menemukan bahwa banyak API ingin mengganti "" dengan "+" jadi saya harus menggunakan yang berikut:
escape
diimplementasikan secara berbeda di browser yang berbeda danencodeURI
tidak menyandikan banyak karakter (seperti # dan bahkan /) - itu dibuat untuk digunakan pada URI / URL lengkap tanpa merusaknya - yang tidak super membantu atau aman.Dan seperti yang ditunjukkan oleh @Jochem di bawah ini, Anda mungkin ingin menggunakan
encodeURIComponent()
nama folder (masing-masing), tetapi untuk alasan apa pun, API ini sepertinya tidak ingin+
dalam nama folder sehinggaencodeURIComponent
karya lama yang biasa sangat bagus.Contoh:
sumber
http://somedomain/this dir has spaces/info.php?a=this has also spaces
. Itu harus dikonversi ke:http://somedomain/this%20dir%20has%spaces/info.php?a=this%20has%20also%20spaces
tetapi banyak implementasi memungkinkan '% 20' di querystring digantikan oleh '+'. Namun demikian, Anda tidak dapat mengganti '% 20' dengan '+' di bagian jalur URL, ini akan menghasilkan kesalahan Tidak Ditemukan kecuali Anda memiliki direktori dengan+
bukan spasi.encodeURIComponent('+')
akan memberi Anda%2B
, jadi Anda harus menggunakan dua ekspresi reguler ... yang saya kira agak mengapa ini berhasil, karena '+' are '' dikodekan secara berbeda pada akhirnya.Jika Anda menggunakan jQuery saya akan pergi untuk
$.param
metode. Ini menyandikan URL bidang pemetaan objek ke nilai, yang lebih mudah dibaca daripada memanggil metode pelarian pada setiap nilai.sumber
encodeURIComponent () adalah caranya.
TETAPI Anda harus ingat bahwa ada sedikit perbedaan dari versi php
urlencode()
dan seperti yang disebutkan oleh @CMS, itu tidak akan menyandikan setiap karakter. Cowok di http://phpjs.org/functions/urlencode/ membuat js setara denganphpencode()
:sumber
Untuk menyandikan URL, seperti yang telah dikatakan sebelumnya, Anda memiliki dua fungsi:
dan
Alasan keduanya ada adalah bahwa yang pertama mempertahankan URL dengan risiko meninggalkan terlalu banyak hal yang tidak terhindarkan, sedangkan yang kedua mengkodekan semua yang dibutuhkan.
Dengan yang pertama, Anda dapat menyalin URL yang baru saja lolos ke bilah alamat (misalnya) dan itu akan berfungsi. Namun '&' yang tidak terhapus akan mengganggu pembatas bidang, '=' akan mengganggu nama dan nilai bidang, dan '+' akan terlihat seperti spasi. Tetapi untuk data sederhana ketika Anda ingin mempertahankan sifat URL dari apa yang Anda melarikan diri, ini berfungsi.
Yang kedua adalah semua yang perlu Anda lakukan untuk memastikan tidak ada di string Anda yang mengganggu URL. Itu membuat berbagai karakter yang tidak penting tidak terhapus sehingga URL tetap dapat dibaca manusia mungkin tanpa gangguan. URL yang disandikan dengan cara ini tidak akan lagi berfungsi sebagai URL tanpa melepaskannya.
Jadi jika Anda dapat meluangkan waktu, Anda selalu ingin menggunakan encodeURIComponent () - sebelum menambahkan pasangan nama / nilai, enkode nama dan nilai menggunakan fungsi ini sebelum menambahkannya ke string kueri.
Saya mengalami kesulitan menemukan alasan untuk menggunakan encodeURI () - Saya akan menyerahkannya kepada orang yang lebih pintar.
sumber
Hal serupa saya coba dengan javascript biasa
sumber
Cara yang elegan
Menurut pendapat saya yang sederhana cara paling elegan untuk menyandikan params query adalah membuat objek dengan params like
dan kemudian menyandikannya menggunakan:
seperti yang disebutkan dalam jawaban ini: https://stackoverflow.com/a/53171438/7284582
sumber
Untuk mencegah pengkodean ganda, sebaiknya uraikan kode url sebelum melakukan pengkodean (jika Anda berurusan dengan url yang dimasukkan pengguna misalnya, yang mungkin sudah disandikan).
Katakanlah kita memiliki
abc%20xyz 123
input (satu spasi sudah disandikan):sumber
Apa itu pengkodean URL:
URL harus dikodekan ketika ada karakter khusus yang terletak di dalam URL. Sebagai contoh:
Kita dapat mengamati dalam contoh ini bahwa semua karakter kecuali string
notEncoded
dikodekan dengan tanda%. Pengkodean URL juga dikenal sebagai pengodean persentase karena ia lolos dari semua karakter khusus dengan%. Kemudian setelah tanda% ini setiap karakter khusus memiliki kode unikMengapa kami membutuhkan pengodean URL:
Karakter tertentu memiliki nilai khusus dalam string URL. Misalnya,? karakter menunjukkan awal dari string kueri. Agar berhasil menemukan sumber daya di web, perlu dibedakan antara saat karakter dimaksudkan sebagai bagian dari string atau bagian dari struktur url.
Bagaimana kami dapat mencapai penyandian URL di JS:
JS menawarkan banyak fungsi utilitas bawaan yang dapat kita gunakan untuk menyandikan URL dengan mudah. Ini adalah dua opsi yang mudah:
encodeURIComponent()
: Mengambil komponen URI sebagai argumen dan mengembalikan string URI yang disandikan.encodeURI()
: Mengambil URI sebagai argumen dan mengembalikan string URI yang disandikan.Contoh dan peringatan:
Berhati-hatilah untuk tidak meneruskan seluruh URL (termasuk skema, mis. Https: //) ke
encodeURIComponent()
. Ini sebenarnya dapat mengubahnya menjadi URL yang tidak fungsional. Sebagai contoh:Kita dapat mengamati jika kita meletakkan seluruh URL di
encodeURIComponent
mana garis miring foward (/) juga dikonversi ke karakter khusus. Ini akan menyebabkan URL tidak berfungsi dengan benar lagi.Karena itu (sesuai namanya) gunakan:
encodeURIComponent
pada bagian tertentu dari URL yang ingin Anda enkode.encodeURI
pada keseluruhan URL yang ingin Anda enkode.sumber
Tidak ada yang berhasil untuk saya. Yang saya lihat hanyalah HTML halaman login, kembali ke sisi klien dengan kode 200. (302 pada awalnya tetapi permintaan Ajax yang sama memuat halaman login di dalam permintaan Ajax lain, yang seharusnya menjadi redirect daripada memuat plain teks dari halaman login).
Di pengontrol login, saya menambahkan baris ini:
Dan dalam penangan Ajax global, saya melakukan ini:
Sekarang saya tidak memiliki masalah, dan itu berfungsi seperti pesona.
sumber
Encode URL String
sumber
Berikut ini adalah DEMO LANGSUNG dari
encodeURIComponent()
dandecodeURIComponent()
JS dibangun pada fungsi:sumber
Anda dapat menggunakan pustaka esapi dan menyandikan url Anda menggunakan fungsi di bawah ini. Fungsi memastikan bahwa '/' tidak hilang untuk penyandian sementara sisa isi teks dikodekan:
https://www.owasp.org/index.php/ESAPI_JavaScript_Readme
sumber
Gunakan
fixedEncodeURIComponent
fungsi untuk sepenuhnya mematuhi RFC 3986 :sumber
Anda tidak boleh menggunakannya
encodeURIComponent()
secara langsung.Lihatlah RFC3986: Uniform Resource Identifier (URI): Generic Syntax
Karakter yang dicadangkan ini dari definisi URI di RFC3986 TIDAK DILAKUKAN oleh
encodeURIComponent()
.Dokumen Web MDN: komponen encodeURIC ()
Gunakan fungsi MDN Web Documents ...
sumber