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

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

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

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

вопрос задан 2.12.2008
nickf
362144 репутация

13 ответов


  • 2521 рейтинг

    Проверьте встроенную функцию encodeURIComponent(str) и encodeURI(str) .
    В вашем случае это должно работать:

     var myOtherUrl = 
           "http://example.com/index.html?url=" + encodeURIComponent(myUrl);
     
    ответ дан Buu Nguyen, с репутацией 40546, 2.12.2008
  • 1387 рейтинг

    У вас есть три варианта:

    • escape() не будет кодироваться: @*/+

    • encodeURI() не будет кодироваться: ~!@#$&*()=:/,;?+'

    • encodeURIComponent() не будет кодироваться: ~!*()'

    Но в вашем случае, если вы хотите передать URL-адрес в параметр GET другой страницы, вы должны использовать escape или encodeURIComponent , но не encodeURI .

    См. Вопрос «Переполнение стека». Лучшая практика: escape или encodeURI / encodeURIComponent для дальнейшего обсуждения.

    ответ дан CMS, с репутацией 572469, 2.12.2008
  • 158 рейтинг

    Stick с encodeURIComponent() . Функция encodeURI() не требует кодирования многих символов, имеющих семантическое значение в URL-адресах (например, «#», «?» И «&»). escape() устарел и не требует кодирования символов «+», которые будут интерпретироваться как закодированные пробелы на сервере (и, как указано другими здесь, неправильно кодирует URL-символы, отличные от ASCII).

    Существует хорошее объяснение разницы между encodeURI() и encodeURIComponent() другом месте. Если вы хотите закодировать что-то, чтобы его можно было включить в качестве компонента URI (например, в качестве параметра строки запроса), вы хотите использовать encodeURIComponent() .

    ответ дан Mike Brennan, с репутацией 2528, 29.05.2011
  • 66 рейтинг

    Лично я считаю, что многие API-интерфейсы хотят заменить «" на «+», поэтому я использую следующее:

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

    escape реализуется по-разному в разных браузерах, а encodeURI не кодирует большинство символов, которые являются функциональными в URI (например, # и даже /) - это делается для использования на полном URI / URL, не нарушая его.

    ПРИМЕЧАНИЕ . Вы используете encodeURIComponent для значений в строке запроса (не имена полей / значений и, определенно, не весь URL). Если вы сделаете это любым другим способом, он не будет кодировать символы типа =,?, &, Возможно, оставив вашу строку запроса открытой.

    Пример:

     const escapedValue = encodeURIComponent(value).replace(/%20/g,'+');
    const url = 'http://example.com/?myKey=' + escapedValue;
     
    ответ дан Ryan Taylor, с репутацией 4429, 15.12.2012
  • 35 рейтинг

    Если вы используете jQuery, я бы пошел на метод $.param . Этот URL-адрес кодирует поля сопоставления объектов для значений, которые легче читать, чем вызов метода escape для каждого значения.

     $.param({a:"1=2", b:"Test 1"}) // gets a=1%3D2&b=Test+1
     
    ответ дан Maksym Kozlenko, с репутацией 8451, 13.05.2013
  • 9 рейтинг

    Чтобы кодировать URL-адрес, как было сказано ранее, у вас есть две функции:

     encodeURI()
     

    а также

     encodeURIComponent()
     

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

    Во-первых, вы можете скопировать недавно экранированный URL-адрес в адресную строку (например), и это сработает. Однако ваши unescaped '&' будут вмешиваться в полевые разделители, '=' будут мешать именам полей и значениям, а «+» будут выглядеть как пробелы. Но для простых данных, когда вы хотите сохранить природу URL-адреса того, что вы ускользаете, это работает.

    Во-вторых, все, что вам нужно сделать, чтобы убедиться, что ничто в вашей строке не связано с URL-адресом. Он оставляет различные несущественные символы незанятыми, чтобы URL-адрес оставался максимально понятным для человека без помех. URL-адрес, закодированный таким образом, больше не будет работать как URL-адрес, не отменив его.

    Поэтому, если вы можете потратить время, вы всегда хотите использовать encodeURIComponent () - перед добавлением пар имя / значение кодируйте имя и значение с помощью этой функции, прежде чем добавлять их в строку запроса.

    Мне сложно найти причины использования encodeURI () - я оставлю это более умным людям.

    ответ дан Gerard ONeill, с репутацией 2236, 26.01.2017
  • 8 рейтинг

    encodeURIComponent () - это путь.

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

    НО вы должны иметь в виду, что есть небольшие отличия от php версии urlencode() и, как упоминалось в @CMS, он не будет кодировать каждый символ. Ребята в http://phpjs.org/functions/urlencode/ сделали js эквивалентом 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, '+');
    }
     
    ответ дан Adam Fischer, с репутацией 738, 1.10.2015
  • 4 рейтинг

    Подобная вещь, которую я пробовал с обычным javascript

     function fixedEncodeURIComponent(str){
         return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
    }
     
    ответ дан Narayan Yerrabachu, с репутацией 645, 14.05.2013
  • 3 рейтинг

    Чтобы предотвратить двойное кодирование, рекомендуется декодировать url перед кодированием (если вы имеете дело с введенными пользователем URL-адресами, например, которые могут быть уже закодированы).

    Допустим, что мы имеем abc%20xyz 123 качестве входных данных (одно пространство уже закодировано):

     encodeURI("abc%20xyz 123")            //   wrong: "abc%2520xyz%20123"
    encodeURI(decodeURI("abc%20xyz 123")) // correct: "abc%20xyz%20123"
     
    ответ дан serg, с репутацией 75712, 5.01.2017
  • 2 рейтинг

    Ничто не сработало для меня. Все, что я видел, это HTML-страница входа в систему, возвращающаяся на клиентскую сторону с кодом 200. (302 сначала, но тот же Ajax-запрос, загружающий страницу входа в другой Ajax-запрос, который должен был быть перенаправлением, а не загрузкой простого текст страницы входа в систему).

    В контроллере входа я добавил эту строку:

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

    И в глобальном обработчике Ajax я сделал это:

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

    Теперь у меня нет никаких проблем, и это работает как шарм.

    ответ дан Asif Ashraf, с репутацией 400, 22.06.2012
  • 1 рейтинг

    Кодировать строку URL

        var url = $ (location) .attr ('href'); // получить текущий url
        //ИЛИ
        var url = 'folder / index.html? param = # 23dd & noob = yes'; // или указать один 

    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
    ответ дан Sangeet Shah, с репутацией 1685, 10.09.2015
  • 0 рейтинг

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

    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 , чтобы косые черты foward (/) также были преобразованы в специальные символы. Это приведет к тому, что URL-адрес не будет функционировать должным образом.

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

    1. encodeURIComponent на определенной части URL-адреса, который вы хотите кодировать.
    2. encodeURI на весь URL, который вы хотите кодировать.
    ответ дан Willem van der Veen, с репутацией 2793, 23.09.2018
  • 0 рейтинг

    Вы можете использовать библиотеку 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

    ответ дан Mohith Maratt, с репутацией 71, 27.09.2016