reCAPTCHA 位置 0 处 JSON 中的意外标记答案

【问题标题】：reCAPTCHA Unexpected token in JSON at position 0reCAPTCHA 位置 0 处 JSON 中的意外标记
【发布时间】：2021-02-20 13:06:42
【问题描述】：

我们使用 reCAPTCHA ver 2 作为“我不是机器人”复选框。由于从 2020-11-05 19:23:00Z 在我们的页面加载期间，我们得到了异常：

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)

https://www.google.com/recaptcha/api2/anchor?ar=1&k=6LcOyt8ZAAAAAD9WJMwwwvgvSGp8Bi0zWYS-FMX5&co=aHR0cDovL2JsYWNrYmlyZDo0ODA4MA..&hl=ru&v=1AZgzF1o3OlP73CVr69UmL65&size=normal&cb=a79dhaz0etu出现异常

我们的页面没有改变。 reCAPTCHA 在一瞬间意外中断。在其他页面上，reCAPTCHA 仍在工作（可能重要的是工作页面嵌入在 iframe 中）。

有什么提示吗？出了什么问题？

更新

我们尝试按照@user2384519 的建议在我们的 JSP 页面的 iframe 中隔离 reCAPTCHA：

<%@ 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>

它解决了 JSON 错误的问题，但 reCAPTCHA 显示带有图像选择器的弹出窗口，并且 iframe 剪切了弹出窗口。

【问题讨论】：

标签： json recaptcha unexpected-token

【解决方案1】：

如果您使用的是 Prototype.js：

Prototype JS 库覆盖类 Array 中的方法 reduce。

如果您在所有导入后添加以下脚本（最好在 body 标记之后），问题就解决了：

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;
};

【讨论】：

出色，像魅力一样工作。此修复似乎适用于任何使用prototype.js的库

【解决方案2】：

我们遇到了同样的问题，然后确定问题是由同一页面上加载的另一个缩小的 js 文件引起的冲突。

我们将页面上加载的 js 减少到最低限度，消除了冲突，现在它又可以正常工作了。

【讨论】：

感谢您的评论。你有哪种碰撞？如何检测碰撞？

【解决方案3】：

我们在 11 月 5 日也遇到了同样的问题。为了快速修复，我们在 iframe 中嵌入了 recapcha。它被 ajax4jsf/framework.pack.js 阻塞

【讨论】：

我尝试在 iframe 中隔离 recaptcha，但是如何解决在 iframe 中显示图像选择器的问题？你如何适配iframe大小？
试试这个宽度：310px；高度：84 像素；