언제 encodeURI / encodeURIComponent 대신 이스케이프를 사용해야합니까?

질문자 :Adam

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

탈출 사용:

 escape("% +&=");

또는

encodeURI() / encodeURIComponent() 사용

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

탈출하다()

사용하지 마세요! 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 = "!" / "$" / "&" / "'" / "(" / ")" / "*" / "+" / "," / ";" / "="

퍼센트 기호는 바로 뒤에 2개의 16진수가 오는 경우에만 허용되고 퍼센트 다음에 u 가 오는 경우에는 허용되지 않습니다.

인코딩URI()

작동하는 URL을 원할 때 encodeURI를 사용하십시오. 전화 걸기:

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

얻을:

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

URL을 파괴하고 반환하므로 encodeURIComponent를 호출하지 마십시오.

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

encodeURIComponent와 마찬가지로 encodeURI는 ' 문자를 이스케이프하지 않습니다.

인코딩URIComponent()

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

' 문자를 이스케이프하지 않습니다. 일반적인 버그는 주입 버그가 발생할 수 있는 href='MyUrl' 과 같은 html 속성을 만드는 데 사용하는 것입니다. 문자열에서 html을 구성하는 경우 속성 따옴표에 ' " 를 사용하거나 인코딩 계층을 추가합니다( ' 는 %27로 인코딩될 수 있음).

이 인코딩 유형에 대한 자세한 내용은 http://en.wikipedia.org/wiki/Percent-encoding에서 확인할 수 있습니다.

Community Wiki

encodeURI() 와 encodeURIComponent() 의 차이점은 encodeURIComponent에 의해 인코딩되지만 encodeURI에 의해 인코딩되지 않는 정확히 11자입니다:

이 코드를 사용하여 Chrome의 console.table 을 사용하여 이 테이블을 쉽게 생성했습니다.

 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);

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!

Damien

-_.!~*'() 인코딩하지 않아 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

작은 따옴표가 인코딩되지 않은 것을 볼 수 있습니다. 문제를 해결하기 위해 Encoding 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 ""; }

Kirankumar Sripati

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

Daniel Papasian

작은 비교표 Java vs. JavaScript vs. 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

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). // ie, %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

Jerry Joseph

자바 스크립트를 인코딩하기 위해 세 가지 내장 기능이 있습니다.

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

2. encodeURI() - ~!@#$&*()=:/,;?+' 인코딩하지 않습니다. URI가 완전한 URI라고 가정하므로 URI에서 특별한 의미를 갖는 예약된 문자를 인코딩하지 않습니다. 이 메소드는 특정 URL 세그먼트 대신 완전한 URL을 변환하려는 의도일 때 사용됩니다. 예 - encodeURI('http://stackoverflow.com'); 줄 것이다 - http://stackoverflow.com

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

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

encodeURIComponent는 예약 문자와 encodeURI의 숫자 기호를 인코딩한다는 점에서 encodeURI와 다릅니다.

Gaurav Tiwari

또한 모두 다른 문자 세트를 인코딩하고 필요한 문자를 적절하게 선택한다는 점을 기억하십시오. encodeURI()는 encodeURIComponent()보다 적은 수의 문자를 인코딩하는데, 이것은 escape()보다 더 적은(또한 dannyp의 포인트와도 다른) 문자를 인코딩합니다.

Pseudo Masochist

encodeURI() 및 encodeURIComponent() 시도하십시오 ...

 console.log(encodeURIComponent('@#$%^&*'));

입력: @#$%^&* . 출력: %40%23%24%25%5E%26* . * 에게 무슨 일이 일어났습니까? 왜 이것이 변환되지 않았습니까? linux command "$string" 을 시도하면 확실히 문제가 발생할 수 있습니다. TLDR: 실제로 fixedEncodeURIComponent() 및 fixedEncodeURI() . 긴 이야기...

encodeURI() 를 사용합니까? 절대. encodeURI() 는 브래킷 인코딩과 관련하여 RFC3986을 준수하지 않습니다. MDN encodeURI() 문서 에서 정의되고 추가로 설명된 대로 fixedEncodeURI() 사용하십시오 ...

 function fixedEncodeURI(str) { return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']'); }

encodeURIComponent() 를 사용합니까? 절대. encodeURIComponent() 는 인코딩과 관련하여 RFC3986을 준수하지 못합니다: !'()* . MDN encodeURIComponent() 문서 에서 정의되고 추가로 설명된 대로 fixedEncodeURIComponent() 사용하십시오 ...

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

그런 다음 fixedEncodeURI() 를 사용하여 단일 URL 조각을 인코딩할 수 있는 반면 fixedEncodeURIComponent() 는 URL 조각과 커넥터를 인코딩합니다. 또는, 간단하게, fixedEncodeURI() 하지 않습니다 인코딩 +@?=:#;,$& (로 & 과 + 일반적인 URL 사업자입니다)하지만, fixedEncodeURIComponent() 것이다.

HoldOffHunger

나는 다양한 방법을 실험하는 것이 다양한 용도와 기능을 잘 다룬 후에도 올바른 상태를 확인한다는 것을 발견했습니다.

이를 위해 이 웹사이트 는 내가 뭔가를 적절하게 하고 있다는 의심을 확인하는 데 매우 유용하다는 것을 알게 되었습니다. 또한 해석하기 어려울 수 있는 encodeURIComponent' 문자열을 디코딩하는 데 유용한 것으로 입증되었습니다. 가지고 있는 훌륭한 책갈피:

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

veeTrain

수락 된 답변이 좋습니다. 마지막 부분을 확장하려면:

encodeURIComponent는 ' 문자를 이스케이프하지 않습니다. 일반적인 버그는 삽입 버그가 발생할 수 있는 href='MyUrl'과 같은 html 속성을 만드는 데 사용하는 것입니다. 문자열에서 html을 구성하는 경우 속성 따옴표에 ' 대신 "를 사용하거나 인코딩 계층을 추가합니다('는 %27로 인코딩될 수 있음).

안전한 편에 서려면 예약되지 않은 문자를 인코딩하는 백분율도 인코딩 해야 합니다.

이 방법을 사용하여 이스케이프할 수 있습니다(출처 Mozilla )

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

Michael

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

 var ascii = " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`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() 대 rawurlencode() 대한 다른 테이블을 추가하고 있습니다. 유일한 차이점은 공백 문자의 인코딩인 것 같습니다.

 <script> <?php $ascii = str_split(" !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`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>

akinuri

@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.log 를 console.table 바꾸십시오(더 예쁜 출력을 위해).

ryanpcmcquen

이 기능이 있는데...

 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; };

molokoloco

출처 : http:www.stackoverflow.com/questions/75980/when-are-you-supposed-to-use-escape-instead-of-encodeuri-encodeuricomponent