URL in JavaScript kodieren?

Sie haben drei Möglichkeiten:

• escape() wird nicht kodiert: @*/+

• encodeURI() kodiert nicht: [email protected]#$&*()=:/,;?+'

• encodeURIComponent() kodiert nicht: ~!*()'

Wenn Sie jedoch einen URL in einen GET-Parameter einer anderen Seite übergeben möchten, sollten Sie escape oder encodeURIComponent verwenden, nicht jedoch encodeURI.

Weitere Informationen finden Sie unter Stack Overflow question Bewährte Methode: escape oder encodeURI/encodeURIComponent.

Bleiben Sie bei encodeURIComponent() . Die Funktion encodeURI() muss nicht viele Zeichen codieren, die in URLs semantische Bedeutung haben (z. B. "#", "?" Und "&"). escape() ist veraltet und verwendet keine "+" - Zeichen, die als verschlüsselte Leerzeichen auf dem Server interpretiert werden (und, wie von anderen angegeben, Nicht-ASCII-Zeichen nicht ordnungsgemäß für die URL-Kodierung verwenden). .

Es gibt eine nette Erklärung für den Unterschied zwischen encodeURI() und encodeURIComponent() an anderer Stelle. Wenn Sie etwas kodieren möchten, damit es sicher als Komponente eines URI (z. B. als Abfragezeichenfolgeparameter) verwendet werden kann, möchten Sie encodeURIComponent() verwenden.

Ich persönlich finde, dass viele APIs "" durch "+" ersetzen möchten, also verwende ich Folgendes:

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

escape ist in verschiedenen Browsern unterschiedlich implementiert, und encodeURI codiert die meisten Zeichen, die in einem URI funktionieren (wie # und sogar /), nicht. Es wird für die Verwendung mit einem vollständigen URI/URL verwendet, ohne ihn zu beschädigen.

NOTE: Sie verwenden encodeURIComponent für die values ​​in der Abfragezeichenfolge (nicht Felder/Wertnamen und definitiv nicht die gesamte URL). Wenn Sie dies auf eine andere Weise tun, werden keine Zeichen wie =,?, & Codiert, wodurch die Abfragezeichenfolge möglicherweise ausgesetzt bleibt.

Beispiel:

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

Wenn Sie jQuery verwenden, würde ich für die $.param -Methode gehen. Die URL kodiert ein Objekt, das Felder mit Werten verknüpft, was einfacher zu lesen ist als das Aufrufen einer Escape-Methode für jeden Wert.

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

Um eine URL zu kodieren, haben Sie, wie bereits gesagt, zwei Funktionen:

encodeURI()

und 

encodeURIComponent()

Es gibt beide Gründe dafür, dass beim ersten die URL mit dem Risiko erhalten bleibt, dass zu viele Dinge nicht abgelegt werden, während beim zweiten alles verschlüsselt wird.

Mit der ersten Möglichkeit könnten Sie die neu maskierte URL in die Adressleiste kopieren (z. B.) und es würde funktionieren. Ihre unausgerichteten '&' s würden jedoch die Feldbegrenzer stören, die '' 's würden die Feldnamen und -werte stören und die' + 'würden wie Leerzeichen aussehen. Aber für einfache Daten, wenn Sie die URL-Art der Flucht beibehalten möchten, funktioniert dies.

Das zweite ist alles, was Sie tun müssen, um sicherzustellen, dass nichts in Ihrem String mit einer URL interagiert. Dabei bleiben verschiedene unwichtige Zeichen unbemerkt, so dass die URL ohne Störungen so lesbar wie möglich bleibt. Eine auf diese Weise codierte URL funktioniert nicht mehr als URL, wenn sie nicht entfernt wird.

Wenn Sie sich also die Zeit nehmen können, möchten Sie immer encodeURIComponent () verwenden - bevor Sie Name/Wert-Paare hinzufügen, kodieren Sie mit dieser Funktion sowohl den Namen als auch den Wert, bevor Sie ihn der Abfragezeichenfolge hinzufügen.

Es fällt mir schwer, Gründe für die Verwendung der encodeURI () zu finden - ich überlasse das den klügeren Leuten.

encodeURIComponent () ist der Weg zu gehen.

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

ABER Sie sollten bedenken, dass es kleine Unterschiede zur PHP-Version urlencode() gibt, und wie @CMS erwähnt, werden nicht alle Zeichen codiert. Jungs bei http://phpjs.org/functions/urlencode/ machten js äquivalent zu 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, '+');
}

Ähnliches habe ich mit normalem Javascript versucht

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

Was ist URL-Codierung:

Eine URL sollte verschlüsselt werden, wenn sich Sonderzeichen in der URL befinden. Zum Beispiel:

console.log(encodeURIComponent('?notEncoded=&+'));

In diesem Beispiel können wir beobachten, dass alle Zeichen mit Ausnahme der Zeichenfolge notEncoded mit% -Zeichen codiert sind. Die URL-Codierung wird auch als prozentuale Codierung bezeichnet, da alle Sonderzeichen mit einem% ausgeblendet werden. Nach diesem% -Zeichen hat jedes Sonderzeichen einen eindeutigen Code

Warum brauchen wir URL-Codierung:

Bestimmte Zeichen haben einen speziellen Wert in einer URL-Zeichenfolge. Zum Beispiel das? Zeichen bezeichnet den Anfang einer Abfragezeichenfolge. Um eine Ressource im Web erfolgreich zu lokalisieren, muss unterschieden werden, ob ein Zeichen Teil einer Zeichenfolge oder Teil der URL-Struktur ist.

Wie können wir URL-Codierung in JS erreichen:

JS bietet eine Reihe integrierter Hilfsprogrammfunktionen, mit denen wir URLs einfach codieren können. Dies sind zwei bequeme Optionen:

1. encodeURIComponent(): Nimmt eine Komponente eines URI als Argument und gibt die codierte URI-Zeichenfolge zurück.
2. encodeURI(): Nimmt einen URI als Argument und gibt den codierten URI-String zurück.

Beispiel und Vorsichtsmaßnahmen:

Achten Sie darauf, dass Sie nicht die gesamte URL (einschließlich des Schemas, z. B. https: //) an encodeURIComponent() übergeben. Dies kann es tatsächlich in eine nicht funktionierende URL umwandeln. Zum Beispiel:

// for a whole URI don't use encodeURIComponent it will transform
// the / characters and the URL won't fucntion properly
console.log(encodeURIComponent("http://www.random.com/specials&char.html"));

// instead use encodeURI for whole URL's
console.log(encodeURI("http://www.random.com/specials&char.html"));

Wir können beobachten, wenn wir die gesamte URL in encodeURIComponent setzen, dass die Schrägstriche (/) auch in Sonderzeichen umgewandelt werden. Dies führt dazu, dass die URL nicht mehr richtig funktioniert.

Verwenden Sie daher (wie der Name schon sagt):

1. encodeURIComponent auf einen bestimmten Teil einer URL, den Sie verschlüsseln möchten.
2. encodeURI für eine ganze URL, die Sie codieren möchten.

Um Doppelcodierung zu verhindern, empfiehlt es sich, die URL vor der Codierung zu decodieren (wenn Sie beispielsweise mit benutzerdefinierten URLs arbeiten, die möglicherweise bereits codiert sind).

Nehmen wir an, wir haben abc%20xyz 123 als Eingabe (ein Leerzeichen ist bereits codiert):

encodeURI("abc%20xyz 123")            //   wrong: "abc%2520xyz%20123"
encodeURI(decodeURI("abc%20xyz 123")) // correct: "abc%20xyz%20123"

Encode URL String

 var url = $ (location) .attr ('href'); // aktuelle URL abrufen 
 //OR
 var url = 'folder/index.html? param = # 23dd & noob = yes'; // oder geben Sie einen 
 
 var encodedUrl = encodeURIComponent(url);
console.log(encodedUrl);
//outputs folder%2Findex.html%3Fparam%3D%2323dd%26noob%3Dyes


for more info go http://www.sitepoint.com/jquery-decode-url-string

Nichts hat für mich funktioniert. Alles, was ich sah, war der HTML-Code der Login-Seite, der mit Code 200 auf die Clientseite zurückkehrte Text der Anmeldeseite).

Im Login-Controller habe ich folgende Zeile hinzugefügt:

Response.Headers["land"] = "login";

Und im globalen Ajax-Handler habe ich Folgendes getan:

$(function () {
    var $document = $(document);
    $document.ajaxSuccess(function (e, response, request) {
        var land = response.getResponseHeader('land');
        var redrUrl = '/login?ReturnUrl=' + encodeURIComponent(window.location);
        if(land) {
            if (land.toString() === 'login') {
                window.location = redrUrl;
            }
        }
    });
});

Jetzt habe ich kein Problem mehr und es wirkt wie ein Zauber.

Hier ist eine LIVE DEMO von encodeURIComponent() und decodeURIComponent() JS eingebauten Funktionen:

<!DOCTYPE html>
<html>
  <head>
    <style>
      textarea{
        width:30%;
        height:100px;
      }
    </style>
    <script>
      // encode string to base64
      function encode()
      {
        var txt = document.getElementById("txt1").value;
        var result = btoa(txt);
        document.getElementById("txt2").value = result;
      }
      // decode base64 back to original string
      function decode()
      {
        var txt = document.getElementById("txt3").value;
        var result = atob(txt);
        document.getElementById("txt4").value = result;
      }
    </script>
  </head>
  <body>
    <div>
      <textarea id="txt1">Some text to decode
      </textarea>
    </div>
    <div>
      <input type="button" id="btnencode" value="Encode" onClick="encode()"/>
    </div>
    <div>
      <textarea id="txt2">
      </textarea>
    </div>
    <br/>
    <div>
      <textarea id="txt3">U29tZSB0ZXh0IHRvIGRlY29kZQ==
      </textarea>
    </div>
    <div>
      <input type="button" id="btndecode" value="Decode" onClick="decode()"/>
    </div>
    <div>
      <textarea id="txt4">
      </textarea>
    </div>
  </body>
</html>

Sie können die esapi-Bibliothek verwenden und Ihre URL mithilfe der folgenden Funktion kodieren. Die Funktion bleibt bestehen, wenn '/' nicht verschlüsselt wird, während der Rest des Textinhalts codiert wird:

function encodeUrl(url)
{
    String arr[] = url.split("/");
    String encodedUrl = "";
    for(int i = 0; i<arr.length; i++)
    {
        encodedUrl = encodedUrl + ESAPI.encoder().encodeForHTML(ESAPI.encoder().encodeForURL(arr[i]));
        if(i<arr.length-1) encodedUrl = encodedUrl + "/";
    }
    return url;
}

https://www.owasp.org/index.php/ESAPI_JavaScript_Readme