如何使用JavaScript安全地编码URL,以便将其放入GET字符串中?
var myUrl = "http://example.com/index.html?param=1&anotherParam=2";
var myOtherUrl = "http://example.com/index.html?url=" + myUrl;
我假设您需要在第二行编码myUrl变量?
如何使用JavaScript安全地编码URL,以便将其放入GET字符串中?
var myUrl = "http://example.com/index.html?param=1&anotherParam=2";
var myOtherUrl = "http://example.com/index.html?url=" + myUrl;
我假设您需要在第二行编码myUrl变量?
当前回答
我认为在2022年,为了真正安全,您应该始终考虑使用URL()接口构建URL。它将为您完成大部分工作。所以,说到你的代码,
常量baseURL='http://example.com/index.html';const myUrl=新URL(baseURL);myUrl.searchParams.append(“参数”,“1”);myUrl.searchParams.append(“otherParam”,“2”);const myOtherUrl=新URL(baseURL);myOtherUrl.searchParams.append('url',myUrl.href);console.log(myUrl.href);//输出:http://example.com/index.html?param=1&anotherParam=2console.log(myOtherUrl.href);//输出:http://example.com/index.html?url=http%3A%2F%2Fexample.com%2Findex.html%3Fparam%3D1%26anotherParam%3D2console.log(myOtherUrl.searchParams.get('url'));//输出:http://example.com/index.html?param=1&anotherParam=2
或
const params = new URLSearchParams(myOtherUrl.search);
console.log(params.get('url'));
// Outputs: http://example.com/index.html?param=1&anotherParam=2
像这样的东西肯定不会失败。
其他回答
什么是URL编码:
当URL中有特殊字符时,应对URL进行编码。例如:
console.log(encodeURIComponent('?notEncoded=&+'));
我们可以在这个例子中观察到,除了字符串notEncoded之外的所有字符都用%符号编码。URL编码也称为百分比编码,因为它用%转义所有特殊字符。然后在这个%符号之后,每个特殊字符都有一个唯一的代码
为什么我们需要URL编码:
某些字符在URL字符串中具有特殊值。例如?字符表示查询字符串的开头。为了在web上成功定位资源,必须区分字符是字符串的一部分还是URL结构的一部分。
如何在JavaScript中实现URL编码:
JavaScript提供了一系列内置实用程序函数,我们可以使用这些函数轻松地对URL进行编码。有两个方便的选项:
encodeURIComponent():将URI的一个组件作为参数,并返回编码的URI字符串。encodeURI():将URI作为参数并返回编码的URI字符串。
示例和警告:
注意不要将整个URL(包括方案,例如https://)传递到encodeURIComponent()中。这实际上可以将其转换为不起作用的URL。例如:
//对于整个URI,不要使用encodeURIComponent,它将转换///字符和URL不能正常工作console.log(encodeURIComponent(“http://www.random.com/specials&char.html"));//而是对整个URL使用encodeURIconsole.log(encodeURI(“http://www.random.com/specials&char.html"));
我们可以观察到,如果我们将整个URL放在encodeURIComponent中,正斜杠(/)也会转换为特殊字符。这将导致URL不再正常运行。
因此(顾名思义)使用:
encodeURIComponent位于要编码的URL的特定部分。要编码的整个URL上的encodeURI。
为了防止双重编码,最好在编码之前解码URL(例如,如果您处理的是用户输入的URL,可能已经编码)。
假设我们有abc%20xyz 123作为输入(一个空格已编码):
encodeURI("abc%20xyz 123") // Wrong: "abc%2520xyz%20123"
encodeURI(decodeURI("abc%20xyz 123")) // Correct: "abc%20xyz%20123"
我建议使用qs-npm包:
qs.stringify({a:"1=2", b:"Test 1"}); // gets a=1%3D2&b=Test+1
它更容易与JavaScript对象一起使用,并且为所有参数提供了正确的URL编码。
如果您使用jQuery,我会使用$.param方法。它对一个对象进行URL编码,将字段映射到值,这比对每个值调用转义方法更容易读取。
$.param({a:"1=2", b:"Test 1"}) // Gets a=1%3D2&b=Test+1
编码URL字符串
var url = $(location).attr('href'); // Get the 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
有关详细信息,请转到jQuery编码/解码URL字符串。
不应直接使用encodeURIComponent()。
看看RFC3986:统一资源标识符(URI):通用语法
sub-delims=“!”/“$”/“&”/“'”/“(”/“)”/ "*" / "+" / "," / ";" / "="保留字符的目的是提供一组可与URI中的其他数据区分的分隔字符。
这些来自RFC3986中URI定义的保留字符不会被encodeURIComponent()转义。
MDN Web文档:encodeURIComponent()
为了更严格地遵守RFC 3986(保留!、'、(、)和*),即使这些字符没有正式的URI分隔用途,也可以安全地使用以下字符:
使用MDN Web Docs功能。。。
function fixedEncodeURIComponent(str) {
return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
return '%' + c.charCodeAt(0).toString(16);
});
}