Câu hỏi Mã hóa URL trong JavaScript?


Làm thế nào để bạn mã hóa một URL một cách an toàn bằng cách sử dụng JavaScript sao cho nó có thể được đưa vào một chuỗi GET?

var myUrl = "http://example.com/index.html?param=1&anotherParam=2";
var myOtherUrl = "http://example.com/index.html?url=" + myUrl;

Tôi cho rằng bạn cần mã hóa myUrl biến trên dòng thứ hai đó?


2126
2017-12-02 02:37


gốc


Hãy thử nhìn vào encodeURI () và decodeURI (). - Zack The Human
Xem Hàm urlencode JavaScript. - Yanni
Bạn có thể sử dụng công cụ này tại đây: phillihp.com/toolz/url-encode-decode - phillihp
encodeURIComponent () - Andrew


Các câu trả lời:


Kiểm tra chức năng tích hợp encodeURIComponent(str) và encodeURI(str).
Trong trường hợp của bạn, điều này sẽ hoạt động:

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

2492
2017-12-02 02:43



Làm cách nào để thêm giải thích @cms? escape cũng là một tùy chọn hợp lệ. - hitautodestruct
theo @CMS encodeURI không thực sự an toàn cho việc mã hóa URL. - Ifnot
@AnaelFavre vì nó có nghĩa là mã hóa toàn bộ URL, không cho phép các ký tự như :, /, @ vv 2 phương pháp này không được sử dụng hoán đổi cho nhau, bạn phải biết bạn đang mã hóa gì để sử dụng đúng phương pháp. - Buu Nguyen
Xem thêm developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… và developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - Michał Perłakowski
Như đã đề cập trong một câu trả lời khác trên trang này, trang web này độc đáo chi tiết lý do sử dụng phương pháp này - Brad Parks


Bạn có ba tùy chọn:

  • escape() sẽ không mã hóa: @*/+

  • encodeURI() sẽ không mã hóa: ~!@#$&*()=:/,;?+'

  • encodeURIComponent() sẽ không mã hóa: ~!*()'

Nhưng trong trường hợp của bạn, nếu bạn muốn vượt qua URL thành một GET thông số của trang khác, bạn nên sử dụng escape hoặc là encodeURIComponent, nhưng không encodeURI.

Xem câu hỏi về Stack Overflow Phương pháp hay nhất: escape hoặc encodeURI / encodeURIComponent để thảo luận thêm.


1373
2017-12-02 02:49



Mã hóa ký tự được sử dụng với escape là biến. Gắn bó với encodeURI và encodeURIComponent, sử dụng UTF-8. - erickson
Hãy cẩn thận. Lối thoát đó chuyển đổi các ký tự không phải ASCII thành chuỗi thoát Unicode của nó, như %uxxx. - opteronn
Tôi đang sử dụng encodeURIComponent và nhận thấy nó sẽ không mã hóa các ký tự ống | - kevzettler
@ kevzettler - tại sao nó nên làm điều đó? Các đường ống không có tầm quan trọng ngữ nghĩa trong một URI. - nickf
@GiovanniP: Những người cho phép tiếng Đức, tiếng Pháp, tiếng Nhật, tiếng Trung, ký tự tiếng Ả Rập làm đầu vào và chuyển các thông số đề tài qua GET hoặc POST. - Tseng


Gắn bó với encodeURIComponent(). Chức năng encodeURI() không bận tâm mã hóa nhiều ký tự có tầm quan trọng ngữ nghĩa trong URL (ví dụ: "#", "?" và "&"). escape() không được mã hóa và không bận tâm mã hóa các ký tự "+", sẽ được hiểu là không gian được mã hóa trên máy chủ (và, như được chỉ ra bởi những người khác ở đây, không đúng mã hóa URL các ký tự không phải ASCII).

Có một tốt đẹp giải thích về sự khác biệt giữa encodeURI() và encodeURIComponent() ở nơi khác. Nếu bạn muốn mã hóa nội dung nào đó để nó có thể được bao gồm một cách an toàn như một thành phần của một URI (ví dụ như tham số chuỗi truy vấn), bạn muốn sử dụng encodeURIComponent().


157
2018-05-29 23:54





Cá nhân, tôi thấy rằng nhiều API muốn thay thế "" bằng "+" để tôi sử dụng như sau:

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

escape được thực hiện khác nhau trong các trình duyệt khác nhau và encodeURI không mã hóa hầu hết các ký tự có chức năng trong URI (như # và thậm chí /) - nó được tạo để được sử dụng trên một URI / URL đầy đủ mà không vi phạm nó.

CHÚ THÍCH: Bạn sử dụng encodeURIComponent cho giá trị của chuỗi truy vấn (không phải tên trường / giá trị và chắc chắn không phải toàn bộ URL). Nếu bạn làm theo cách khác, nó sẽ không mã hóa các ký tự như =,?, &, Có thể để lại chuỗi truy vấn của bạn.

Thí dụ:

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

66
2017-12-15 08:47



Xin lưu ý, bạn chỉ nên thay thế% 20 bằng + ký hiệu sau dấu chấm hỏi đầu tiên (đó là phần 'truy vấn' của URL). Giả sử tôi muốn duyệt đến http://somedomain/this dir has spaces/info.php?a=this has also spaces. Nó sẽ được chuyển thành: http://somedomain/this%20dir%20has%spaces/info.php?a=this%20has%20also%20spaces nhưng nhiều triển khai cho phép '% 20' trong chuỗi truy vấn được thay thế bằng '+'. Tuy nhiên, bạn không thể thay thế '% 20' bằng '+' trong phần đường dẫn của URL, điều này sẽ dẫn đến lỗi Không tìm thấy trừ khi bạn có thư mục với + thay vì một không gian. - Jochem Kuijpers
@ Jochem Kuijpers, chắc chắn, bạn sẽ không đặt "+" trong một thư mục. Tôi chỉ áp dụng điều này cho các giá trị tham số truy vấn (hoặc các khóa nếu cần), không phải toàn bộ URL hoặc thậm chí toàn bộ chuỗi truy vấn. - Ryan Taylor
Tôi sẽ thay thế bằng giá trị thay vì trong kết quả của việc mã hóa - njzk2
@ njzk2 thật không may encodeURIComponent('+') sẽ cung cấp cho bạn %2B, vì vậy bạn phải sử dụng hai cụm từ thông dụng ... mà tôi cho rằng đó là lý do tại sao nó hoạt động, bởi vì '+' là '' được mã hóa khác nhau ở cuối. - Ryan Taylor


Nếu bạn đang sử dụng jQuery tôi sẽ đi cho $.param phương pháp. URL này mã hóa một trường ánh xạ đối tượng thành giá trị, dễ đọc hơn gọi phương thức thoát trên mỗi giá trị.

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

35
2018-05-13 03:32



Tôi nghĩ rằng ví dụ được cung cấp là đủ. Nếu bạn cần thêm thông tin về $ .param trên api.jquery.com/jquery.param - Maksym Kozlenko
Hầu hết mọi người đều sử dụng jQuery và tôi cảm thấy thoải mái hơn với điều này thay vì encoreURIComponent - Cyril Duchon-Doris


Để mã hóa một URL, như đã nói trước đây, bạn có hai chức năng:

encodeURI()

encodeURIComponent()

Lý do cả hai tồn tại là người đầu tiên bảo tồn URL với nguy cơ để lại quá nhiều thứ không thoát, trong khi thứ hai mã hóa mọi thứ cần thiết.

Với lần đầu tiên, bạn có thể sao chép URL mới thoát vào thanh địa chỉ (ví dụ) và nó sẽ hoạt động. Tuy nhiên, các ký tự không thoát của bạn sẽ can thiệp vào các dấu phân tách trường, '=' sẽ can thiệp vào các tên và giá trị của trường và dấu '+' sẽ trông giống như dấu cách. Nhưng đối với dữ liệu đơn giản khi bạn muốn bảo tồn bản chất URL của những gì bạn đang thoát, điều này hoạt động.

Thứ hai là mọi thứ bạn cần làm để đảm bảo không có gì trong chuỗi của bạn tương thích với một URL. Nó để lại các ký tự không quan trọng khác nhau không bị thoát ra sao cho URL vẫn có thể đọc được càng tốt mà không bị nhiễu. Một URL được mã hóa theo cách này sẽ không còn hoạt động như một URL mà không hủy bỏ nó.

Vì vậy, nếu bạn có thể dành thời gian, bạn luôn muốn sử dụng encodeURIComponent () - trước khi thêm vào các cặp tên / giá trị mã hóa cả tên và giá trị bằng cách sử dụng hàm này trước khi thêm nó vào chuỗi truy vấn.

Tôi đang có một thời gian khó khăn với lý do để sử dụng encodeURI () - Tôi sẽ để nó cho những người thông minh hơn.


8
2018-01-26 21:31





encodeURIComponent () là con đường để đi.

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

NHƯNG bạn nên ghi nhớ rằng có sự khác biệt nhỏ từ phiên bản php urlencode () và như @CMS đã đề cập, nó sẽ không mã hóa mọi char. Các chàng trai ở http://phpjs.org/functions/urlencode/ thực hiện js tương đương với 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





Điều tương tự như tôi đã thử với javascript bình thường

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

4
2018-01-05 18:49