8
votes

reCAPTCHA Jeton inattendu dans JSON à la position 0

Nous utilisons reCAPTCHA ver 2 comme case à cocher "Je ne suis pas un robot". Depuis 2020-11-05 19: 23: 00Z lors du chargement de notre page, nous obtenons une exception:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="https://www.google.com/recaptcha/api.js"></script>
</head>
<body>
<div class="g-recaptcha" data-sitekey="xxxxxxx"></div>

Une exception se produit dans https://www.google.com/recaptcha/api2/anchor?ar=1&k=6LcOyt8ZAAAAAD9WJMwwwvgvSGp8Bi0zWYS-FMX5&co=aHR0cDovL2JsYWNrYmlyZDo0ODA4MA&L2JsYWNrYmlyZDo0ODA4Pd1&hlnormalbnormalZ65&laclazlazlazlovs79&laclibu79lazlazlazlaclv

entrez la description de l'image ici

Notre page n'a pas été modifiée. Le reCAPTCHA se brise de manière inattendue en un instant. Sur une autre page, reCAPTCHA fonctionne toujours (il est peut-être important que la page de travail soit un iframe intégré à l'intérieur).

Des indices? Qu'est ce qui ne s'est pas bien passé?

MIS À JOUR

Nous essayons d'isoler reCAPTCHA à l'intérieur de l'iframe dans notre page JSP comme @ user2384519 l'a suggéré:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Captcha test</title>
<script>
    function extractRecaptchaResponse() {
        var c = document.getElementById('g-recaptcha-isolator');
        if (c) {
            var src = c.contentWindow.document
                    .getElementById('g-recaptcha-response');
            if (src) {
                var target = document.getElementById('g-recaptcha-response');
                target.value = src.value;
            }
        }
        return true;
    }
</script>
</head>
<body>
    <h:form id="g-recaptcha-form">

        <h:panelGroup>
            <iframe id="g-recaptcha-isolator" src="/recaptcha.htm"
                onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));'
                style="height: 78px; width: 100%; border: none; overflow: hidden;">
            </iframe>
        </h:panelGroup>

        <textarea id="g-recaptcha-response" name="g-recaptcha-response"
            style="display: none"></textarea>

        <h:panelGroup>

            <h:commandLink onclick="extractRecaptchaResponse()"
                actionListener="#{recaptcha.submit}">
                <span>Submit</span>
            </h:commandLink>

        </h:panelGroup>

    </h:form>
</body>
</html>

recaptcha.htm:

recaptcha__ru.js:211 Uncaught (in promise) SyntaxError: Unexpected token   in JSON at position 0
    at JSON.parse (<anonymous>)
    at recaptcha__ru.js:211
    at recaptcha__ru.js:209
    at Array.<anonymous> (recaptcha__ru.js:132)
    at Array.<anonymous> (recaptcha__ru.js:208)
    at GM.$ (recaptcha__ru.js:211)
    at Array.<anonymous> (recaptcha__ru.js:253)
    at QS.next (recaptcha__ru.js:416)
    at y (recaptcha__ru.js:355)

et cela résout le problème avec l'erreur JSON, mais reCAPTCHA affiche une fenêtre contextuelle avec un sélecteur d'image et une iframe coupe la fenêtre contextuelle.


0 commentaires

3 Réponses :


3
votes

Nous avons également rencontré le même problème le 11/5. Pour une solution rapide, nous avons intégré récapcha dans iframe. Il était bloqué par ajax4jsf / framework.pack.js


3 commentaires

Merci beaucoup. Nous allons essayer cette solution de contournement.


J'essaie d'isoler recaptcha dans iframe, mais comment résolvez-vous le problème d'affichage du sélecteur d'image dans l'iframe? <iframe id = "g-recaptcha-container" src = "/ Template / recaptcha.htm" onload = 'javascript: (function (o) {o.style.height = o.conten‌ tWindow.document.bod‌ y. scrollHeight + "px"; ‌} (this)); ' style = "height: 78px; width: 100%; border: none; overflow: hidden;"> </iframe> comment adapter la taille de l'iframe?


Essayez cette largeur: 310px; hauteur: 84px;



3
votes

Nous avons eu le même problème, puis avons identifié que le problème était un conflit causé par un autre fichier js minifié chargé sur la même page.

Nous avons réduit au strict minimum ce que js était chargé sur la page, éliminant ainsi la collision, et maintenant cela fonctionne à nouveau correctement.


1 commentaires

Merci pour la remarque. Quelle collision avez-vous? Comment détecter une collision?



9
votes

Si vous utilisez Prototype.js:

La bibliothèque Prototype JS remplace la méthode reduce dans la classe Array .

Le problème est résolu si vous ajoutez simplement le script suivant après toutes les importations (de préférence après la balise body):

Object.extend(Array.prototype, {
    _each: function(iterator) {
        for (var i = 0, length = this.length; i < length; i++)
            iterator(this[i]);
    },
    clear: function() {
        this.length = 0;
        return this;
    },
    first: function() {
        return this[0];
    },
    last: function() {
        return this[this.length - 1];
    },
    compact: function() {
        return this.select(function(value) {
            return value != null;
        });
    },
    flatten: function() {
        return this.inject([], function(array, value) {
            return array.concat(Object.isArray(value) ? value.flatten() : [value]);
        });
    },
    without: function() {
        var values = $A(arguments);
        return this.select(function(value) {
            return !values.include(value);
        });
    },
    reverse: function(inline) {
        return (inline !== false ? this : this.toArray())._reverse();
    },
    //FROM HERE
    reduce: function() {
        return this.length > 1 ? this : this[0];
    },
    //TO HERE
    uniq: function(sorted) {
        return this.inject([], function(array, value, index) {
            if (0 == index || (sorted ? array.last() != value : !array.include(value)))
                array.push(value);
            return array;
        });
    },
    intersect: function(array) {
        return this.uniq().findAll(function(item) {
            return array.detect(function(value) {
                return item === value
            });
        });
    },
    clone: function() {
        return [].concat(this);
    },
    size: function() {
        return this.length;
    },
    inspect: function() {
        return '[' + this.map(Object.inspect).join(', ') + ']';
    },
    toJSON: function() {
        var results = [];
        this.each(function(object) {
            var value = Object.toJSON(object);
            if (!Object.isUndefined(value)) results.push(value);
        });
        return '[' + results.join(', ') + ']';
    }
});

Solution alternative:

La solution est de modifier le fichier Prototype.js et de supprimer la fonction reduce du fichier.

Array.prototype.reduce = function(callback, initialVal) {
    var accumulator = (initialVal === undefined) ? undefined : initialVal;
    for (var i = 0; i < this.length; i++) {
        if (accumulator !== undefined)
            accumulator = callback.call(undefined, accumulator, this[i], i, this);
        else
            accumulator = this[i];
    }
    return accumulator;
};

Pour ce faire, vous devrez ouvrir les références winch du fichier jar vers RichFaces (richfaces-impl-3.3.3.Final.jar).

entrez la description de l'image ici


1 commentaires

Exceptionnel, fonctionne comme un charme. Ce correctif semble fonctionner dans toutes les bibliothèques utilisant prototype.js