Кодировать URL в JavaScript? - PullRequest
       72

Кодировать URL в JavaScript?

2308 голосов
/ 02 декабря 2008

Как безопасно кодировать URL-адрес с помощью JavaScript, чтобы его можно было поместить в строку GET?

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

Я полагаю, вам нужно кодировать переменную myUrl во второй строке?

Ответы [ 14 ]

2 голосов
/ 09 февраля 2019

Вот встроенные функции LIVE DEMO из encodeURIComponent() и decodeURIComponent() 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>
2 голосов
/ 23 сентября 2018

Что такое кодировка URL:

URL-адрес должен быть закодирован, если в нем есть специальные символы. Например:

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

В этом примере мы можем наблюдать, что все символы, кроме строки notEncoded, кодируются со знаками%. Кодировка URL также известна как процентная кодировка , поскольку она экранирует все специальные символы с помощью%. Затем после этого знака% каждый специальный символ имеет уникальный код

Зачем нам нужна кодировка URL:

Некоторые символы имеют специальное значение в строке URL. Например,? символ обозначает начало строки запроса. Чтобы успешно найти ресурс в сети, необходимо различать, когда символ подразумевается как часть строки или часть структуры URL.

Как мы можем добиться кодирования URL в JS:

JS предлагает набор встроенных служебных функций, которые мы можем использовать для простого кодирования URL. Это два удобных варианта:

  1. encodeURIComponent(): принимает компонент URI в качестве аргумента и возвращает закодированную строку URI.
  2. encodeURI(): принимает URI в качестве аргумента и возвращает закодированную строку URI.

Пример и предостережения:

Помните, что не следует передавать весь URL (включая схему, например, https://) в encodeURIComponent(). Это может фактически превратить его в неработающий URL. Например:

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

Мы можем заметить, что если поместить весь URL-адрес в encodeURIComponent, то косые черты (/) также преобразуются в специальные символы. Это приведет к тому, что URL больше не будет работать должным образом.

Поэтому (как следует из названия) используйте:

  1. encodeURIComponent для определенной части URL, которую вы хотите закодировать.
  2. encodeURI на весь URL, который вы хотите закодировать.
2 голосов
/ 10 сентября 2015

Кодирование строки URL

    var url = $(location).attr('href'); //get current url
    //OR
    var url = 'folder/index.html?param=#23dd&noob=yes'; //or specify one</p>

<code>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
</code>
1 голос
/ 27 сентября 2016

Вы можете использовать библиотеку esapi и кодировать свой URL, используя функцию ниже. Функция выдерживает то, что «/» не теряется при кодировании, а остальная часть текстового содержимого кодируется:

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...