React Native WebView出现okhttp User-Agent致后端令牌撤销异常排查求助

可能原因 #

• Android WebView底层请求泄漏：Android端WebView的网络请求依赖OkHttp实现，但正常会伪装成Chrome的UA。如果页面内的fetch/XMLHttpRequest请求、第三方JS库发起的请求没有继承WebView的UA配置，就会直接使用OkHttp的默认UA。
• 第三方脚本独立请求：WebView加载的页面中如果包含广告、统计、第三方SDK等脚本，这类脚本可能会发起独立于WebView的网络请求，未携带自定义UA，直接使用OkHttp默认标识。
• UA配置覆盖不彻底：applicationNameForUserAgent仅在原有UA基础上添加后缀，而非完全替换。部分场景下（如系统WebView设置干扰、旧版本Android系统），WebView可能未正确应用该配置，导致UA重置为OkHttp默认值。
• 生产环境设备/系统特殊性：旧版Android系统（如Android 7及以下）或定制ROM（小米、华为等）的WebView实现存在bug，导致UA未被正确设置；部分设备的WebView预加载、缓存更新等内部请求也可能绕过UA配置。
• 本地与生产环境差异：本地测试设备的系统版本、WebView版本较新，或未触发特定请求场景（如后台静默请求、第三方脚本加载），因此无法复现问题。

修复方向 #

• 强制设置完整UA字符串：替代applicationNameForUserAgent，直接通过userAgentString配置完整的目标UA。例如：

  import { Platform } from 'react-native';
  import DeviceInfo from 'react-native-device-info';
  
  const getCustomUA = () => {
    if (Platform.OS === 'android') {
      const chromeVersion = DeviceInfo.getWebViewVersion();
      return `Mozilla/5.0 (Linux; Android ${Platform.Version}; ${DeviceInfo.getModel()}) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/${chromeVersion} Mobile Safari/537.36 Android`;
    } else {
      return `Mozilla/5.0 (iPhone; CPU iPhone OS ${Platform.Version} like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/${DeviceInfo.getSystemVersion()} Mobile/15E148 Safari/604.1 iOS`;
    }
  };
  
  // 在WebView组件中使用
  <WebView
    userAgentString={getCustomUA()}
    // 其他配置
  />
  

• 拦截页面内JS请求的UA：在WebView加载的网页中添加请求拦截器，确保所有fetch/XMLHttpRequest请求都携带navigator.userAgent：

  // 网页端JS代码
  const originalFetch = window.fetch;
  window.fetch = (...args) => {
    const [url, options = {}] = args;
    return originalFetch(url, {
      ...options,
      headers: {
        ...options.headers,
        'User-Agent': navigator.userAgent
      }
    });
  };
  
  // 同理拦截XMLHttpRequest
  const originalXHR = XMLHttpRequest;
  XMLHttpRequest = function() {
    const xhr = new originalXHR();
    const originalOpen = xhr.open;
    xhr.open = function(method, url) {
      originalOpen.call(this, method, url);
      this.setRequestHeader('User-Agent', navigator.userAgent);
    };
    return xhr;
  };
  

• Android原生层加固UA配置：在MainApplication.java中全局设置WebView的UA，避免被其他代码覆盖：

  import android.webkit.WebSettings;
  import android.webkit.WebView;
  
  // 在onCreate方法中添加
  WebView webView = new WebView(this);
  WebSettings settings = webView.getSettings();
  String customUA = settings.getUserAgentString() + " Android"; // 或直接设置完整UA
  settings.setUserAgentString(customUA);
  

• 后端日志排查：在Flask后端针对okhttp UA的请求记录详细信息（请求路径、参数、IP、请求时间等），进一步定位请求来源；临时调整令牌验证逻辑，避免误拦截合法请求。
• 升级依赖版本：尝试升级react-native-webview至最新稳定版（如13.x/14.x），旧版本可能存在UA配置的已知bug；同时确保react-native版本的兼容性。

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