问题
We use reCAPTCHA ver 2 as checkbox "I am not bot". Since from 2020-11-05 19:23:00Z during our page loading we get exception:
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)
Exception occurs in https://www.google.com/recaptcha/api2/anchor?ar=1&k=6LcOyt8ZAAAAAD9WJMwwwvgvSGp8Bi0zWYS-FMX5&co=aHR0cDovL2JsYWNrYmlyZDo0ODA4MA..&hl=ru&v=1AZgzF1o3OlP73CVr69UmL65&size=normal&cb=a79dhaz0etu
Our page has not been changed. The reCAPTCHA breaks unexpectedly in one moment. On other page reCAPTCHA is still working (may be it is important the working page is a embedded inside iframe).
Any hints? What went wrong?
UPDATED
We try to isolate reCAPTCHA inside iframe in our JSP page as @user2384519 suggested:
<%@ 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:
<!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>
and it solves the problem with JSON error, but reCAPTCHA shows popup with image selector and iframe cuts the popup.
回答1:
If you are using Prototype.js:
The Prototype JS library overrides the method reduce in the class Array.
The issue is resolved if you just add the following script after all imports (preferentially after the body tag):
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;
};
Alternative solution:
The solution is modify the file Prototype.js and remove the function reduce from the file.
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(', ') + ']';
}
});
In order to do that you will need open the jar file winch references to RichFaces (richfaces-impl-3.3.3.Final.jar).
回答2:
We also faced the same issue on 11/5. For quick fix, we have embedded recapcha in iframe. It was getting block by ajax4jsf/framework.pack.js
回答3:
We had the same problem, then identified that the issue was a conflict caused by another minified js file loaded on the same page.
We trimmed down what js was loaded on the page down to a bare minimum, eliminating the collision, and now it works fine again.
来源：https://stackoverflow.com/questions/64737646/recaptcha-unexpected-token-in-json-at-position-0