JavaScript中更安全的URL读写


你能发现这段代码中的错误吗？你可能不知不觉地以不安全的方式编写URL了。

1
2
3
4
const url = `https://builder.io/api/v2/content
  ?model=${model}&locale=${locale}?query.text=${text}`

const res = await fetch(url)

常见问题＃1：分隔符字符不正确

带有额外 ? 的URL字符串
哎呀！这显然是一个初学者的错误，但很容易被忽视，我在自己的代码中甚至在JS开发十年后也发现了这个错误。

在我看来，这种错误的常见原因是在编辑或移动代码之后。例如，你有一个结构正确的URL，然后从一个地方复制一部分到另一个地方，然后错过了参数分隔符被错误地排列的事实。

这也可能发生在连接时。例如：

1
url = url + '?foo=bar'

但等等，原始url可能已经有一个查询参数了。好的，这应该是：

1
url = url + '&foo=bar'

但是，等等，如果原始url没有查询参数，那么这样现在就是错的了。糟糕。

##b常见问题＃2：忘记编码
带有未编码参数的URL字符串
噢。模型和locale可能不需要编码，因为它们是URL安全值，但我没有停下来考虑文本可能是各种文本，包括空格和特殊字符，这会给我们带来问题。

所以也许我们会过度纠正并且更加谨慎地处理事情：

1
2
3
4
5
6
7
8
const url = `https://builder.io/api/v2/content
  ?model=${
    encodeURIComponent(model)
  }&locale=${
    encodeURIComponent(locale)
  }&query.text=${
    encodeURIComponent(text)
  }`

常见问题＃3：意外的空白字符

带有意外空白字符的URL字符串
哎呀。为了将这个长URL分成多行，我们意外地包含了换行符和额外的空格进入URL，这将导致我们无法按预期工作。

现在我们可以正确地拆分字符串，但是我们变得更加混乱和难以阅读：

1
2
3
4
5
6
7
8
const url = `https://builder.io/api/v2/content`
  + `?model=${
    encodeURIComponent(model)
  }&locale=${
    encodeURIComponent(locale)
  }&query.text=${
    encodeURIComponent(text)
  }`

仅仅是为了正确地构造一个URL，我们就要做这么多。

URL构造函数来解救

解决上述挑战的更清晰和更安全的解决方案是使用URL构造函数：

1
2
3
4
5
6
7
const url = new URL('https://builder.io/api/v2/content')

url.searchParams.set('model', model)
url.searchParams.set('locale', locale)
url.searchParams.set('text', text)
  
const res = await fetch(url.toString())

这为我们解决了几个问题：

  • 分隔符字符始终正确（第一个参数使用？，之后使用&）。
  • 所有参数都会自动编码。
  • 在将长URL跨多行拆分时，不会有额外的空白字符。

    修改URL

    在我们需要修改URL但不知道当前状态的情况下，它也非常有帮助。

例如，不是遇到这个问题：

1
url += (url.includes('?') ? '&' : '?') + 'foo=bar'

我们可以直接这样做：

1
2
3
4
5
6
7
// 假设 `url` 是一个URL
url.searchParams.set('foo', 'bar')

// 或者如果URL是一个字符串
const structuredUrl = new URL(url)
structuredUrl.searchParams.set('foo', 'bar')
url = structuredUrl.toString()

同样，你也可以修改URL的其他部分：

1
2
3
4
5
6
7
const url = new URL('https://builder.io')

url.pathname = '/blog'      // 更新路径
url.hash = '#featured'      // 更新哈希
url.host = 'www.builder.io' // 更新主机

url.toString()              // https://www.builder.io/blog#featured

读取URL值

现在，“我只想从当前URL中读取查询参数而不使用库”这个古老的问题已经解决了。

1
const pageParam = new URL(location.href).searchParams.get('page')

或者例如使用以下方式更新当前URL：

1
2
3
4
const url = new URL(location.href)
const currentPage = Number(url.searchParams.get('page'))
url.searchParams.set('page', String(currentPage + 1))
location.href = url.toString()

但这不仅限于浏览器。它也可以在Node.js中使用：

1
2
3
4
5
6
const http = require('node:http');

const server = http.createServer((req, res) => {
  const url = new URL(req.url, `https://${req.headers.host}`)
  // 读取路径，查询等...
});

以及Deno：

1
2
3
4
5
6
7
import { serve } from "https://deno.land/std/http/mod.ts";
async function reqHandler(req: Request) {
  const url = new URL(req.url)
  // 读取路径，查询等...
  return new Response();
}
serve(reqHandler, { port: 8000 });

URL属性了解

URL实例支持浏览器中已经熟悉的所有属性，比如window.location或锚元素，你都可以读取和写入：

1
2
3
4
5
6
7
8
9
const url = new URL('https://builder.io/blog?page=1');

url.protocol // https:
url.host     // builder.io
url.pathname // /blog
url.search   // ?page=1
url.href     // https://builder.io/blog?page=1
url.origin   // https://builder.io
url.searchParams.get('page') // 1

一张URL的图表，并指出每个部分，比如“主机名”与“哈希”等。

URLSearchParams方法了解

URLSearchParams对象，在URL实例上作为url.searchParams可访问，支持一些方便的方法：

searchParams.has(name)

检查搜索参数是否包含给定名称：

1
url.searchParams.has('page') // true
searchParams.get(name)

获取给定参数的值：

1
url.searchParams.get('page') // '1'
searchParams.getAll(name)

获取为参数提供的所有值。如果您允许在相同名称下多次提供多个值，这很方便，比如&page=1&page=2：

1
url.searchParams.getAll('page') // ['1']
searchParams.set(name, value)

设置参数的值：

1
url.searchParams.set('page', '1')
searchParams.append(name, value)

追加参数 - 如果您可能支持同一参数多次，比如&page=1&page=2，这很有用：

1
url.searchParams.append('page', '2')
searchParams.delete(name)

从URL中完全删除参数：

1
url.searchParams.delete('page')

陷阱

一个大陷阱是，传递给URL构造函数的所有URL都必须是绝对URL。

例如，这将抛出错误：

1
new URL('/blog') // ERROR!

你可以通过提供origin作为第二个参数来解决这个问题，就像这样：

1
new URL('/blog', 'https://builder.io')

或者，如果你真的只需要处理URL的部分，你也可以直接使用URLSearchParams，如果你只需要处理相对URL的查询参数：

1
2
3
const params = new URLSearchParams('page=1')
params.set('page=2')
params.toString()

URLSearchParams还有一个好处，就是它还可以接受一个键值对对象作为其输入：

1
2
3
4
5
6
const params = new URLSearchParams({
  page: 1,
  text: 'foobar',
})
params.set('page=2')
params.toString()

浏览器和运行时支持

新的URL支持所有现代浏览器，以及Node.js和Deno！

涅槃快乐热爱生活，追求技术

个人简介。