Come si codifica in modo sicuro un URL utilizzando JavaScript in modo che possa essere inserito in una stringa GET?

var myUrl = "http://example.com/index.html?param=1&anotherParam=2";
var myOtherUrl = "http://example.com/index.html?url=" + myUrl;

Presumo che sia necessario codificare la myUrlvariabile su quella seconda riga?

Dai un'occhiata alla funzione integrata encodeURIComponent (str) e encodeURI (str) .
Nel tuo caso, questo dovrebbe funzionare:

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

Hai tre opzioni:

• escape() non codificherà: @*/+

• encodeURI() non codificherà: ~!@#$&*()=:/,;?+'

• encodeURIComponent() non codificherà: ~!*()'

Ma nel tuo caso, se vuoi passare un URL a un GETparametro di un'altra pagina, dovresti usare escapeo encodeURIComponent, ma non encodeURI.

Vedi domanda Stack Overflow Best practice: escape, o encodeURI / encodeURIComponent per ulteriori discussioni.

Resta con encodeURIComponent(). La funzione encodeURI()non si preoccupa di codificare molti caratteri che hanno un'importanza semantica negli URL (ad es. "#", "?" E "&"). escape()è obsoleto e non si preoccupa di codificare i caratteri "+", che verranno interpretati come spazi codificati sul server (e, come sottolineato da altri qui, non codificano correttamente i caratteri non ASCII con codifica URL).

C'è una bella spiegazione della differenza tra encodeURI()eencodeURIComponent() altrove. Se si desidera codificare qualcosa in modo che possa essere incluso in modo sicuro come componente di un URI (ad es. Come parametro della stringa di query), si desidera utilizzare encodeURIComponent().

La migliore risposta è quella di utilizzare encodeURIComponentin valori nella stringa di query (e non altrove).

Tuttavia, trovo che molte API vogliano sostituire "" con "+", quindi ho dovuto usare quanto segue:

const value = encodeURIComponent(value).replace('%20','+');
const url = 'http://example.com?lang=en&key=' + value

escapeè implementato in modo diverso nei diversi browser e encodeURInon codifica molti caratteri (come # e anche /) - è fatto per essere utilizzato su un URI / URL completo senza romperlo - che non è molto utile o sicuro.

E come sottolinea @Jochem di seguito, potresti voler utilizzare encodeURIComponent()un (ogni) nome di cartella, ma per qualsiasi motivo queste API non sembrano volere +nei nomi di cartelle, quindi il vecchio encodeURIComponentfunziona alla grande.

Esempio:

const escapedValue = encodeURIComponent(value).replace('%20','+');
const escapedFolder = encodeURIComponent('My Folder'); // no replace
const url = `http://example.com/${escapedFolder}/?myKey=${escapedValue}`;

Se stai usando jQuery andrei per il $.parammetodo. URL codifica i valori di un oggetto mappando i campi, che è più facile da leggere rispetto alla chiamata di un metodo di escape su ciascun valore.

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

encodeURIComponent () è la strada da percorrere.

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

MA dovresti tenere a mente che ci sono piccole differenze rispetto alla versione php urlencode()e come citato da @CMS, non codificherà ogni carattere. I ragazzi su http://phpjs.org/functions/urlencode/ hanno reso js equivalente a 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('!', '%21')
    .replace('\'', '%27')
    .replace('(', '%28')
    .replace(')', '%29')
    .replace('*', '%2A')
    .replace('%20', '+');
}

Per codificare un URL, come è stato detto prima, hai due funzioni:

encodeURI()

e

encodeURIComponent()

La ragione per cui entrambe esistono è che la prima conserva l'URL con il rischio di lasciare troppe cose senza caratteri di escape, mentre la seconda codifica per tutto ciò che è necessario.

Con il primo, potresti copiare l'URL appena salvato nella barra degli indirizzi (ad esempio) e funzionerebbe. Tuttavia, i "&" senza caratteri di escape interferirebbero con i delimitatori di campo, i "=" interferirebbero con i nomi e i valori dei campi e i "+" sembrerebbero spazi. Ma per dati semplici quando vuoi preservare la natura dell'URL di ciò che stai scappando, questo funziona.

Il secondo è tutto ciò che devi fare per assicurarti che nulla nella tua stringa interferisca con un URL. Lascia diversi caratteri non importanti senza caratteri di escape in modo che l'URL rimanga il più leggibile possibile senza interferenze. Un URL codificato in questo modo non funzionerà più come un URL senza annullarlo.

Quindi, se puoi prendere il tempo, vuoi sempre usare encodeURIComponent () - prima di aggiungere coppie nome / valore codifica sia il nome che il valore usando questa funzione prima di aggiungerlo alla stringa di query.

Sto attraversando un periodo difficile con le ragioni per usare encodeURI () - lo lascerò alle persone più intelligenti.

Tipo simile di cose che ho provato con javascript normale

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

Modo elegante

Secondo la mia modesta opinione, il modo più elegante per codificare i parametri di query è creare un oggetto con parametri come

const queryParams = { param1: 'value1', param2: 'value2' }

e poi codificalo usando:

const queryString = new URLSearchParams(queryParams).toString()

come indicato in questa risposta: https://stackoverflow.com/a/53171438/7284582

Per evitare la doppia codifica è una buona idea decodificare l'URL prima della codifica (ad esempio se si tratta di URL immessi dall'utente, che potrebbero essere già codificati).

Diciamo che abbiamo abc%20xyz 123come input (uno spazio è già codificato):

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

Cos'è la codifica URL:

Un URL deve essere codificato quando sono presenti caratteri speciali all'interno dell'URL. Per esempio:

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

In questo esempio possiamo osservare che tutti i caratteri tranne la stringa notEncodedsono codificati con segni%. La codifica URL è anche nota come codifica percentuale perché sfugge a tutti i caratteri speciali con una%. Quindi dopo questo segno% ogni carattere speciale ha un codice univoco

Perché abbiamo bisogno della codifica URL:

Alcuni caratteri hanno un valore speciale in una stringa URL. Ad esempio, il? carattere indica l'inizio di una stringa di query. Per individuare con successo una risorsa sul web, è necessario distinguere tra quando un carattere è inteso come parte di una stringa o parte della struttura dell'URL.

Come possiamo ottenere la codifica URL in JS:

JS offre una serie di funzioni di utilità integrate che possiamo usare per codificare facilmente gli URL. Queste sono due opzioni convenienti:

1. encodeURIComponent(): Accetta un componente di un URI come argomento e restituisce la stringa URI codificata.
2. encodeURI(): Accetta un URI come argomento e restituisce la stringa URI codificata.

Esempio e avvertenze:

Fai attenzione a non passare l'intero URL (incluso lo schema, ad esempio https: //) in encodeURIComponent(). Questo può effettivamente trasformarlo in un URL non funzionale. Per esempio:

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

Possiamo osservare che abbiamo inserito l'intero URL in modo encodeURIComponentche anche le barre in avanti (/) vengano convertite in caratteri speciali. Ciò farà sì che l'URL non funzioni più correttamente.

Pertanto (come suggerisce il nome) utilizzare:

1. encodeURIComponent su una determinata parte di un URL che si desidera codificare.
2. encodeURI su un intero URL che desideri codificare.

Niente ha funzionato per me. Tutto quello che stavo vedendo era l'HTML della pagina di accesso, che tornava sul lato client con il codice 200. (302 all'inizio, ma la stessa richiesta Ajax caricava la pagina di accesso all'interno di un'altra richiesta Ajax, che doveva essere un reindirizzamento piuttosto che un caricamento normale testo della pagina di accesso).

Nel controller di accesso, ho aggiunto questa riga:

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

E nel gestore globale Ajax, ho fatto questo:

$(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;
            }
        }
    });
});

Ora non ho alcun problema e funziona come un fascino.

Codifica stringa URL

    var url = $ ( posizione ). attr ( 'href' ); // get url corrente // OR var url = 'folder / index.html? param = # 23dd & noob = yes' ; // o specificarne uno 
    
      


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

Ecco una DEMO LIVE di encodeURIComponent()e decodeURIComponent()funzioni integrate di JS:

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

Puoi usare la libreria esapi e codificare il tuo url usando la seguente funzione. La funzione assicura che '/' non vada perso per la codifica mentre il resto del contenuto del testo viene codificato:

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

Utilizzare la fixedEncodeURIComponentfunzione per rispettare rigorosamente RFC 3986 :

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

Non dovresti usare encodeURIComponent()direttamente.

Dai un'occhiata a RFC3986: Uniform Resource Identifier (URI): sintassi generica

sub-delims = "!" / "$" / "&" / "'" / "(" / ")" / "*" / "+" / "," / ";" / "="

Lo scopo dei caratteri riservati è di fornire un set di caratteri delimitanti che siano distinguibili da altri dati all'interno di un URI.

Questi caratteri riservati dalla definizione URI in RFC3986 NON SONO sfuggiti a encodeURIComponent().

Documenti Web MDN: encodeURIComponent ()

Per essere più rigorosi nell'aderire a RFC 3986 (che riserva!, ', (,) E *), anche se questi caratteri non hanno usi di delimitazione URI formalizzati, è possibile utilizzare in sicurezza:

Utilizzare la funzione MDN Web Docs ...

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