Pertanyaan Encode URL dalam JavaScript?


Bagaimana Anda dengan aman menyandikan URL menggunakan JavaScript 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 mengkodekan myUrl variabel pada baris kedua?


2121
2017-12-02 02:37


asal


Jawaban:


Periksa fungsi bawaan encodeURIComponent(str) dan encodeURI(str).
Dalam kasus Anda, ini seharusnya berfungsi:

var myOtherUrl = 
       "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

2489
2017-12-02 02:43



Anda memiliki tiga opsi:

  • escape() tidak akan menyandikan: @*/+

  • encodeURI() tidak akan menyandikan: ~!@#$&*()=:/,;?+'

  • encodeURIComponent() tidak akan menyandikan: ~!*()'

Tetapi dalam kasus Anda, jika Anda ingin lulus URL menjadi GET parameter halaman lain, Anda harus menggunakan escape atau encodeURIComponent, tapi tidak encodeURI.

Lihat pertanyaan Stack Overflow Praktik terbaik: melarikan diri, atau encodeURI / encodeURIComponent untuk diskusi lebih lanjut.


1373
2017-12-02 02:49



Tetap dengan encodeURIComponent(). Fungsi itu encodeURI() tidak perlu repot menyandikan banyak karakter yang memiliki arti penting semantik dalam URL (mis. "#", "?", dan "&"). escape() tidak lagi digunakan, dan tidak mengganggu untuk menyandikan karakter "+", yang akan diinterpretasikan sebagai ruang yang disandikan pada server (dan, seperti yang ditunjukkan oleh orang lain di sini, tidak mengkodekan karakter non-ASCII dengan benar URL).

Ada yang bagus penjelasan tentang perbedaan antara encodeURI() dan encodeURIComponent() di tempat lain. Jika Anda ingin menyandikan sesuatu sehingga dapat dimasukkan sebagai komponen URI (mis. Sebagai parameter string kueri), Anda ingin menggunakan encodeURIComponent().


156
2018-05-29 23:54



Secara pribadi, saya menemukan bahwa banyak API ingin mengganti "" dengan "+" jadi saya menggunakan yang berikut:

encodeURIComponent(value).replace(/%20/g,'+');

escape diimplementasikan secara berbeda di berbagai browser dan encodeURI tidak menyandikan sebagian besar karakter yang berfungsi dalam URI (seperti # dan bahkan /) - itu dibuat untuk digunakan pada URI / URL penuh tanpa merusaknya.

CATATAN: Anda menggunakan encodeURIComponent untuk file nilai-nilai dari string kueri (bukan bidang / nama nilai dan jelas bukan seluruh URL). Jika Anda melakukannya dengan cara lain itu tidak akan mengkodekan karakter seperti =,?, &, Mungkin meninggalkan string kueri Anda terbuka.

Contoh:

const escapedValue = encodeURIComponent(value).replace(/%20/g,'+');
const url = 'http://example.com/?myKey=' + escapedValue;

66
2017-12-15 08:47



Jika Anda menggunakan jQuery saya akan pergi $.param metode. URL ini mengkodekan bidang pemetaan objek ke nilai, yang lebih mudah dibaca daripada memanggil metode pelarian pada setiap nilai.

$.param({a:"1=2", b:"Test 1"}) // gets a=1%3D2&b=Test+1

35
2018-05-13 03:32



Untuk menyandikan URL, seperti yang telah dikatakan sebelumnya, Anda memiliki dua fungsi:

encodeURI()

dan

encodeURIComponent()

Alasan keduanya ada adalah bahwa yang pertama mempertahankan URL dengan risiko meninggalkan terlalu banyak hal yang tidak dapat diarsipkan, sementara yang kedua mengkodekan semua yang diperlukan.

Dengan yang pertama, Anda bisa menyalin URL yang baru lolos ke dalam address bar (misalnya) dan itu akan berhasil. Namun unescaped '&' Anda 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 apa pun di string Anda yang mengganggu URL. Ini meninggalkan berbagai karakter yang tidak penting unescaped sehingga URL tetap sebagai manusia yang dapat dibaca mungkin tanpa gangguan. URL yang dikodekan dengan cara ini tidak akan berfungsi lagi sebagai URL tanpa melepasnya.

Jadi, jika Anda dapat meluangkan waktu, Anda selalu ingin menggunakan encodeURIComponent () - sebelum menambahkan pasangan nama / nilai menyandikan nama dan nilai menggunakan fungsi ini sebelum menambahkannya ke string kueri.

Saya mengalami kesulitan dengan alasan menggunakan encodeURI () - Saya akan menyerahkannya kepada orang-orang yang lebih pintar.


8
2018-01-26 21:31



encodeURIComponent () adalah cara untuk pergi.

var myOtherUrl = "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

TAPI Anda harus ingat bahwa ada perbedaan kecil dari urlencode versi php () dan seperti yang disebutkan oleh @CMS, itu tidak akan menyandikan setiap char. Cowok di http://phpjs.org/functions/urlencode/ dibuat js setara dengan phpencode ():

function urlencode(str) {
  str = (str + '')
    .toString();

  // Tilde should be allowed unescaped in future versions of PHP (as reflected below), but if you want to reflect current
  // PHP behavior, you would need to add ".replace(/~/g, '%7E');" to the following.
  return encodeURIComponent(str)
    .replace(/!/g, '%21')
    .replace(/'/g, '%27')
    .replace(/\(/g, '%28')
    .
  replace(/\)/g, '%29')
    .replace(/\*/g, '%2A')
    .replace(/%20/g, '+');
}

7
2017-10-01 08:03



Sejenis hal yang saya coba dengan javascript normal

function fixedEncodeURIComponent(str){
     return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}

4
2018-01-05 18:49



Untuk mencegah pengkodean ganda, sebaiknya Anda memecahkan kode url sebelum pengkodean (jika Anda berurusan dengan url yang dimasukkan pengguna misalnya, yang mungkin sudah dikodekan).

Katakan saja kita punya abc%20xyz 123 sebagai input (satu ruang sudah dikodekan):

encodeURI("abc%20xyz 123")            //   wrong: "abc%2520xyz%20123"
encodeURI(decodeURI("abc%20xyz 123")) // correct: "abc%20xyz%20123"

3
2018-06-22 03:28



Tidak ada yang berhasil untuk saya. Yang saya lihat adalah HTML dari halaman login, kembali ke sisi klien dengan kode 200. (302 pada awalnya tetapi permintaan Ajax memuat halaman login yang sama di dalam permintaan Ajax lainnya, yang seharusnya menjadi redirect daripada memuat plain teks dari halaman login).

Di pengontrol masuk, saya menambahkan baris ini:

Response.Headers["land"] = "login";

Dan dalam handler Ajax global, saya melakukan ini:

$(function () {
    var $document = $(document);
    $document.ajaxSuccess(function (e, response, request) {
        var land = response.getResponseHeader('land');
        var redrUrl = '/login?ReturnUrl=' + encodeURIComponent(window.location);
        if(land) {
            if (land.toString() === 'login') {
                window.location = redrUrl;
            }
        }
    });
});

Sekarang saya tidak punya masalah, dan itu berfungsi seperti pesona.


2
2017-09-10 06:41