Firefox 和 Chromium JavaScript URL 验证与 new URL() 之间的差异

Question

我正在尝试验证 JavaScript 中的 URL，并且根据 MDN JavaScript 的

URL

API 与 Chromium 浏览器和 Firefox 兼容。然而，两个引擎的行为有所不同。具体来说，Chromium 浏览器似乎更加宽松，并且会自动应用编码，而 Firefox 则不会。

在使用

encodeURI('https://abc.co m')

进行验证之前，我尝试先对 URL 进行编码，但 Firefox 也不接受

https://abc.c%20m

作为有效 URL，所以我很困惑如何才能有一个好的方法来支持这两种浏览器无需求助于正则表达式。

我不确定为什么它们不同，或者谁是正确的。跨浏览器支持的一致、正确的方法是什么？

---

可运行片段：

const url = new URL("https://abc.c%20m");
console.log(url.hostname);

Answer 1

就像所有其他软件一样，浏览器也可能存在错误。根据您的屏幕截图，Chrome 似乎没有根据规范正确解析 URL，特别是§ 3.5 主机解析的步骤 4（解码）。主机名中不允许使用空格字符（无论是否采用百分比编码）。

在这种情况下 - 您必须解决运行时中本机 API 使用的实现代码中的错误（例如

URL

构造函数或其

canParse()

静态方法） - 您可以编写自己的符合规范的 URL 解析器的 JavaScript 实现，或审核声称这样做的现有解析器的源代码 ¹ 并使用它。

---

¹ 一个这样的例子是

whatwg-url

包 (repository) — 这里有一个使用问题中的输入进行演示的链接：https://jsdom.github.io/whatwg-url/# url=aHR0cHM6Ly9hYmMuYyUyMG0=&base=YWJvdXQ6Ymxhbms=