Firefox与Chromium中new URL()的JavaScript URL校验差异及兼容方案

问题描述 #

使用JavaScript的URL API校验URL时，Chromium系浏览器（如Chrome、Edge）和Firefox的表现存在明显差异：

• Chromium系浏览器对URL格式更为宽松，会自动对不规范字符进行编码兼容
• Firefox严格遵循规范，不会自动编码；即使手动用encodeURI('https://abc.co m')得到https://abc.c%20m，Firefox仍会判定该URL无效

需求是在不使用正则表达式的前提下，实现跨浏览器一致且符合规范的URL校验方案，同时明确二者差异的原因及合规性。

差异原因与合规性判定 #

URL官方规范（RFC 3986）明确要求：主机名（hostname）中不能包含空格或编码后的空格（%20），仅允许字母、数字、连字符及特定符号。

• Firefox的实现严格遵循RFC标准，因此直接拒绝含%20的主机名
• Chromium系浏览器做了厂商额外的兼容处理，会自动将主机名中的空格（或编码后的%20）替换为下划线等合法字符，属于超出规范的“宽松兼容”行为

Firefox的实现更符合官方URL规范，Chromium的处理是厂商为兼容不规范输入添加的非标准逻辑。

跨浏览器兼容方案 #

要实现符合规范且跨浏览器一致的URL校验，需确保输入URL完全符合RFC标准，具体步骤如下：

1. 预处理主机名非法字符
   拆分URL组成部分，单独处理主机名：将主机名中的空格替换为合法字符（如连字符-，下划线_虽非标准DNS字符，但多数浏览器支持），或直接提示用户修正输入。

2. 标准化处理后再调用URL API
   先对输入URL做标准化清理，确保主机名无非法字符，再传入URL构造函数。示例代码：

function isValidUrl(inputUrl) {
  try {
    new URL(inputUrl);
    return true;
  } catch (e) {
    // 捕获Firefox的无效URL错误，尝试预处理主机名
    if (!inputUrl.includes('://')) return false;
    
    const [protocol, rest] = inputUrl.split('://');
    let [hostname, path] = rest.split('/', 2);
    // 替换主机名中的所有空格为连字符
    hostname = hostname.replace(/\s+/g, '-');
    
    const processedUrl = `${protocol}://${hostname}${path ? '/' + path : ''}`;
    try {
      new URL(processedUrl);
      return true;
    } catch (e2) {
      return false;
    }
  }
}

// 测试用例
console.log(isValidUrl('https://abc.co m')); // 跨浏览器返回true
console.log(isValidUrl('https://abc.c%20m')); // 预处理后返回true
console.log(isValidUrl('invalid-url')); // 返回false

3. 引导合规输入
   从源头提示用户输入符合标准的URL，避免主机名出现空格等非法字符，这是最根本的解决方式。

原代码跨浏览器表现验证 #

用户提供的代码在不同浏览器的表现：

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

• Chromium系浏览器：自动将%20替换为_，输出abc.c_m
• Firefox：直接抛出TypeError: Invalid URL错误

内容的提问来源于stack exchange，提问作者Florestan Korp