CODEWITHSUNDEEP
asp.net-mvcrecaptcha
robertk
robertk

Reputation: 2461

ReCAPTCHA v2 not working in IE Compability View

I'm trying to get recapatcha v2 working in my ASP MVC project. The client's computers have IE10/IE11 and shows all intranet pages in compatibility view which causes the recaptcha not to show as it is intended.

The problem is it rarely accepts my answer even though it's right. It just shows a new image, but every once in awhile I get it right. Anyone else experience this?

If you enable compability view for google.com in IE and visit the demo site you can try it out.

Upvotes: 4

Views: 6402

Answers (3)

sec0ndHand
sec0ndHand

Reputation: 429

reCaptcha uses a function in javascript named querySelectorAll, and querySelector. IE 11 in compatibility mode renders as IE 7.0, and IE 7.0 and below don't seem to have the functions querySelectorAll and querySelector and that is why it fails.

Now, I am using .net webforms so you may have to adapt it a little for MVC, but here it is:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="reCaptcha.aspx.cs" Inherits="reCaptcha" %>

<!DOCTYPE html>
<script type="text/javascript">
    // this defines these functions if they don't exist.
    if (!document.querySelectorAll) {
        document.querySelectorAll = function (selectors) {
            var style = document.createElement('style'), elements = [], element;
            document.documentElement.firstChild.appendChild(style);
            document._qsa = [];

            style.styleSheet.cssText = selectors +
                '{x-qsa:expression(document._qsa && document._qsa.push(this))}';
            window.scrollBy(0, 0);
            style.parentNode.removeChild(style);

            while (document._qsa.length) {
                element = document._qsa.shift();
                element.style.removeAttribute('x-qsa');
                elements.push(element);
            }
            document._qsa = null;
            return elements;
        };
    }

    if (!document.querySelector) {
        document.querySelector = function (selectors) {
            var elements = document.querySelectorAll(selectors);
            return (elements.length) ? elements[0] : null;
        };
    }
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js' type="text/javascript"></script>
<script src='https://www.google.com/recaptcha/api.js' type="text/javascript"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js' type="text/javascript"></script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>reCaptcha Test</title>

</head>
<body>
    <h1>reCaptcha Test</h1>
    <form id="frmResult" runat="server">  
    <div class="g-recaptcha" data-sitekey=""></div>
        <script type="text/javascript">
         function IeVersion() {
                    //Set defaults
                    var value = {
                        IsIE: false,
                        TrueVersion: 0,
                        ActingVersion: 0,
                        CompatibilityMode: false
                    };

                    //Try to find the Trident version number
                    var trident = navigator.userAgent.match(/Trident\/(\d+)/);
                    if (trident) {
                        value.IsIE = true;
                        //Convert from the Trident version number to the IE version number
                        value.TrueVersion = parseInt(trident[1], 10) + 4;
                    }

                    //Try to find the MSIE number
                    var msie = navigator.userAgent.match(/MSIE (\d+)/);
                    if (msie) {
                        value.IsIE = true;
                        //Find the IE version number from the user agent string
                        value.ActingVersion = parseInt(msie[1]);
                    } else {
                        //Must be IE 11 in "edge" mode
                        value.ActingVersion = value.TrueVersion;
                    }

                    //If we have both a Trident and MSIE version number, see if they're different
                    if (value.IsIE && value.TrueVersion > 0 && value.ActingVersion > 0) {
                        //In compatibility mode if the trident number doesn't match up with the MSIE number
                        value.CompatibilityMode = value.TrueVersion != value.ActingVersion;
                    }
                    return value;
                }
         var ie = IeVersion();
         var reCaptchaApi = "";

        $(document).ready(function () {
            $('.g-recaptcha').each(function (index, obj) {
            grecaptcha.render(obj, { 'sitekey': reCaptchaApi });
      });
      if (ie.CompatibilityMode) {
          // loading it twice makes it load in compatibility mode.
            $('.g-recaptcha').each(function (index, obj) {
                grecaptcha.render(obj, { 'sitekey': reCaptchaApi });
            });
        }
        });
    </script>
</form> 

</body>
</html>

This allows reCaptcha V-2 to load in compatibility mode.

Upvotes: 1

Paesano2000
Paesano2000

Reputation: 331

You are seeing reCaptcha's fallback. It seems that you have to get two correct answers in a row. It then gives you a response code that you copy and paste into a <textarea> element.

So what you are possibly experiencing is that you aren't getting two consecutive reCaptchas correct.

You can test the fallback recaptcha by adding the fallback=true parameter to the JavaScript resource:

<script src="https://www.google.com/recaptcha/api.js?fallback=true" async defer></script>

As explained by @Coulton recaptcha does not support IE compatibility mode.

Upvotes: 2

Luke
Luke

Reputation: 23690

reCAPTCHA requires that compatibility view is not enabled in order to work, see:

https://support.google.com/recaptcha/?hl=en-GB#6223838

Upvotes: 3

Related Questions