[Javascript] متى يجب عليك استخدام الهروب بدلاً من encodeURI / encodeURIComponent؟


Answers

الفارق بين encodeURI() و encodeURIComponent() هو 11 حرفًا تم ترميزها بواسطة encodeURIComponent وليس بواسطة encodeURI:

لقد أنشأت هذا الجدول بسهولة باستخدام console.table في Google Chrome بهذا الرمز:

var arr = [];
for(var i=0;i<256;i++) {
  var char=String.fromCharCode(i);
  if(encodeURI(char)!==encodeURIComponent(char)) {
    arr.push({
      character:char,
      encodeURI:encodeURI(char),
      encodeURIComponent:encodeURIComponent(char)
    });
  }
}
console.table(arr);

Question

عند تشفير سلسلة استعلام ليتم إرسالها إلى خادم ويب - متى تستخدم escape() ومتى تستخدم encodeURI() أو encodeURIComponent() :

استخدم الهروب:

escape("% +&=");

أو

استخدام encodeURI () / encodeURIComponent ()

encodeURI("http://www.google.com?var1=value1&var2=value2");

encodeURIComponent("var1=value1&var2=value2");



جدول مقارنة صغيرة جافا مقابل جافا سكريبت مقابل PHP.

1. Java URLEncoder.encode (using UTF8 charset)
2. JavaScript encodeURIComponent
3. JavaScript escape
4. PHP urlencode
5. PHP rawurlencode

char   JAVA JavaScript --PHP---
[ ]     +    %20  %20  +    %20
[!]     %21  !    %21  %21  %21
[*]     *    *    *    %2A  %2A
[']     %27  '    %27  %27  %27 
[(]     %28  (    %28  %28  %28
[)]     %29  )    %29  %29  %29
[;]     %3B  %3B  %3B  %3B  %3B
[:]     %3A  %3A  %3A  %3A  %3A
[@]     %40  %40  @    %40  %40
[&]     %26  %26  %26  %26  %26
[=]     %3D  %3D  %3D  %3D  %3D
[+]     %2B  %2B  +    %2B  %2B
[$]     %24  %24  %24  %24  %24
[,]     %2C  %2C  %2C  %2C  %2C
[/]     %2F  %2F  /    %2F  %2F
[?]     %3F  %3F  %3F  %3F  %3F
[#]     %23  %23  %23  %23  %23
[[]     %5B  %5B  %5B  %5B  %5B
[]]     %5D  %5D  %5D  %5D  %5D
----------------------------------------
[~]     %7E  ~    %7E  %7E  ~
[-]     -    -    -    -    -
[_]     _    _    _    _    _
[%]     %25  %25  %25  %25  %25
[\]     %5C  %5C  %5C  %5C  %5C
----------------------------------------
char  -JAVA-  --JavaScript--  -----PHP------
[ä]   %C3%A4  %C3%A4  %E4     %C3%A4  %C3%A4
[ф]   %D1%84  %D1%84  %u0444  %D1%84  %D1%84



أوصي بعدم استخدام واحدة من تلك الأساليب كما هي. اكتب وظيفتك الخاصة التي تفعل الشيء الصحيح.

أعطت MDN مثال جيد على ترميز عنوان url الموضح أدناه.

var fileName = 'my file(2).txt';
var header = "Content-Disposition: attachment; filename*=UTF-8''" + encodeRFC5987ValueChars(fileName);

console.log(header); 
// logs "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"


function encodeRFC5987ValueChars (str) {
    return encodeURIComponent(str).
        // Note that although RFC3986 reserves "!", RFC5987 does not,
        // so we do not need to escape it
        replace(/['()]/g, escape). // i.e., %27 %28 %29
        replace(/\*/g, '%2A').
            // The following are not required for percent-encoding per RFC5987, 
            //  so we can allow for a little better readability over the wire: |`^
            replace(/%(?:7C|60|5E)/g, unescape);
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent




لا ترميز encodeURIComponent -_.!~*'() ، مما يسبب مشكلة في نشر البيانات إلى php في سلسلة xml.

فمثلا:
<xml><text x="100" y="150" value="It's a value with single quote" /> </xml>

الهروب العام مع encodeURI
%3Cxml%3E%3Ctext%20x=%22100%22%20y=%22150%22%20value=%22It's%20a%20value%20with%20single%20quote%22%20/%3E%20%3C/xml%3E

يمكنك أن ترى ، لا يتم ترميز الاقتباس المفردة. لحل المشكلة ، قمت بإنشاء وظيفتين لحل المشكلة في مشروعي ، لعنوان URL للتشفير:

function encodeData(s:String):String{
    return encodeURIComponent(s).replace(/\-/g, "%2D").replace(/\_/g, "%5F").replace(/\./g, "%2E").replace(/\!/g, "%21").replace(/\~/g, "%7E").replace(/\*/g, "%2A").replace(/\'/g, "%27").replace(/\(/g, "%28").replace(/\)/g, "%29");
}

بالنسبة لعنوان URL الخاص بفك الشفرة:

function decodeData(s:String):String{
    try{
        return decodeURIComponent(s.replace(/\%2D/g, "-").replace(/\%5F/g, "_").replace(/\%2E/g, ".").replace(/\%21/g, "!").replace(/\%7E/g, "~").replace(/\%2A/g, "*").replace(/\%27/g, "'").replace(/\%28/g, "(").replace(/\%29/g, ")"));
    }catch (e:Error) {
    }
    return "";
}



الجواب المقبول جيد. للتوسع في الجزء الأخير:

لاحظ أن encodeURIComponent لا يفلت من 'الحرف. الشوائب الشائعة هي استخدامه لإنشاء سمات html مثل href = 'MyUrl' ، والتي قد تعاني من خلل في الحقن. إذا كنت تقوم ببناء html من السلاسل ، فاستخدم "بدلاً من" للحصول على علامات اقتباس للسمات ، أو أضف طبقة إضافية من الترميز ("يمكن ترميزها كـ٪ 27).

إذا كنت تريد أن تكون في الجانب الآمن ، يجب ترميز النسبة المئوية لترميز الأحرف غير المحجوزة أيضًا.

يمكنك استخدام هذه الطريقة للهروب منهم (المصدر https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent )

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

// fixedEncodeURIComponent("'") --> "%27"



لقد وجدت أن تجريب الطرق المختلفة هو فحص سلامة جيد حتى بعد التعامل الجيد مع استخداماتها وقدراتها المختلفة.

نحو تحقيق هذه الغاية لقد وجدت the-art-of-web.com/javascript/escape مفيدا للغاية لتأكيد شكوكي بأنني أفعل شيئا مناسبا. كما ثبت أنها مفيدة لفك ترميز سلسلة encodeURIComponented التي يمكن أن تكون صعبة في الترجمة. إشارة مرجعية رائعة:

the-art-of-web.com/javascript/escape