it-swarm-eu.dev

Wann sollten Sie Escape anstelle von encodeURI/encodeURIComponent verwenden?

Beim Codieren einer Abfragezeichenfolge, die an einen Webserver gesendet werden soll - wann verwenden Sie escape() und wann verwenden Sie encodeURI() oder encodeURIComponent():

Flucht verwenden:

escape("% +&=");

OR

verwenden Sie encodeURI ()/encodeURIComponent ()

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

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

flucht()

Verwenden Sie es nicht! escape() ist in Abschnitt B.2.1.2 escape und dem Einführungstext von Anhang B definiert sagt:

Alle in diesem Anhang angegebenen Sprachmerkmale und -verhalten weisen eine oder mehrere unerwünschte Eigenschaften auf und würden bei Fehlen der Altbenutzung aus dieser Spezifikation gestrichen. ...
... Programmierer sollten beim Schreiben von neuem ECMAScript-Code nicht auf diese Funktionen und Verhaltensweisen zurückgreifen.

Verhalten:

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

Sonderzeichen werden mit Ausnahme von: @ * _ + -./Codiert.

Die hexadezimale Form für Zeichen, deren Codeeinheitswert 0xFF oder kleiner ist, ist eine zweistellige Escape-Sequenz: %xx.

Für Zeichen mit einer größeren Codeeinheit wird das vierstellige Format %uxxxx verwendet. Dies ist innerhalb einer Abfragezeichenfolge (wie in RFC3986 definiert) nicht zulässig:

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

Ein Prozentzeichen ist nur zulässig, wenn direkt zwei Hex-Stellen gefolgt werden, Prozent gefolgt von u ist nicht zulässig.

encodeURI ()

Verwenden Sie encodeURI, wenn Sie eine funktionierende URL benötigen. Diesen Anruf tätigen:

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

bekommen:

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

Rufen Sie nicht encodeURIComponent auf, da dies die URL zerstören und zurückgeben würde

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

encodeURIComponent ()

Verwenden Sie encodeURIComponent, wenn Sie den Wert eines URL-Parameters kodieren möchten.

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

Dann können Sie die URL erstellen, die Sie benötigen:

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

Und Sie erhalten diese vollständige URL:

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

Beachten Sie, dass encodeURIComponent das '-Zeichen nicht maskiert. Ein häufiger Fehler besteht darin, HTML-Attribute wie href='MyUrl' zu erstellen, die einen Injektionsfehler erleiden könnten. Wenn Sie HTML aus Zeichenfolgen erstellen, verwenden Sie entweder " anstelle von ' für Attributzitate oder fügen Sie eine zusätzliche Codierschicht hinzu (' kann als% 27 codiert werden).

Weitere Informationen zu dieser Art von Kodierung finden Sie unter: http://en.wikipedia.org/wiki/Percent-encoding

1847
Arne Evertsson

Der Unterschied zwischen encodeURI() und encodeURIComponent() beträgt genau 11 Zeichen, die von encodeURIComponent, aber nicht von encodeURI codiert werden:

Table with the ten differences between encodeURI and encodeURIComponent

Ich habe diese Tabelle einfach mit console.table in Google Chrome mit diesem Code generiert:

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

411

Ich fand diesen Artikel aufschlussreich: Javascript Madness: Query String Parsing

Ich habe es gefunden, als ich versuchte zu verstehen, warum decodeURIComponent '+' nicht richtig decodierte. Hier ist ein Auszug:

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!
43
Damien

encodeURIComponent codiert -_.!~*'() nicht, wodurch Probleme beim Buchen von Daten in PHP in XML-Zeichenfolge verursacht werden.

Zum Beispiel:
<xml><text x="100" y="150" value="It's a value with single quote" /> </xml>

Allgemeine Flucht mit 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

Sie können sehen, dass das einfache Anführungszeichen nicht codiert ist .. Um das Problem zu beheben, habe ich zwei Funktionen erstellt, um das Problem in meinem Projekt zu lösen, für die Codierungs-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");
}

Zum Dekodieren der 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 "";
}
38

encodeURI () - Die escape () - Funktion ist für die JavaScript-Escape-Funktion gedacht, nicht für HTTP.

37
Daniel Papasian

Kleine Vergleichstabelle 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
16
30thh

Ich empfehle, keine dieser Methoden so zu verwenden, wie sie sind. Schreiben Sie Ihre eigene Funktion, die das Richtige tut.

MDN hat ein gutes Beispiel für die unten gezeigte URL-Codierung gegeben.

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

Denken Sie auch daran, dass sie alle verschiedene Zeichensätze codieren, und wählen Sie den gewünschten aus. encodeURI () codiert weniger Zeichen als encodeURIComponent (), das weniger (und auch andere als dannyps Punkt) Zeichen codiert als escape ().

10

Zum Zwecke der Verschlüsselung hat Javascript drei eingebaute Funktionen gegeben:

  1. escape () - codiert @*/+.__ nicht. Diese Methode ist nach ECMA 3 veraltet, daher sollte sie vermieden werden.

  2. encodeURI () - codiert nicht [email protected]#$&*()=:/,;?+'Es wird davon ausgegangen, dass es sich bei dem URI um einen vollständigen URI handelt, sodass keine reservierten Zeichen codiert werden, die im URI eine besondere Bedeutung haben .. Diese Methode wird verwendet, wenn der Intent die vollständige Konvertierung durchführen soll URL anstelle eines speziellen URL-Abschnitts . Beispiel - encodeURI('http://stackoverflow.com'); Gibt - http://stackoverflow.com

  3. encodeURIComponent () - codiert nicht - _ . ! ~ * ' ( ) Diese Funktion codiert eine URI-Komponente (Uniform Resource Identifier), indem jede Instanz bestimmter Zeichen durch eine, zwei, drei oder vier Escape-Sequenzen ersetzt wird, die die UTF-8-Codierung des Zeichens darstellen. Diese Methode sollte zum Konvertieren einer URL-Komponente verwendet werden. Beispielsweise müssen einige Benutzereingaben angehängt werden Beispiel - encodeURI('http://stackoverflow.com'); Ergibt - http% 3A% 2F% 2Fstackoverflow.com

Alle diese Kodierung wird in UTF 8 durchgeführt. Das heißt, die Zeichen werden im UTF-8-Format konvertiert. 

encodeURIComponent unterscheidet sich von encodeURI dadurch, dass reservierte Zeichen und Nummernzeichen # von encodeURI codiert werden

6
Gaurav Tiwari

Ich habe herausgefunden, dass das Experimentieren mit den verschiedenen Methoden eine gute Überprüfung der Unversehrtheit darstellt, auch wenn sie die verschiedenen Einsatzmöglichkeiten und Fähigkeiten gut beherrschen.

Zu diesem Zweck habe ich diese Website / äußerst nützlich gefunden, um meinen Verdacht zu bestätigen, dass ich etwas richtig mache. Es hat sich auch als nützlich erwiesen, um einen encodeURIComponent-String zu decodieren, dessen Interpretation ziemlich schwierig sein kann. Ein tolles Lesezeichen für:

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

3
veeTrain

Ich habe diese Funktion ...

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

Die akzeptierte Antwort ist gut . Um den letzten Teil zu erweitern:

Beachten Sie, dass encodeURIComponent das 'Zeichen nicht entgeht. Eine gemeinsame Bug ist die Verwendung von HTML-Attributen wie href = 'MyUrl', die könnte einen Injektionsfehler erleiden. Wenn Sie HTML aus .__ erstellen. Verwenden Sie für Zeichenfolgen entweder "anstelle von", oder fügen Sie eine zusätzliche Kodierungsebene () hinzu ('kann als% 27 kodiert werden).

Wenn Sie auf der sicheren Seite sein möchten, sollten Prozent-Codierung nicht reservierter Zeichen ebenfalls codiert werden. 

Sie können diese Methode verwenden, um sie zu umgehen (source Mozilla )

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

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

Moderne Antwort von @ johann-echavarrias Antwort:

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

Wenn Sie eine Tabelle verwenden können, ersetzen Sie console.log durch console.table (für die schönere Ausgabe).

1
ryanpcmcquen

Inspiriert von Johanns Tisch , habe ich mich entschlossen, den Tisch zu erweitern. Ich wollte sehen, welche ASCII Zeichen kodiert werden.

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

Tabelle zeigt nur die codierten Zeichen. Leere Zellen bedeuten, dass das Original und die codierten Zeichen identisch sind.


Um noch mehr zu geben, füge ich eine weitere Tabelle für urlencode() vs rawurlencode() hinzu. Der einzige Unterschied scheint die Kodierung von Leerzeichen zu sein.

 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>
0
akinuri