¿Cómo codifica de manera segura una URL usando JavaScript de modo que pueda colocarse en una cadena GET?

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

¿Asumo que necesitas codificar la myUrlvariable en esa segunda línea?

Consulte la función incorporada encodeURIComponent (str) y encodeURI (str) .
En su caso, esto debería funcionar:

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

Tienes tres opciones:

• escape() no codificará: @*/+

• encodeURI() no codificará: ~!@#$&*()=:/,;?+'

• encodeURIComponent() no codificará: ~!*()'

Pero en su caso, si desea pasar una URL a un GETparámetro de otra página, debe usar escapeo encodeURIComponent, pero noencodeURI .

Consulte la pregunta sobre desbordamiento de pila. Práctica recomendada: escape, o encodeURI / encodeURIComponent para obtener más información.

Quédate con encodeURIComponent(). La función encodeURI()no se molesta en codificar muchos caracteres que tienen importancia semántica en las URL (por ejemplo, "#", "?" Y "&").escape()está en desuso y no se molesta en codificar caracteres "+", que se interpretarán como espacios codificados en el servidor (y, como han señalado otros aquí, no codifica correctamente los caracteres que no son ASCII).

Hay una buena explicación de la diferencia entre encodeURI()y enencodeURIComponent() otros lugares. Si desea codificar algo para que pueda incluirse de forma segura como un componente de un URI (por ejemplo, como un parámetro de cadena de consulta), desea utilizarlo encodeURIComponent().

La mejor respuesta es el uso encodeURIComponentde los valores en la cadena de consulta (y ningún otro lugar).

Sin embargo, creo que muchas API quieren reemplazar "" con "+", así que tuve que usar lo siguiente:

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

escapese implementa de manera diferente en diferentes navegadores y encodeURIno codifica muchos caracteres (como # e incluso /); está hecho para usarse en un URI / URL completo sin romperlo, lo que no es muy útil ni seguro.

Y como @Jochem señala a continuación, es posible que desee usar encodeURIComponent()en un (cada) nombre de carpeta, pero por alguna razón, estas API no parecen querer +en los nombres de carpeta, por lo que los viejos encodeURIComponentfuncionan muy bien.

Ejemplo:

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

Si está utilizando jQuery, iría por el $.parammétodo. Su URL codifica los campos de asignación de objetos a valores, lo que es más fácil de leer que llamar a un método de escape en cada valor.

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

encodeURIComponent () es el camino a seguir.

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

PERO debe tener en cuenta que existen pequeñas diferencias con respecto a la versión de php urlencode()y, como se mencionó en @CMS, no codificará todos los caracteres. Chicos en http://phpjs.org/functions/urlencode/ hicieron 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', '+');
}

Para codificar una URL, como se ha dicho antes, tiene dos funciones:

encodeURI()

y

encodeURIComponent()

La razón por la que ambos existen es que el primero conserva la URL con el riesgo de dejar demasiadas cosas sin escapar, mientras que el segundo codifica todo lo necesario.

Con el primero, podría copiar la URL recién escapada en la barra de direcciones (por ejemplo) y funcionaría. Sin embargo, sus '&' sin escape interferirían con los delimitadores de campo, los '=' interferirían con los nombres y valores de campo, y los '+' se verían como espacios. Pero para datos simples cuando desea preservar la naturaleza de URL de lo que está escapando, esto funciona.

El segundo es todo lo que necesita hacer para asegurarse de que nada en su cadena interfiera con una URL. Deja varios caracteres sin importancia sin escapes para que la URL permanezca lo más legible posible sin interferencia. Una URL codificada de esta manera ya no funcionará como una URL sin desescaparla.

Entonces, si puede tomarse el tiempo, siempre desea usar encodeURIComponent (), antes de agregar pares de nombre / valor codifique tanto el nombre como el valor usando esta función antes de agregarlo a la cadena de consulta.

Me está costando trabajo encontrar razones para usar el encodeURI (). Se lo dejaré a las personas más inteligentes.

Tipo similar de cosas que probé con javascript normal

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

Manera elegante

En mi humilde opinión, la forma más elegante de codificar parámetros de consulta es crear un objeto con parámetros como

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

y luego codificarlo usando:

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

como se menciona en esta respuesta: https://stackoverflow.com/a/53171438/7284582

Para evitar la doble codificación, es una buena idea decodificar la url antes de codificar (si se trata de URL ingresadas por el usuario, por ejemplo, que podrían estar ya codificadas).

Digamos que tenemos abc%20xyz 123como entrada (un espacio ya está codificado):

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

Qué es la codificación de URL:

Se debe codificar una URL cuando hay caracteres especiales ubicados dentro de la URL. Por ejemplo:

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

En este ejemplo, podemos observar que todos los caracteres, excepto la cadena, notEncodedestán codificados con signos%. La codificación URL también se conoce como codificación porcentual porque escapa a todos los caracteres especiales con un%. Luego, después de este signo%, cada carácter especial tiene un código único

¿Por qué necesitamos la codificación de URL?

Ciertos caracteres tienen un valor especial en una cadena URL. Por ejemplo, el? El carácter indica el comienzo de una cadena de consulta. Para localizar con éxito un recurso en la web, es necesario distinguir cuándo un carácter se entiende como parte de una cadena o parte de la estructura de la URL.

¿Cómo podemos lograr la codificación de URL en JS:

JS ofrece un montón de funciones de utilidad incorporadas que podemos usar para codificar fácilmente las URL. Estas son dos opciones convenientes:

1. encodeURIComponent(): Toma un componente de un URI como argumento y devuelve la cadena de URI codificada.
2. encodeURI(): Toma un URI como argumento y devuelve la cadena de URI codificada.

Ejemplo y advertencias:

Tenga en cuenta que no debe pasar toda la URL (incluido el esquema, por ejemplo, https: //) a encodeURIComponent(). En realidad, esto puede transformarlo en una URL no funcional. Por ejemplo:

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

Podemos observar si ponemos la URL completa en encodeURIComponentque las barras diagonales (/) también se convierten en caracteres especiales. Esto hará que la URL ya no funcione correctamente.

Por lo tanto (como su nombre lo indica) use:

1. encodeURIComponent en una determinada parte de una URL que desea codificar.
2. encodeURI en una URL completa que desea codificar.

Nada me funcionó. Todo lo que estaba viendo era el HTML de la página de inicio de sesión, volviendo al lado del cliente con el código 200. (302 al principio pero la misma solicitud de Ajax cargando la página de inicio de sesión dentro de otra solicitud de Ajax, que se suponía que era una redirección en lugar de cargarla sin formato texto de la página de inicio de sesión).

En el controlador de inicio de sesión, agregué esta línea:

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

Y en el controlador global de Ajax, hice esto:

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

Ahora no tengo ningún problema, y ​​funciona de maravilla.

Codificar cadena de URL

    var url = $ ( ubicación ). attr ( 'href' ); // obtener la url actual // O var url = 'folder / index.html? param = # 23dd & noob = yes' ; // o especifica 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

Aquí hay una demostración en vivo de JS encodeURIComponent()y decodeURIComponent()funciones incorporadas:

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

Puede usar la biblioteca esapi y codificar su url usando la siguiente función. La función asegura que '/' no se pierda en la codificación mientras que el resto del contenido del texto está codificado:

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

Utilice la fixedEncodeURIComponentfunción para cumplir estrictamente con RFC 3986 :

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

No deberías usarlo encodeURIComponent()directamente.

Eche un vistazo a RFC3986: Identificador uniforme de recursos (URI): sintaxis genérica

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

El propósito de los caracteres reservados es proporcionar un conjunto de caracteres delimitadores que se puedan distinguir de otros datos dentro de un URI.

Estos caracteres reservados de la definición de URI en RFC3986 NO SE ESCAPAN encodeURIComponent().

Documentos web de MDN: encodeURIComponent ()

Para ser más estrictos al adherirse a RFC 3986 (que se reserva!, ', (,) Y *), a pesar de que estos caracteres no tienen usos de delimitación de URI formalizados, se puede usar de manera segura lo siguiente:

Use la función MDN Web Docs ...

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