用JavaScript编码URL？

Stafan小哥2020-03-09

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

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

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

A小卤蛋Pro2020/03/09 17:26:46

这里有一个现场演示的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>

小卤蛋小卤蛋小哥2020/03/09 17:26:46

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

猴子阳光2020/03/09 17:26:46

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

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

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

2020/03/09 17:26:46

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

有一个很好的区别的解释encodeURI()和encodeURIComponent()其他地方。如果您想对某些内容进行编码，以便可以安全地将其作为URI的组成部分（例如，作为查询字符串参数），请使用encodeURIComponent()。

TomL2020/03/09 17:26:46

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

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

LEY蛋蛋Near2020/03/09 17:26:46

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

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer