JavaScript 中 URL 和 URLSearchParams 的陷阱

javascript 中 url 和 urlsearchparams 的陷阱

一切都始于一个错误

在 javascript 和 node.js 中使用 url 应该很简单，但是我们项目中最近的一个错误让我陷入了 url 和 urlsearchparams api 中微妙怪癖的兔子洞。这篇文章将探讨这些怪癖，它们如何在您的代码中引起问题，以及您可以采取哪些措施来避免它们。

问题：使用 axios 处理 url

我们在生成 url 并向其添加哈希签名时遇到了此问题。查询参数的百分比编码不一致，导致意外行为和错误的哈希签名。

很明显，url 和 urlsearchparams 对象之间的交互需要格外小心。

陷阱#1：url.search 与 urlsearchparams.tostring()

第一个惊喜是 url.search 和 urlsearchparams.tostring() 之间的区别。

使用 .searchparams 修改 url 时要小心，因为根据 whatwg 规范，urlsearchparams 对象使用不同的规则来确定要对哪些字符进行百分比编码。例如，url 对象不会对 ascii 波形符 (~) 字符进行百分号编码，而 urlsearchparams 将始终对其进行编码。

// example 1
const url = new url("https://example.com?param=foo bar");
console.log(url.search); // prints param=foo%20bar
console.log(url.searchparams.tostring()); // prints ?param=foo+bar

// example 2
const myurl = new url('https://example.org/abc?foo=~bar');
console.log(myurl.search);  // prints ?foo=~bar
// modify the url via searchparams...
myurl.searchparams.sort();
console.log(myurl.search);  // prints ?foo=%7ebar

在我们的项目中，我们需要显式地重新分配 url.search = url.searchparams.tostring() 以确保查询字符串的编码一致。

陷阱#2：加号困境

另一个问题是 urlsearchparams 如何处理字符。默认情况下，urlsearchparams 将解释为空格，这在编码二进制数据或 base64 字符串时可能会导致数据损坏。

const params = new urlsearchparams("bin=e+axqb+a");
console.log(params.get("bin")); // "e axqb a"

一种解决方案是在将值附加到 urlsearchparams 之前使用encodeuricomponent：

params.append("bin", encodeuricomponent("e+axqb+a"));

更多详细信息请参阅 mdn 文档。

陷阱 #3：urlsearchparams.get 与 urlsearchparams.tostring()

比较 urlsearchparams.get 和 urlsearchparams.tostring 的输出时会出现另一个微妙之处。例如：

const params = new urlsearchparams("?key=value&key=other");
console.log(params.get("key")); // "value" (first occurrence)
console.log(params.tostring()); // "key=value&key=other" (all occurrences serialized)

在多值场景中，get 仅返回第一个值，而 tostring 则序列化所有值。

我们代码库中的修复

在我们的项目中，我们通过显式重新分配搜索属性解决了该问题：

url.search = url.searchparams.tostring();
url.searchparams.set(
  "hash",
  cryptography.createsha256hmacbase64urlsafe(url.href, secret_key ?? "")
);

这确保了在添加哈希值之前所有查询参数都已正确编码。

node.js 查询字符串模块

whatwg urlsearchparams 接口和 querystring 模块具有类似的用途，但 querystring 模块的用途更通用，因为它允许自定义分隔符（& 和 =）。另一方面，urlsearchparams api 纯粹是为 url 查询字符串而设计的。

querystring 比 urlsearchparams 性能更高，但不是标准化 api。当性能不重要或需要与浏览器代码兼容时，请使用 urlsearchparams。

与 querystring 模块不同，使用 urlsearchparams 时，不允许数组值形式的重复键。数组使用 array.tostring() 进行字符串化，它只是用逗号连接所有数组元素。

const params = new urlsearchparams({
  user: 'abc',
  query: ['first', 'second'],
});
console.log(params.getall('query'));
// prints [ 'first,second' ]
console.log(params.tostring());
// prints 'user=abc&query=first%2csecond'

使用querystring模块，查询字符串'foo=bar&abc=xyz&abc=123'被解析为：

{
  "foo": "bar",
  "abc": ["xyz", "123"]
}

要点

小心 urlsearchparams 处理特殊字符（例如 ~）和空格。必要时使用encodeuricomponent。
了解 url.search、urlsearchparams.get 和 urlsearchparams.tostring 之间的区别，以避免意外行为。
在 node.js 中，如果要将重复的查询参数键解析为数组，请使用查询字符串模块。

以上就是JavaScript 中 URL 和 URLSearchParams 的陷阱的详细内容，更多请关注硕下网其它相关文章！