安卓设备如何通过JavaScript判断页面运行于浏览器还是Captive Portal

在安卓系统中，由于Captive Portal（WiFi登录门户）的实现差异较大，且很多现代门户已支持localStorage和Fetch API，无法直接通过这些特性区分。以下是几种可行的纯JavaScript判断方案：

方法1：检测网络请求的拦截重定向 #

Captive Portal的核心特征是会拦截所有非白名单的网络请求，并重定向到自身的登录页面。我们可以利用这一点，请求一个已知的、用于网络连通性检测的公共资源，通过响应结果判断是否处于门户中。

安卓系统默认使用http://connectivitycheck.gstatic.com/generate_204进行连通性检测，正常情况下该地址会返回204 No Content状态码；如果处于Captive Portal中，请求会被重定向到登录页面，返回状态码通常为3xx或200（但响应内容为登录页）。

async function isInCaptivePortalViaRequest() {
  // 先检查是否有网络（仅作辅助，navigator.onLine并非100%可靠）
  if (!navigator.onLine) return false;

  try {
    const response = await fetch('http://connectivitycheck.gstatic.com/generate_204', {
      cache: 'no-store', // 避免缓存影响结果
      mode: 'no-cors'    // 绕过跨域限制，因为重定向后的页面可能非同源
    });

    // 在no-cors模式下，无法获取状态码，但可以通过响应类型判断
    // 正常连通时响应类型为"basic"，被拦截时通常为"opaque"或其他类型
    return response.type !== 'basic';
  } catch (error) {
    // 请求失败（如被拦截后跨域报错），大概率处于Captive Portal中
    return true;
  }
}

方法2：检测WebView特性差异 #

部分简陋的Captive Portal使用简化版的WebView内核，缺少主流浏览器支持的高级API。可以通过检测这些API的存在与否辅助判断：

function isInCaptivePortalViaFeatures() {
  // 检测是否缺少主流浏览器普遍支持的API
  const hasPermissionsApi = 'permissions' in navigator;
  const hasCryptoSubtle = 'crypto' in window && 'subtle' in window.crypto;
  const hasNotificationApi = 'Notification' in window;

  // 若多项核心API缺失，大概率处于简化版WebView（即Captive Portal）中
  return !hasPermissionsApi || !hasCryptoSubtle || !hasNotificationApi;
}

方法3：分析UserAgent字符串 #

虽然单独依赖UserAgent准确性不高，但可以结合其他方法排除主流浏览器，缩小判断范围：

function isInCaptivePortalViaUA() {
  const ua = navigator.userAgent;
  
  // 排除已知的主流安卓浏览器
  const isMainstreamBrowser = /Chrome|Firefox|SamsungBrowser|Edge/i.test(ua);
  
  // 检测是否为WebView环境，但非主流浏览器
  const isWebView = /WebView|Android.*Version/i.test(ua);
  
  return isWebView && !isMainstreamBrowser;
}

综合判断方案 #

由于单一方法存在误判可能，建议结合多种方式提高准确率：

async function detectCaptivePortal() {
  const resultFromRequest = await isInCaptivePortalViaRequest();
  const resultFromFeatures = isInCaptivePortalViaFeatures();
  const resultFromUA = isInCaptivePortalViaUA();

  // 满足任意两个条件则判定为Captive Portal
  return [resultFromRequest, resultFromFeatures, resultFromUA].filter(Boolean).length >= 2;
}

注意事项 #

• 网络请求法可能受真实网络故障影响，需结合navigator.onLine做基础排查；
• 不同安卓厂商的Captive Portal实现差异较大，没有100%准确的判断方式，需根据实际场景调整检测逻辑；
• 测试时需确保请求的资源不会被目标Captive Portal加入白名单。

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