it-swarm-ko.tech

EncodeURI/encodeURIComponent 대신에 escape를 사용해야 할 때는 언제입니까?

웹 서버에 보낼 쿼리 문자열을 인코딩 할 때 - 언제 escape()을 사용하고 언제 encodeURI() 또는 encodeURIComponent()을 사용합니까?

이스케이프 사용 :

escape("% +&=");

OR

encodeURI ()/encodeURIComponent ()를 사용하십시오.

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

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

탈출()

그것을 사용하지 마십시오! escape()B.2.1.2 이탈부속서 B의 소개문 부분에 정의되어 있습니다.

...이 부록에 명시된 모든 언어 기능 및 동작에는 하나 이상의 바람직하지 않은 특성이 있으며 레거시 사용이없는 경우이 사양에서 제거됩니다. ...
... 프로그래머는 새로운 ECMAScript 코드를 작성할 때 이러한 기능과 동작의 존재를 사용하거나 가정해서는 안됩니다.

행동:

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

특수 문자는 다음을 제외하고 인코딩됩니다. @ * _ + -. /

코드 단위 값이 0xFF 이하인 문자의 16 진수 형식은 두 자리 이스케이프 시퀀스입니다 (%xx).

코드 단위가 더 큰 문자의 경우 4 자리 형식 %uxxxx이 사용됩니다. 이것은 쿼리 문자열 내에서 허용되지 않습니다 ( RFC3986 에 정의 된대로).

query       = *( pchar / "/" / "?" )
pchar         = unreserved / pct-encoded / sub-delims / ":" / "@"
unreserved    = ALPHA / DIGIT / "-" / "." / "_" / "~"
pct-encoded   = "%" HEXDIG HEXDIG
sub-delims    = "!" / "$" / "&" / "'" / "(" / ")"
              / "*" / "+" / "," / ";" / "="

백분율 기호는 두 개의 16 진수가 바로 뒤에 오는 경우에만 허용되며 u 다음에 백분율이 허용되지 않습니다.

encodeURI ()

작동 URL을 원하면 encodeURI를 사용하십시오. 이 전화 걸기 :

encodeURI("http://www.example.org/a file with spaces.html")

얻으려면 :

http://www.example.org/a%20file%20with%20spaces.html

EncodeURIComponent를 호출하지 마십시오. URL을 삭제하고 반환합니다.

http%3A%2F%2Fwww.example.org%2Fa%20file%20with%20spaces.html

encodeURIComponent ()

URL 매개 변수의 값을 인코딩하려면 encodeURIComponent를 사용하십시오.

var p1 = encodeURIComponent("http://example.org/?a=12&b=55")

그런 다음 필요한 URL을 만들 수 있습니다.

var url = "http://example.net/?param1=" + p1 + "&param2=99";

그리고 당신은이 완전한 URL을 얻을 것입니다 :

http://example.net/?param1=http%3A%2F%2Fexample.org%2F%Ffa%3D12%26b%3D55&param2=99

EncodeURIComponent는 ' 문자를 이스케이프 처리하지 않습니다. 일반적인 버그는 href='MyUrl'과 같은 html 속성을 생성하기 위해 그것을 사용하여 주사 버그를 겪을 수 있습니다. 문자열에서 html을 생성하는 경우 속성 따옴표에 " 대신 '을 사용하거나 추가 인코딩 레이어를 추가하십시오 ('은 (는) % 27로 인코딩 할 수 있음).

이 인코딩 유형에 대한 자세한 내용은 다음을 확인하십시오. http://en.wikipedia.org/wiki/Percent-encoding

1864
Arne Evertsson

encodeURI()encodeURIComponent()의 차이는 정확히 encodeURIComponent에 의해 인코딩되지만 encodeURI에 의해 인코딩되지는 않습니다.

Table with the ten differences between encodeURI and encodeURIComponent

이 코드를 사용하여 console.table Google 크롬에서이 테이블을 쉽게 생성했습니다.

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);
416
Johann Echavarria

나는이 기사를 발견했다 : Javascript Madness : Query String Parsing

DecodeURIComponent가 왜 '+'를 올바르게 디코딩하지 못하는지 알기 위해 그것을 발견했습니다. 다음은 추출물입니다.

String:                         "A + B"
Expected Query String Encoding: "A+%2B+B"
escape("A + B") =               "A%20+%20B"     Wrong!
encodeURI("A + B") =            "A%20+%20B"     Wrong!
encodeURIComponent("A + B") =   "A%20%2B%20B"   Acceptable, but strange

Encoded String:                 "A+%2B+B"
Expected Decoding:              "A + B"
unescape("A+%2B+B") =           "A+++B"       Wrong!
decodeURI("A+%2B+B") =          "A+++B"       Wrong!
decodeURIComponent("A+%2B+B") = "A+++B"       Wrong!
46
Damien

encodeURIComponent는 -_.!~*'()을 인코딩하지 않으므로 XML 문자열의 PHP에 데이터를 게시하는 데 문제가 있습니다.

예 :
<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 "";
}
40

encodeURI () - escape () 함수는 HTTP가 아닌 자바 스크립트 이스케이프 용입니다.

38
Daniel Papasian

작은 비교 테이블 자바 대 자바 스크립트 대 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
17
30thh

나는 그러한 방법 중 하나를 사용하지 않는 것이 좋습니다. 옳은 일을하는 함수를 작성하십시오.

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

11
Jerry Joseph

또한 그들은 모두 다른 문자 집합을 인코딩하고 적절하게 필요한 문자 집합을 선택해야합니다. encodeURI ()는 encodeURIComponent ()보다 적은 수의 문자를 인코딩합니다.이 문자는 escape ()보다 적은 수의 (그리고 dannyp의 점과 다른) 문자를 인코딩합니다.

10
Pseudo Masochist

인코딩을 목적으로 자바 스크립트는 세 가지 내장 함수를 제공합니다 -

  1. escape () - @*/+를 인코딩하지 않습니다.이 메소드는 ECMA 3 이후에 사용되지 않으므로 피해야합니다.

  2. encodeURI () - 인코딩하지 않음 [email protected]#$&*()=:/,;?+' URI는 완전한 URI이므로 URI에서 특별한 의미를 갖는 예약 된 문자를 인코딩하지 않는다고 가정합니다. 이 메소드는 URL의 특수 세그먼트 대신 전체 URL을 변환하려는 경우에 사용됩니다. 예 - encodeURI('http://stackoverflow.com');은 - http://stackoverflow.com

  3. encodeURIComponent () - 인코딩하지 않음 - _ . ! ~ * ' ( )이 함수는 특정 문자의 각 인스턴스를 문자의 UTF-8 인코딩을 나타내는 하나, 둘, 셋 또는 네 개의 이스케이프 시퀀스로 바꾸어 URI (Uniform Resource Identifier) ​​구성 요소를 인코딩합니다. 이 메소드는 URL 구성 요소를 변환하는 데 사용해야합니다. 예를 들어 일부 사용자 입력을 추가해야합니다. 예 - encodeURI('http://stackoverflow.com');은 다음을 제공합니다 - http % 3A % 2F % 2Fstackoverflow.com

이 인코딩은 모두 UTF8에서 수행됩니다. 즉, 문자는 UTF-8 형식으로 변환됩니다.

encodeURIComponent는 예약 된 문자를 인코딩한다는 점에서 encodeURI와 다르며 encodeURI의 숫자 기호 #

7
Gaurav Tiwari

다양한 방법으로 실험하는 것은 다양한 용도와 기능이 무엇인지 잘 처리 한 후에도 양호한 상태 확인이라는 것을 알았습니다.

그 목표를 향해 나는 적절한 것을하고 있다는 의혹을 확인하기 위해 이 웹 사이트 매우 유용하다는 것을 발견했습니다. 또한 해석하기가 다소 어려울 수있는 encodeURIComponent의 문자열을 디코딩하는 데 유용함이 입증되었습니다. 가지고있는 위대한 북마크 :

http://www.the-art-of-web.com/javascript/escape/

3
veeTrain

영감을 얻어 요한의 테이블 , 나는 테이블을 확장하기로 결정했습니다. 어떤 ASCII 문자가 인코딩되는지보고 싶었습니다.

 screenshot of console.table

var ascii = " !\"#$%&'()*+,-./0123456789:;<=>[email protected][\\]^_`abcdefghijklmnopqrstuvwxyz{|}~";

var encoded = [];

ascii.split("").forEach(function (char) {
    var obj = { char };
    if (char != encodeURI(char))
        obj.encodeURI = encodeURI(char);
    if (char != encodeURIComponent(char))
        obj.encodeURIComponent = encodeURIComponent(char);
    if (obj.encodeURI || obj.encodeURIComponent)
        encoded.Push(obj);
});

console.table(encoded);

표에는 인코딩 된 문자 만 표시됩니다. 빈 셀은 원본과 인코딩 된 문자가 동일 함을 의미합니다.


그냥 추가로 urlencode() vs rawurlencode() 에 대한 다른 테이블을 추가하고 있습니다. 유일한 차이점은 공백 문자의 인코딩 인 것 같습니다.

 screenshot of console.table

<script>
<?php
$ascii = str_split(" !\"#$%&'()*+,-./0123456789:;<=>[email protected][\\]^_`abcdefghijklmnopqrstuvwxyz{|}~", 1);
$encoded = [];
foreach ($ascii as $char) {
    $obj = ["char" => $char];
    if ($char != urlencode($char))
        $obj["urlencode"] = urlencode($char);
    if ($char != rawurlencode($char))
        $obj["rawurlencode"] = rawurlencode($char);
    if (isset($obj["rawurlencode"]) || isset($obj["rawurlencode"]))
        $encoded[] = $obj;
}
echo "var encoded = " . json_encode($encoded) . ";";
?>
console.table(encoded);
</script>
2
akinuri

나는이 기능을 가지고있다 ...

var escapeURIparam = function(url) {
    if (encodeURIComponent) url = encodeURIComponent(url);
    else if (encodeURI) url = encodeURI(url);
    else url = escape(url);
    url = url.replace(/\+/g, '%2B'); // Force the replacement of "+"
    return url;
};
1
molokoloco

받아 들여진 대답은 좋다. 마지막 부분을 확장하려면 다음을 수행하십시오.

EncodeURIComponent는 '문자를 이스케이프 처리하지 않습니다. 일반적인 버그는 href = 'MyUrl'과 같은 html 속성을 생성하는 데 사용되어 주입 버그가 발생할 수 있습니다. 문자열에서 html을 구성하는 경우 속성 따옴표 대신 "대신"을 사용하거나 추가 인코딩 레이어를 추가하십시오 ( '는 (는) % 27 (으)로 인코딩 할 수 있음).

안전한쪽으로 가려면 예약되지 않은 문자 인코딩 비율 도 인코딩해야합니다.

이 메소드를 사용하여 이스케이프 할 수 있습니다 (source Mozilla )

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

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

@ johann-echavarria의 대답에 대한 현대적인 재 작성 :

console.log(
    Array(256)
        .fill()
        .map((ignore, i) => String.fromCharCode(i))
        .filter(
            (char) =>
                encodeURI(char) !== encodeURIComponent(char)
                    ? {
                          character: char,
                          encodeURI: encodeURI(char),
                          encodeURIComponent: encodeURIComponent(char)
                      }
                    : false
        )
)

또는 테이블을 사용할 수 있다면 console.logconsole.table로 바꿉니다 (더 예쁜 출력을 위해).

1
ryanpcmcquen