URL.canParse 测试器

URL.canParse() 是 URL API 的一个静态方法，用于安全地检测一个 URL 字符串是否可以被成功解析。它返回 true 或 false，不会抛出异常。

相比之下，new URL(url) 在解析失败时会抛出 TypeError 异常，需要使用 try-catch 包裹。因此 URL.canParse() 更简洁、更安全，特别适合在条件判断中使用：

// ❌ 旧方式
try {
  new URL(userInput);
  // 有效
} catch {
  // 无效
}

// ✅ 新方式
if (URL.canParse(userInput)) {
  // 有效
}

不能完全保证安全。URL.canParse() 仅验证 URL 的语法格式是否合法，它不会：

• 检查 URL 是否真实可达（不发起网络请求）
• 检测 URL 是否包含恶意内容或钓鱼链接
• 验证域名是否在白名单中
• 检查协议是否安全（如仅允许 https）

对于安全敏感的应用，建议结合以下措施：

• 协议白名单检查（如仅允许 https:、mailto:）
• 域名白名单/黑名单过滤
• 结合 new URL() 解析后检查 hostname、protocol 等属性
• 使用内容安全策略 (CSP) 限制资源加载

URL.canParse(url, base) 的第二个参数 base 用于解析相对 URL。

• 如果 url 是绝对 URL（如 https://example.com/page），base 参数会被忽略。
• 如果 url 是相对路径（如 /api/data 或 ../users），则必须提供有效的 base 才能成功解析。

示例：

URL.canParse('/api/users', 'https://example.com')  // true
URL.canParse('/api/users')                          // false (无base)
URL.canParse('https://other.com', 'https://example.com')  // true (绝对URL，base被忽略)

URL.canParse() 支持多种协议，包括但不限于：

• 常见协议：http:、https:、ftp:、ws:、wss:
• 特殊协议：data:、blob:、file:（取决于环境）
• 自定义协议：如 myapp: 等也视为有效

基本上，只要协议名后跟着合法的 URL 结构，就会被认为有效。无效的协议格式（如缺少 :// 后的内容、包含非法字符等）会导致解析失败。

本工具内置了 polyfill，在不支持的浏览器中会自动使用 try-catch 方式进行回退。你也可以在自己的项目中使用以下 polyfill：

if (!URL.canParse) {
  URL.canParse = function(url, base) {
    try {
      new URL(url, base);
      return true;
    } catch {
      return false;
    }
  };
}

此外，主流浏览器的最新版本均已支持：Chrome 120+、Firefox 115+、Safari 17+、Edge 120+。

这两个是互补的静态方法：

• URL.canParse(url, base) — 返回 boolean，仅检测是否可解析
• URL.parse(url, base) — 返回 URL 对象或 null，解析成功返回 URL 实例，失败返回 null（不抛异常）

如果你需要检测有效性并同时使用解析结果，URL.parse() 更高效：

const parsed = URL.parse(userInput);
if (parsed) {
  console.log(parsed.hostname); // 直接使用
}

URL.parse() 的浏览器支持与 URL.canParse() 相同。