bharathraj-e / g_recaptcha_v3

Create Google reCAPTCHA v3 token for Flutter web.
https://pub.dev/packages/g_recaptcha_v3
MIT License
11 stars 8 forks source link

Handle CORS Issue #4

Closed Zujaj closed 2 years ago

Zujaj commented 2 years ago

Thank you for creating such a great package. I hope this demo tutorial & article would be fruitful in promoting your hard efforts. I have deployed the code on firebase hosting.

I followed this answer from Stack Overflow, but no luck.

The below code goes straight to the catch block because of CORS.

Source Code

static Future<RecaptchaResponse?> _getVerificationResponse() async {
    _token = await GRecaptchaV3.execute('submit') ?? '';

    _token.isEmpty
        ? debugPrint('Token Empty!')
        : debugPrint('Token is generated successfully!');

    RecaptchaResponse? _recaptchaResponse;

    if (_token.isNotEmpty) {
      try {
        /// Holds the body parameter for the HTTP request.
        final _bodyParameters = {
          'secret': Config.secretKey,
          'response': _token,
        };

        debugPrint(_bodyParameters.values.toList()[1]);

        debugPrint('POSTING...');

        var response = await http.post(
          Config.verificationURL.replace(queryParameters: _bodyParameters),
          headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json',
          },
        );

        debugPrint(response.body);
        debugPrint(response.reasonPhrase);

        _recaptchaResponse = RecaptchaResponse.fromJson(response.body);
      } on http.ClientException catch (e) {
        debugPrint('In Catch Block');
        debugPrint(e.uri.toString());
        debugPrint(e.message);
      }
    }
    return _recaptchaResponse;
  }

Log

main.dart.js:18117 gRecaptcha V3 ready

main.dart.js:18117 Token is generated successfully!

main.dart.js:18117 03AGdBq25efrSnywQ8nNxtm-_kh-YUDpl0z2bQ3cmkmXQ0-vTNThGAM-2Du_k05aPmmFS5NWMtwSDVekc2jv6JBJQJimBH6V2115ZiyZ2KjbA3bRWcyTfwfr_tDWI6dc4FQYnucSqyB8ALi_DusMvt3vuZyrfqkqzOYcUntE0x-lk56Zno4e5E7zLl0r6c2-hs0DVVgzkaruh5mBuuhWdA8-zJOpGZibq2Kq57rii_1iGSPp3jopI1ieFUVSs962Qc-yNSywfJPFzDXd0AzwgX-SFbFEk2IOnQ2Jm5GwQ4haH1PiXyPivVxJxyNrYJc3s1WoDCiMZDrsPEa_CgRLZc91m1dstutSTAB3vztnmxcfjDM7wyZs43Z3rSoCdWMZVq6xEKQAP0um-oaiHdroAG-RAlMHWsBChtauCPlFtelWq7-PW8spy1nC1vL3az1427hqAo84ZfVUgzOD_TGLoEWp-XjgGG8H2Wr_kCKxTEB7bWy-B6ad-horizUS5hq7Z2LjxXSW-PGYjS

main.dart.js:18117 POSTING...

/#/:1 Access to XMLHttpRequest at 'https://www.google.com/recaptcha/api/siteverify?secret=the-recaptcha-secret-key&response=03AGdBq25efrSnywQ8nNxtm-_kh-YUDpl0z2bQ3cmkmXQ0-vTNThGAM-2Du_k05aPmmFS5NWMtwSDVekc2jv6JBJQJimBH6V2115ZiyZ2KjbA3bRWcyTfwfr_tDWI6dc4FQYnucSqyB8ALi_DusMvt3vuZyrfqkqzOYcUntE0x-lk56Zno4e5E7zLl0r6c2-hs0DVVgzkaruh5mBuuhWdA8-zJOpGZibq2Kq57rii_1iGSPp3jopI1ieFUVSs962Qc-yNSywfJPFzDXd0AzwgX-SFbFEk2IOnQ2Jm5GwQ4haH1PiXyPivVxJxyNrYJc3s1WoDCiMZDrsPEa_CgRLZc91m1dstutSTAB3vztnmxcfjDM7wyZs43Z3rSoCdWMZVq6xEKQAP0um-oaiHdroAG-RAlMHWsBChtauCPlFtelWq7-PW8spy1nC1vL3az1427hqAo84ZfVUgzOD_TGLoEWp-XjgGG8H2Wr_kCKxTEB7bWy-B6ad-horizUS5hq7Z2LjxXSW-PGYjS' from origin 'https://recaptchav3test-b9edb.web.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

main.dart.js:18117 In Catch Block

main.dart.js:18117 XMLHttpRequest error.

main.dart.js:18117 false
bharathraj-e commented 2 years ago

Thanks for using the package.

As stated in google's developer docs https://developers.google.com/recaptcha/docs/verify

Screenshot 2022-01-02 at 7 20 41 PM

Verification is initiated from the server / backend, not the client.

This is an extra security step for the server to ensure requests coming from clients are legitimate. Otherwise a client could fake a response and the server would be blindly trusting that the client is a verified human.