0

我不确定这是一个特定于反应的问题，一个一般的 JavaScript 相关问题，还是只是一个关于网站及其源代码加载的基本功能问题（取决于一个人是否使用浏览器或任何其他程序来获取网站的内容/ 网络应用程序）。

我的目标：

我想从网站/前端排除机器人。只有人类才能访问它并访问那里提供的信息和功能。例如电子邮件地址、电话号码和联系表格。但是，我不希望访问者先创建帐户。

npx create-react-app my-app我使用以下相关设置创建了一个 Node.js 应用程序：package.json

"dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-google-recaptcha-v3": "^1.9.5",
    "react-scripts": "4.0.0",
    "react-share": "^4.4.0",
    "react-spinners": "^0.11.0",
    "web-vitals": "^0.2.4",
    ...
  }

这是我的index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './i18n';
import reportWebVitals from './reportWebVitals';
import {GoogleReCaptchaProvider} from 'react-google-recaptcha-v3';
import {ValidationRecaptcha} from "./components/reCaptcha";

ReactDOM.render(
    <React.StrictMode>
        <GoogleReCaptchaProvider reCaptchaKey={process.env.REACT_APP_RECAPTCHA_PUBLIC_KEY}>
            <ValidationRecaptcha/>
        </GoogleReCaptchaProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

reportWebVitals();

这是ValidationRecaptcha组件：

import React, {useCallback, useEffect, useState} from "react";
import {useGoogleReCaptcha} from "react-google-recaptcha-v3";
import App from "../App";
import {PuffLoader} from "react-spinners";

export const ValidationRecaptcha = () => {
    const { executeRecaptcha } = useGoogleReCaptcha();
    const [verified, setVerified] = useState(0);
    const handleReCaptchaVerify = useCallback(async () => {

        if (!executeRecaptcha) {
            console.log('Execute recaptcha not yet available');
            return;
        }

        console.log('Request token from Google...');
        const token = await executeRecaptcha('token');
        console.log('Received token from Google: ' + token);

        function handleReCaptchaResponse(success) {
            setVerified(success ? 2 : 1);
        }

        // check the token with the backend
        const url = process.env.REACT_APP_BACKEND_API_URL + "/recaptcha?token=" + token.toString();
        console.log('Request token verification from backend: ' + url);
        fetch(url)
            .then((res) => res.json())
            .then((data) => handleReCaptchaResponse(JSON.parse(data.success)));
        console.log('Answer from API: success = ' + verified);

    }, [executeRecaptcha, verified]);

    // use useEffect to trigger the verification as soon as the component being loaded
    useEffect(() => {
        handleReCaptchaVerify();
    }, [handleReCaptchaVerify]);

    let content;
    if (verified === 0) {
        content = <div><div className={'center'}><PuffLoader/></div><div className={'center-horizontally'}>Checking your browser with Google reCAPTCHA v3...</div></div>;
    } else if (verified === 1) {
        content = <div className={'center'}>Sorry, looks like you're a Robot . This site is humans-only!</div>;
    } else {
        content = <App/>;
    }
    return content;
};

快速解释：

该代码在浏览器中按预期工作（我已经测试过 Chrome、Safari 和 Firefox）。在等待数据获取时，应用程序呈现在第一种情况下分配的内容，即verified === 0. 当响应被完全获取并且为负（即令牌无效或分数表示机器人）时，应用程序呈现在第二种情况下分配的内容，即verified === 1. 当响应完全获取并且是肯定的（即令牌有效）时，应用程序呈现在第三种情况下分配的内容目的地，即verified === 3/ 这里：else。最后一个案例呈现了<App/>它自己的所有功能、它的静态内容（如带有电子邮件地址、电话号码和地址的印记文本）和一个联系表格。

现在我的问题：

  1. 这是合理的还是一个程序（例如，抓取网站的垃圾邮件机器人）能够获取所有 jsx 文件（因此仍然可以访问公共个人数据，如印记或任何其他组件中的电子邮件、电话号码、地址等那是层次结构的下层，即<App/>组件的子级）？当我手动测试无效令牌或分数时，我会看到verified === 1内容，Chrome 仅显示已在源中呈现的 jsx 文件，而不显示其余文件。我还可以在所有来源中搜索没有任何匹配项的电子邮件地址。但是这个电子邮件地址在子组件中是明文的<App/>（我不想要关于如何从机器人隐藏电子邮件的答案/建议，这不是我的问题）。当我使用有效的令牌和分数对其进行测试时，我可以看到我的应用程序并确定所有源文件。
  2. 那么我可以假设一个反应应用程序只使运行时需要/呈现的文件可供公共使用吗？
  3. 原则上，这个问题等于第一个问题，但无论如何我都会要求强调我的理解不足/问题：这是否已经将联系表单从垃圾邮件机器人攻击中保存到层次结构的下方，或者我是否必须在发送数据之前再次检查那里smtp 服务（通过使用 props 向下传递验证或通过使用另一个 reCAPTCHA 组件作为表单的提交按钮，但同样，这不是问题）？

我认为这些问题是由于缺乏对反应及其工作原理的了解，所以当有人有好的视频/教程/介绍可以帮助我时，我也会感激不尽！

最好的，最大的

4

0 回答 0