React Native WebView携带Session调用安全API遇401未授权问题求解

针对你遇到的WebView无法携带App中已有的Session Cookie导致401的问题，以下是几个安全且无需二次登录的解决方案：

方案1：注入JS自动给请求添加认证头 #

通过WebView的注入脚本能力，拦截页面内所有fetch和XMLHttpRequest请求，自动带上你的Session认证信息，无需手动操作Cookie，降低安全风险。

import { WebView } from 'react-native-webview';

const ProtectedWebView = ({ sessionToken }) => {
  // 根据后端认证格式调整头，比如Cookie或Bearer Token
  const authHeader = `Authorization: Bearer ${sessionToken}`;
  // 或者如果后端用Cookie：`Cookie: sessionId=${sessionToken}`

  const injectAuthScript = `
    // 拦截fetch请求
    const originalFetch = window.fetch;
    window.fetch = (url, options = {}) => {
      options.headers = { ...options.headers, ${authHeader.split(':')[0]}: '${authHeader.split(':')[1].trim()}' };
      return originalFetch(url, options);
    };

    // 拦截XMLHttpRequest请求
    const originalXHR = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url) {
      originalXHR.call(this, method, url);
      this.setRequestHeader('${authHeader.split(':')[0]}', '${authHeader.split(':')[1].trim()}');
    };
  `;

  return (
    <WebView
      source={{ uri: '你的受保护页面URL' }}
      injectedJavaScriptBeforeContentLoaded={injectAuthScript}
    />
  );
};

方案2：同步App Cookie到WebView原生存储 #

iOS端 #

React Native WebView自带sharedCookiesEnabled属性，开启后WebView会共享App的Cookie容器，前提是Cookie的domain和path与WebView页面域名匹配：

<WebView
  source={{ uri: '你的受保护页面URL' }}
  sharedCookiesEnabled={true}
/>

Android端 #

通过原生CookieManager或第三方库@react-native-cookies/cookies同步Cookie，同时设置httpOnly和secure属性提升安全性：

import CookieManager from '@react-native-cookies/cookies';
import { WebView, useEffect } from 'react-native';

const ProtectedWebView = () => {
  useEffect(() => {
    const syncSessionCookie = async () => {
      // 从App的Cookie存储中获取Session
      const appCookies = await CookieManager.get('你的后端域名');
      const sessionValue = appCookies.sessionId;

      // 将Session同步到WebView的Cookie容器
      await CookieManager.set('你的Web页面域名', {
        name: 'sessionId',
        value: sessionValue,
        domain: '你的域名',
        path: '/',
        secure: true, // 仅HTTPS传输
        httpOnly: true // 禁止JS读取，防XSS
      });
    };
    syncSessionCookie();
  }, []);

  return <WebView source={{ uri: '你的受保护页面URL' }} />;
};

方案3：后端配合生成临时授权Token #

如果上述方案受限，可以让后端基于当前Session生成短期临时Token，通过postMessage传递给Web页面，页面用临时Token调用API，后端验证临时Token与原Session的绑定关系。

React Native端 #

import { WebView, useRef } from 'react-native-webview';

const ProtectedWebView = ({ sessionToken }) => {
  const webViewRef = useRef(null);

  const handleMessage = (event) => {
    if (event.nativeEvent.data === 'getTempToken') {
      // 调用后端接口生成临时Token
      fetch('你的后端临时Token接口', {
        method: 'POST',
        headers: { Authorization: `Bearer ${sessionToken}` }
      })
      .then(res => res.json())
      .then(data => {
        webViewRef.current?.postMessage(data.tempToken);
      });
    }
  };

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: '你的受保护页面URL' }}
      onMessage={handleMessage}
    />
  );
};

Web页面端 #

// 请求临时Token
window.ReactNativeWebView.postMessage('getTempToken');

// 接收并使用临时Token
window.addEventListener('message', (e) => {
  if (e.data) {
    fetch('你的安全API', {
      headers: { Authorization: `Bearer ${e.data}` }
    })
    .then(res => res.json())
    .then(data => console.log('API响应', data));
  }
});

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