用JavaScript编码URL？

最新推荐文章于 2021-02-21 23:04:17 发布

p15097962069

最新推荐文章于 2021-02-21 23:04:17 发布

阅读量220

点赞数

文章标签： javascript url encoding

原文链接：https://cs.sofbug.com/question/1Oau

版权

本文详细介绍了JavaScript中如何对URL进行编码，探讨了为何需要URL编码，并提供了使用encodeURIComponent()和encodeURI()函数的示例，同时警告了在编码过程中需要注意的事项，确保URL在GET请求中能正确传递。

摘要由CSDN通过智能技术生成

如何使用JavaScript安全地编码URL，以便可以将其放入GET字符串中？

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

我假设您需要在第二行编码myUrl变量？

#1楼

什么都没有为我工作。我所看到的只是登录页面的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;
            }
        }
    });
});

现在，我没有任何问题，它就像一个护身符。

#2楼

最好的答案是对查询字符串中的值（以及其他任何地方）使用encodeURIComponent 。

但是，我发现许多API都希望将“”替换为“ +”，因此我不得不使用以下内容：

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

escape在不同的浏览器中实现的方式有所不同， encodeURI不会对许多字符进行编码（例如＃和甚至/），而是将其用于完整的URI / URL而不会破坏它-这不是超级有用或安全的做法。

就像@Jochem在下面指出的那样，您可能想在每个文件夹名称上使用encodeURIComponent() ，但是由于这些原因，这些API似乎都不希望在文件夹名称中使用+ ，因此普通的老式encodeURIComponent效果很好。

例：

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

#3楼

如果您使用的是jQuery，我将使用$.param方法。它使用URL编码将对象映射到值的字段，这比在每个值上调用转义方法更容易阅读。

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

#4楼

我尝试使用普通javascript进行的类似操作

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

#5楼

编码URL字符串

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

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

#6楼

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('!', '%21')
    .replace('\'', '%27')
    .replace('(', '%28')
    .replace(')', '%29')
    .replace('*', '%2A')
    .replace('%20', '+');
}

#7楼

签出内置函数encodeURIComponent（str）和encodeURI（str）。
在您的情况下，这应该起作用：

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

#8楼

您有三种选择：

escape()将不会编码： @*/+
encodeURI()将不会编码： ~!@#$&*()=:/,;?+'
encodeURIComponent()不会编码： ~!*()'

但在您的情况下，如果要将URL传递到其他页面的GET参数中，则应使用escape或encodeURIComponent ，而不要使用encodeURI 。

请参阅堆栈溢出问题最佳实践：转义，或encodeURI / encodeURIComponent进行进一步的讨论。

#9楼

您可以使用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

#10楼

为了防止双重编码，最好在编码之前对url进行解码（例如，如果要处理用户输入的url，可能已经编码了）。

可以说我们有abc%20xyz 123作为输入（已经编码了一个空格）：

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

#11楼

如前所述，要对URL进行编码，您有两个功能：

encodeURI()

和

encodeURIComponent()

两者都存在的原因是，第一个保留了URL，但有使太多内容无法逃脱的风险，而第二个则对所需的所有内容进行了编码。

对于第一个，您可以将新转义的URL复制到地址栏中（例如），它可以工作。但是，未转义的“＆”会干扰字段定界符，“ =”会干扰字段名和值，而“ +”则看起来像空格。但是对于简单数据，当您想要保留要转义的URL的本性时，这是可行的。

第二个是您需要做的所有事情，以确保字符串中的任何内容都不会干扰URL。它保留了各种不重要的字符，从而使URL尽可能保持人类可读性，而不会受到干扰。如果不进行转义，则以这种方式编码的URL将不再用作URL。

因此，如果可以的话，您总是想使用encodeURIComponent（）－在添加名称/值对之前，使用此函数对名称和值进行编码，然后再将其添加到查询字符串中。

我在艰难时期想出使用encodeURI（）的理由-我会将其留给聪明的人。

#12楼

什么是网址编码：

如果URL中包含特殊字符，则应对URL进行编码。例如：

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

在此示例中，我们可以观察到，除字符串notEncoded以外的所有字符均使用％符号编码。 URL编码也称为百分比编码，因为它会用％转义所有特殊字符。然后，在此％符号后，每个特殊字符都有一个唯一的代码

为什么我们需要URL编码：

某些字符在URL字符串中具有特殊值。例如，？字符表示查询字符串的开头。为了成功地在Web上定位资源，有必要区分字符是字符串的一部分还是url结构的一部分。

我们如何在JS中实现URL编码：

JS提供了一堆内置实用程序功能，我们可以使用它们轻松地对URL进行编码。这是两个方便的选项：

encodeURIComponent() ：以URI的组成部分作为参数，并返回编码的URI字符串。
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无法正常运行。

因此（顾名思义）使用：

要编码的URL的特定部分上的encodeURIComponent 。
您要编码的整个URL上的encodeURI 。

#13楼

这是内置函数内的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>

#14楼

使用fixedEncodeURIComponent函数严格遵守RFC 3986 ：

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

#15楼

以我的拙见，对查询参数进行编码的最优雅的方法是创建一个具有以下参数的对象

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

然后使用以下代码对其进行编码：

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

如此答案中所述： https : //stackoverflow.com/a/53171438/7284582

#16楼

坚持使用encodeURIComponent() 。函数encodeURI()不会麻烦编码许多在URL中具有语义重要性的字符（例如“＃”，“？”和“＆”）。 escape()已被弃用，并且不会费心地对“ +”字符进行编码，后者将被解释为服务器上的已编码空格（并且，如此处其他人所指出的那样，不会正确地对非ASCII字符进行URL编码）。

在其他地方， encodeURI()和encodeURIComponent()之间的区别有一个很好的解释。如果您希望对某些内容进行编码，以便可以安全地将其包含为URI的组件（例如，作为查询字符串参数），则可以使用encodeURIComponent() 。