re-captcha를 사용하지 않고 양식 제출

공개 페이지에 양식을 작성해야 했다면 봇이 양식을 찾아 "서비스 제안", 뉴스레터, 다이렉트 이메일 등을 보낼 것입니다. Ingenious 문의 양식을 처음 배포했을 때와 똑같은 일이 일어났습니다.

받은 편지함에 대한 게이트웨이를 여는 것은 문제가 됩니다. 보안 분야의 모든 것과 마찬가지로 공격자(이 경우 스패머)는 전 세계에 항상 존재하며, 성공할 때까지 백만 번이나 실수할 여유가 있습니다.

이 문제를 해결하기 위해 일부 개발자는 "[...]고급 위험 분석 엔진과 적응형 챌린지를 사용하여 악성 소프트웨어가 웹사이트에서 악의적인 활동에 참여하는 것을 방지하는"도구인 re-captcha를 사용합니다. 일반 영어에서는 봇을 양식에서 멀리 유지합니다.

사용하는 기술에 따라 훌륭한 래퍼가 많이 있습니다. Ingenious에서는 Next.js를 사용하고 웹사이트를 Vercel에 배포합니다. 내가 원했다면 이미 존재하는 npm 패키지를 사용하여 문의 양식에 일부 re-captcha 유효성 검사를 구현할 수 있었지만 사소하게 들리지 않는 것을 위한 라이브러리를 추가하는 유일한 아이디어였습니다.

대안을 찾다가 허니팟에 대해 배웠습니다. 허니팟은 봇이 올바른 정보를 제출하고 있다고 생각하게 하기 위해 양식에 추가하는 입력입니다. 아이디어는 봇에 합법적으로 보이는 허니팟 필드를 제공하고 CSS로 사용자에게 숨기는 것입니다. 백엔드에서 허니팟 필드가 제출되었는지 확인하고 해당 제출을 삭제할 수 있습니다.

export default function ContactForm({ onSubmit }) {
  return (
    <div>
      <h1>Contact Us</h1>
      <form onSubmit={onSubmit}>
        {/* This is for the bot */}
        <div className="honey">
          <label htmlFor="name">Name</label>
          <input id="name" name="name" type="text" autoComplete="off" />
        </div>
        <div className="honey">
          <label htmlFor="email">Email</label>
          <input id="email" name="email" type="email" autoComplete="off" />
        </div>
        <div className="honey">
          <label htmlFor="message">Message</label>
          <textarea id="message" name="message" autoComplete="off"></textarea>
        </div>

        {/* This is for real users */}
        <div>
          <label htmlFor="name89jhbg2">Name</label>
          <input name="name89jhbg2" id="name89jhbg2" type="text" />
        </div>
        <div className="flex flex-col">
          <label htmlFor="email789miu82">Email</label>
          <input name="email789miu82" id="email789miu82" type="email" />
        </div>
        <div className="flex flex-col">
          <label htmlFor="message342cdssf3">Message</label>
          <textarea name="message342cdssf3" id="message342cdssf3"></textarea>
        </div>
        <button>Send</button>
      </form>
      <style jsx>{`
        .honey {
          display: none;
        }
      `}</style>
    </div>
  )
}

내가 사용한 또 다른 기술은 페이지 자체가 렌더링된 후 몇 초 후에 양식 렌더링을 지연시키는 것입니다. 이에 대한 제 생각은 봇이 JS를 실행할 수도 있고 실행하지 않을 수도 있다는 것입니다. 아마도 실행하겠지만 3~4초 이상 기다리지는 않을 것입니다. 반면에 사용자는 페이지 아래로 내려갈 때까지 양식을 볼 필요가 없습니다. 이 경우 문의 양식은 페이지 하단에 가깝습니다. 사용자가 맨 아래로 스크롤하면 양식이 이미 로드됩니다.

Next.js로 작업할 때 next/dynamic 기능과 비슷한 React.lazy 패키지를 사용합니다. 아이디어는 새 청크를 생성하는 모듈을 동적으로import 만드는 것입니다. Next.js는 런타임에 모듈을 가져옵니다.

모듈을 가져오면 지연할 수 있는 약속이 반환됩니다. Next.js의 경우 모듈이 클라이언트 측에서만 ssr: false 하도록 요청해야 합니다. 그렇지 않으면 정적으로 생성된 페이지에서 끝납니다.

import dynamic from "next/dynamic";
import { delay } from "../utils";

const ContactForm = dynamic(
  () => import("../components/contact-form").then(delay(3000)),
  {
    ssr: false
  }
);

export default function IndexPage() {
  return (
    <>
      <ContactForm onSubmit={onSubmit} />
    </>
  );
}

마지막으로 동적으로 가져온 구성 요소를 로드하는 동안 자리 표시자 구성 요소를 사용하도록 Next.js에 지시할 수 있습니다.

import dynamic from "next/dynamic";
import { delay } from "../utils";

function ContactFormPlaceholder() {
  return <div>Nice Spinner</div>;
}

const ContactForm = dynamic(
  () => import("../components/contact-form").then(delay(3000)),
  {
    ssr: false,
    loading: () => <ContactFormPlaceholder />
  }
);

이 기술은 SEO에 피해를 줄 수 있지만 문의 양식에 SEO가 필요한 경우는 몇 번입니까? 요점은 실제 사용자가 봇, 심지어 GoogleBot도 아닌 양식을 제출할 수 있도록 하는 것입니다.

전체 예는 다음과 같습니다.

코드 샌드박스를 다시 로드하고 아래로 스크롤하여 실제 양식이 로드되기 전에 양식 자리 표시자를 확인하고 "숨겨진 필드 표시"확인란을 클릭하여 양식을 봇으로 제출할 수 있습니다.