Pregunta Codificar URL en JavaScript?


¿Cómo se puede codificar de forma segura una URL usando JavaScript de manera que se pueda poner en una cadena GET?

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

Supongo que necesitas codificar el myUrl variable en esa segunda línea?


2121
2017-12-02 02:37


origen


Respuestas:


Echa un vistazo a la función incorporada encodeURIComponent(str) y encodeURI(str).
En tu caso, esto debería funcionar:

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

2489
2017-12-02 02:43



Tienes tres opciones:

  • escape() no codificará @*/+

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

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

Pero en tu caso, si quieres pasar un URL en un GET parámetro de otra página, debes usar escape o encodeURIComponent, pero no encodeURI.

Ver la pregunta de desbordamiento de pila Mejor práctica: escape, o encodeURI / encodeURIComponent para mayor discusión.


1373
2017-12-02 02:49



Seguir 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 los caracteres "+", que se interpretarán como espacios codificados en el servidor (y, como señalaron otros aquí, no codifica URL correctamente caracteres que no sean ASCII).

Hay un buen explicación de la diferencia entre encodeURI() y encodeURIComponent() en otra parte. Si desea codificar algo para que pueda incluirse de manera segura como un componente de un URI (por ejemplo, como un parámetro de cadena de consulta), desea utilizarlo encodeURIComponent().


156
2018-05-29 23:54



Personalmente, me parece que muchas API quieren reemplazar "" por "+", así que uso lo siguiente:

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

escape se implementa de manera diferente en diferentes navegadores y encodeURI no codifica la mayoría de los caracteres que son funcionales en un URI (como # e incluso /) - está hecho para usarse en un URI / URL completo sin romperlo.

NOTA: Utiliza encodeURIComponent para valores de la cadena de consulta (no campos / nombres de valores y definitivamente no toda la URL). Si lo haces de otra forma, no codificará caracteres como =,?, &, Posiblemente dejando expuesta tu cadena de consulta.

Ejemplo:

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

66
2017-12-15 08:47



Si está utilizando jQuery, yo iría por $.param método. Su URL codifica un objeto asignando campos a valores, 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

35
2018-05-13 03:32



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

encodeURI()

y

encodeURIComponent()

La razón por la que ambas existen es que la primera conserva la URL con el riesgo de dejar demasiadas cosas sin guardar, mientras que la segunda codifica todo lo que se necesita.

Con la primera, podría copiar la URL recién escapada en la barra de direcciones (por ejemplo) y funcionaría. Sin embargo, sus '' y '' s no escaneados interferirían con los delimitadores de campo, los '=' interferirían con los nombres y valores de los campos, 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 interfiere con una URL. Deja varios caracteres sin importancia sin guardar para que la URL permanezca lo más humanamente legible posible sin interferencia. Una URL codificada de esta manera ya no funcionará como una URL sin abrirla.

Entonces, si puede tomarse el tiempo, siempre quiere usar encodeURIComponent () - antes de agregar pares de nombre / valor codifica el nombre y el valor usando esta función antes de agregarlo a la cadena de consulta.

Me está costando encontrar razones para usar el encodeURI (). Lo dejo a las personas más inteligentes.


8
2018-01-26 21:31



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 menciona en @CMS, no codificará todos los caracteres. Chicos en http://phpjs.org/functions/urlencode/ hecho 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(/!/g, '%21')
    .replace(/'/g, '%27')
    .replace(/\(/g, '%28')
    .
  replace(/\)/g, '%29')
    .replace(/\*/g, '%2A')
    .replace(/%20/g, '+');
}

7
2017-10-01 08:03



Algo similar probé con javascript normal

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

4
2018-01-05 18:49



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 123 como entrada (un espacio ya está codificado):

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

3
2018-06-22 03:28



Nada funcionó para mí. 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 un redireccionamiento en lugar de cargar 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 Ajax global, 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 como un encanto.


2
2017-09-10 06:41