web-dev-qa-db-pt.com

Codificar URL em JavaScript?

Como você codifica com segurança uma URL usando JavaScript de forma que ela possa ser colocada em uma string GET?

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

Eu suponho que você precisa codificar a variável myUrl nessa segunda linha?

2236
nickf

Verifique a função interna encodeURIComponent(str) e encodeURI(str).
No seu caso, isso deve funcionar:

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

Você tem três opções:

  • escape() não irá codificar: @*/+

  • encodeURI() não irá codificar: [email protected]#$&*()=:/,;?+'

  • encodeURIComponent() não irá codificar: ~!*()'

Mas no seu caso, se você quiser passar um parâmetro URL para um GET de outra página, você deve usar escape ou encodeURIComponent, mas não encodeURI.

Veja Stack Overflow question Melhor prática: escape, ou encodeURI/encodeURIComponent para uma discussão mais aprofundada.

1438
CMS

Fique com encodeURIComponent() . A função encodeURI() não se preocupa em codificar muitos caracteres que têm importância semântica em URLs (por exemplo, "#", "?" E "&"). escape() está obsoleto e não se preocupa em codificar caracteres "+", que serão interpretados como espaços codificados no servidor (e, como apontado por outros aqui, não codifica corretamente caracteres não-ASCII em URL) .

Há um Nice explicação da diferença entre encodeURI() e encodeURIComponent() em outro lugar. Se você quiser codificar algo para que possa ser incluído com segurança como um componente de um URI (por exemplo, como um parâmetro de string de consulta), você deseja usar encodeURIComponent().

165
Mike Brennan

Pessoalmente, acho que muitas APIs querem substituir "" por "+", portanto, uso o seguinte:

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

escape é implementado de forma diferente em navegadores diferentes e encodeURI não codifica a maioria dos caracteres que são funcionais em um URI (como # e even /) - é feito para ser usado em um URI/URL completo sem quebrá-lo.

NOTE: Você usa encodeURIComponent para os valoresna string de consulta(não nomes de campos/valores e definitivamente não o URL inteiro). Se você fizer isso de outra maneira, ele não codificará caracteres como =,?, &, Possivelmente deixando sua string de consulta exposta.

Exemplo:

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

Se você estiver usando jQuery eu iria para $.param method. Ele codifica um campo de mapeamento de objeto para valores, o que é mais fácil de ler do que chamar um método de escape em cada valor.

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

Para codificar uma URL, como foi dito antes, você tem duas funções:

encodeURI()

encodeURIComponent()

A razão pela qual ambos existem é que o primeiro preserva o URL com o risco de deixar muitas coisas sem escape, enquanto o segundo codifica tudo o que é necessário.

Com o primeiro, você poderia copiar o URL recém-escapado na barra de endereços (por exemplo) e funcionaria. No entanto, seus '& s' sem escape interfeririam nos delimitadores de campo, os '=' interfeririam nos nomes e valores dos campos e os '+' se pareceriam com espaços. Mas, para dados simples, quando você deseja preservar a natureza da URL do que está escapando, isso funciona.

A segunda é tudo o que você precisa fazer para garantir que nada na sua string interaja com uma URL. Ele deixa vários caracteres sem importância sem escape, de modo que o URL permaneça o mais legível possível, sem interferência. Um URL codificado dessa maneira não funcionará mais como um URL sem removê-lo.

Portanto, se você puder usar o tempo, sempre desejará usar encodeURIComponent () - antes de adicionar pares nome/valor, codificar o nome e o valor usando essa função antes de adicioná-la à string de consulta.

Eu estou tendo um tempo difícil chegando com razões para usar o encodeURI () - eu vou deixar isso para as pessoas mais inteligentes.

9
Gerard ONeill

encodeURIComponent () é o caminho a percorrer.

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

MAS você deve ter em mente que existem pequenas diferenças da versão do php urlencode() e como o @CMS mencionado, ele não irá codificar todos os caracteres. Pessoal em http://phpjs.org/functions/urlencode/ 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, '+');
}
8
Adam Fischer

Tipo semelhante de coisa que eu tentei com javascript normal

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

Para evitar a codificação dupla, é uma boa idéia decodificar o URL antes da codificação (se você estiver lidando com URLs inseridos pelo usuário, por exemplo, que já pode estar codificado).

Vamos dizer que temos abc%20xyz 123 como entrada (um espaço já está codificado):

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

Nada funcionou para mim. Tudo o que eu estava vendo era o HTML da página de login, voltando ao lado do cliente com o código 200. (302 no início, mas o mesmo pedido do Ajax carregando a página de login dentro de outro pedido Ajax, que deveria ser um redirecionamento em vez de carregar simples texto da página de login).

No controlador de login, adicionei esta linha:

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

E no manipulador global do Ajax, fiz isso:

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

Agora eu não tenho nenhum problema, e funciona como um encanto.

2
Asif Ashraf

Aqui está uma função LIVE DEMO de encodeURIComponent() e decodeURIComponent() JS embutida:

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

O que é codificação de URL:

Um URL deve ser codificado quando houver caracteres especiais localizados dentro do URL. Por exemplo:

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

Podemos observar neste exemplo que todos os caracteres, exceto a string notEncoded, são codificados com sinais%. A codificação de URL também é conhecida como porcentagem de codificação porque ela escapa de todos os caracteres especiais com um%. Então, após esse sinal%, todo caractere especial tem um código único

Por que precisamos de codificação de URL:

Certos caracteres têm um valor especial em uma string de URL. Por exemplo, o? caractere indica o início de uma string de consulta. Para localizar com êxito um recurso na Web, é necessário distinguir entre quando um caractere é entendido como parte da sequência ou parte da estrutura da URL.

Como podemos conseguir a codificação de URL no JS:

JS oferece um monte de compilação na função de utilidade que podemos usar para codificar facilmente URLs. Estas são duas opções convenientes:

  1. encodeURIComponent(): usa um componente de um URI como argumento e retorna a string URI codificada.
  2. encodeURI(): usa um URI como argumento e retorna a string URI codificada.

Exemplo e advertências:

Esteja ciente de não passar o URL inteiro (incluindo o esquema, por exemplo, https: //) para o encodeURIComponent(). Isso pode realmente transformá-lo em uma URL não funcional. Por exemplo:

// 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 se colocamos a URL inteira em encodeURIComponent que as barras de avanço (/) também são convertidas em caracteres especiais. Isso fará com que a URL não funcione corretamente. 

Portanto (como o nome indica) use:

  1. encodeURIComponent em uma determinada parte de um URL que você deseja codificar.
  2. encodeURI em um URL inteiro que você deseja codificar.
0
Willem van der Veen

Você pode usar a biblioteca esapi e codificar sua url usando a função abaixo. A função suporta que '/' não são perdidos para a codificação enquanto o restante do conteúdo do texto é 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

0
Mohith Maratt