iosflutterwebviewflutter-inappwebview

reCAPTCHA not available on Flutter InAppWebView for iOS


I am working on a mobile app that would present a website to the user. The issue is that the website uses reCAPTCHA by Google (both V2 and V3 versions). On the iOS app when the page is loaded in the InAppWebView the JS Alert is sent saying:

"Connection to the reCAPTCHA is unavailable. Check your Internet connection and try again".

InAppWebView Setup

InAppWebViewController? webViewController;
  InAppWebViewGroupOptions webViewGroupOptions = InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
      useShouldInterceptAjaxRequest: true,
      useShouldOverrideUrlLoading: true,
      mediaPlaybackRequiresUserGesture: false,
      useShouldInterceptFetchRequest: true,
      allowUniversalAccessFromFileURLs: true,
      allowFileAccessFromFileURLs: true
    ),
    android: AndroidInAppWebViewOptions(
      useHybridComposition: true
    ),
    ios: IOSInAppWebViewOptions(
      allowsInlineMediaPlayback: true,
      sharedCookiesEnabled: true
    )
  );

Version Details

InAppWebView version: ^5.7.2+3 - https://pub.dev/packages/flutter_inappwebview Flutter version: >=3.0.3 <4.0.0

Observations

I have noticed that the Android version of the same app does not make a request to the CAPTCHA service /recaptcha/api and iOS does and also seems to be blocking it.

enter image description here

Also I have noticed that the URL of AJAX request to the reCAPTCHA is missing host.

enter image description here

The logging code:

developer.log('There is a potential request of AJAX: ${ajaxRequest.url.toString()} ${ajaxRequest.url?.host}');

I was trying to manually set the host to https://www.google.com.

What I am expecting is that reCATPCHA would be passed on iOS.

I also opened the page in the ChromeSafariBrowser and there everything was working fine.

Thanks for all your help. I do appreciate it.

Jakub


Solution

  • Unfortunately I did not find any solution to the problem.

    What I have done is moving to reCAPTCHA Enterprise as it provides the Flutter package to implement and is simple to implement on the backend.

    reCAPTCHA Enterprise: https://cloud.google.com/recaptcha-enterprise Flutter Package: https://pub.dev/packages/recaptcha_enterprise_flutter