React Native WebView 中偶尔出现 403 CSRF 错误答案

【问题标题】：Occasional 403 CSRF error in React Native WebViewReact Native WebView 中偶尔出现 403 CSRF 错误
【发布时间】：2022-01-12 16:15:48
【问题描述】：

我正在使用 react-native-webview 在 React Native 应用程序中加载表单（由 Django 提供支持）。此表格具有 CSRF 保护。而且大多数情况下它实际上工作正常，您可以通过 webview 在应用程序中提交表单，一切都很好。但有时我会收到 403 CSRF 错误（CSRF 验证失败，请求中止）。

我不确定是什么原因造成的，如何避免？我以一种相当直接的方式使用WebView，并带有一个包装器。

如果手机出现网络连接问题，那么我可能会收到超时错误，而不是这样的特定错误？

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

const FullScreenWebView = styled(BaseWebView)`
  flex: 1;
`;
...
export const WebView: FC<WebViewProps> = props => {
...
return (
    <Layout.Root>
      {url.startsWith('/') ? (
        <Layout.LoadingFlex1 />
      ) : (
        <FullScreenWebView
          ref={webviewRef}
          source={{ uri: urlWithLang }}
          startInLoadingState={true}
          onShouldStartLoadWithRequest={globalZendeskIntercept}
          // only allow secure webviews and those for our deeplink scheme
          originWhitelist={['https://', `${Config.DEEPLINK_SCHEME}://`]}
          decelerationRate="normal"
          allowsBackForwardNavigationGestures
          onNavigationStateChange={navState => {
            if (navState.canGoBack) {
              setCanGoBack(true);
            } else {
              setCanGoBack(false);
            }
          }}
        />
      )}
    </Layout.Root>
  );
};

【问题讨论】：

试试看这个帖子：spectrum.chat/react-native/general/…
如果一个 csrf 令牌未提交或提交多次，则 csrf 验证失败。在你的情况下，因为它只发生有时我猜它可能是第二种情况。您可以尝试在提交表单后禁用按钮以禁用多次提交。
@SukhpreetSingh 在我的情况下，当您按下该按钮时，该按钮已被禁用，所以不幸的是，我认为这不是问题。

标签： django react-native webview csrf

【解决方案1】：

我遇到了类似的问题，结果证明是由于 iOS WebView 中的 cookie 过时。

我所做的只是清除 WebView 组件渲染前后的所有 cookie。

import CookieManager from "@react-native-cookies/cookies";

...
    
useEffect(() => {
  CookieManager.clearAll().catch(console.error);

  return () => {
    CookieManager.clearAll().catch(console.error);
  };
}, []);

...

<WebView ... />

也许你可以试一试。

【讨论】：