Google reCAPTCHA로 봇을 중지

Feb 7, 2026

어떻게

(이미지 크레디트 : 미래)

봇을 지키는 것은 항상 숫자 게임입니다. 슬프게도, 사용하기 쉬운 기계 학습 라이브러리가 균열이 만들어진 많은 고전적인 CAPTCHA 유형이 간단합니다. Google은 Botting Storm의 최전선에 서 있습니다. 결국 빅 G의 지표에서 발견 할 수있는 경우에만 무언가가 존재합니다 (눈에 띄게).

이로 인해 Google 엔지니어는 봇 방지 시스템 및 솔루션을 설계하는 데 상당한 양의 노력을 기울이고 있습니다. reCAPTCHA라는 제품을 통해 제 3자가 이용 가능하게 만들어졌으며, 다음 단계 중에는 함께 갈 것입니다. 봇과 관련이없는 더 많은 도구를 보려면 우리를 만나십시오 웹 디자인 도구 게시하다.

시작하기 전에 몇 가지 기본 사항을 해제해야합니다. 우선 : 봇을 보관하면 항상 서버 측 게임이 있습니다. 클라이언트에서 귀하의 봇 봇 측정의 반환 값을 검사하는 것은 이용증입니다. 침입자는 소스 코드를 분석하거나 반품 유효성 검사를 패치하여 작업하기 만하면됩니다.

2 차 봇이 모든 봇이 동등하게 생성되는 것은 아닙니다. 예를 들어 GoogleBot을 잠그면 웹 사이트가 더 이상 인덱싱되지 않아도됩니다. 유사한 문제는 다른 산업별 봇과 함께 발생할 수 있습니다. 마지막으로, 봇은 어떤 경우에는 훨씬 더 덜 악의 일 수 있습니다. 트래픽이 필요한 모든 것이 필요할 때 봇은 클릭 한 번만 클릭으로 표시됩니다.

8 놀라운 Google API (그리고 사용 방법)

01. 가입하십시오!

Google은 reCAPTCHA 사용자를 닫습니다. 헤드 Google 계정을 사용하여 로그인하여 도메인에서 좋아하는 도메인 외에도 "localhost"를 추가하십시오. 가장 잘 알려진 봇 봇 측정이므로 "로봇이 아닌"확인란의 유형을 선택하십시오.

02. 사이트 및 서버 키를 저장합니다

Google은 서버와 사이트 키를 표시하여 설치 프로세스를 통해 작업 할 때 지속성을 보장합니다. 후자가 제 3 자와 공유 할 수있는 동안 비밀 키가 서버 환경의 경계를 결코 남겨 두지 않도록하십시오.

03. 사이트 확인 이해

Google은 챌린지 - 응답 프로세스의 변형을 사용하여 결과 무결성을 보장합니다. CAPTCHA 인스턴스는 서버가 BIG가 호스팅되는 검증 시스템으로 서버가 "켜십시오"라는 암호화 값을 반환합니다. 결과가 유효하게되면 올바른 HTTP 응답이 백엔드 로직으로 반환됩니다.

04. Express.js를 설정합니다

전체 인증 흐름을 보여주는 턴키 솔루션을 보여주는 것이 중요합니다. 이로 인해 Sort의 "서버"로 시작해야합니다. Express JS는 최근에 자주 주제 였으므로 새로 생성 된 프로젝트 해골에 배포해야합니다.

 Tamhan @ Tamhan-ThinkPad : ~ / 노드 스페이스 / 노드 감지 $
npm init --y.
/home/tamhan/nodespace/nodeverify/package.json에 썼습니다.
  ...에 ...에 ...에
Tamhan @ tamhan-thinkpad : ~ / 노드 스페이스 / 노드 감지 $
NPM 설치 바디 파서 익스프레스 요청 - 저장
...에 ...에 ...에
+ [email protected].
+ [email protected].
+ [email protected]

05. 봉사 준비

잘 알려진 "i Robot이 아님"확인란을 사용하여 HTML 파일이 필요합니다. 이것이 상호 작용 흐름을 보여주는 샘플이며,이 단계를 동반 한 마크 업을 포함하는 정적 문서로 시작한다는 것을 감안할 때.

 & lt; html & gt;
& lt; head & gt;
& lt; recaptcha 데모 : 간단한 페이지
& lt; / title & gt;
& lt; scrc = "https://www.google.com/recaptcha/api.js"async derfer & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; 폼 액션 = "?" 방법 = "포스트"& gt;
& lt; div class = "g-recaptcha"data-sitekey = "your_site_key"& lt; / div & gt;
& lt; br / gt;
& lt; 입력 유형 = "제출"값 = "제출"& gt;
& lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;

06. 이해하고 시험합니다

Stop the bots with Google reCAPTCHA: Understand and test — 이러한 결과를 보려면 코드를 실행하십시오 (이미지 크레디트 : Tam Hanna)

Google은 CAPTCHA Logic이 포함 된 API 파일을 제공합니다. API.JS가로드되면 포함 된 코드는 DOM을 분석하고 대체합니다. & lt; div & gt; 올바른 클래스 태그가 포함 된 태그. & lt; 제출 & gt; 태그는이 글을 쓰는대로 혼자 남아 있습니다. 어느 쪽이든, 선택한 결과를 보려면 선택한 브라우저에서 코드를 실행하십시오.

07. 일부 요소를로드하십시오

Express.js에서 배달 체인을 만드는 것은 약간의 지능이 필요합니다. 하나의 실제로 유용한 도우미는 bodyparser입니다. 렌더링 워크 플로에 포함될 때 서버에서 리턴 된 개별 필드는 객체 지향 디자인 패턴을 사용하여 액세스하여 대리점 처리를 크게 단순화합니다.

 VAR Express = 요구 ( "익스프레스");
var bodyparser = 요구 ( "바디 - 파서");
VAR 요청 = 요구 ( "요청");

var myApp = express ();

myApp.use (bodyparser.json ());
myApp.Use (bodyparser.urlencoded ({확장 : true})));

08. 확인 준비 ...

Google의 확인란은 백그라운드에서 마술을합니다. 완료되면 새로운 필드가 G- reCAPTCHA- 응답 양식 속성에 추가됩니다. 이 데이터는 확인을 위해 Google 서버로 전송해야합니다. 이 단계를 수행하는 코드의 긴 문자열은 하나의 Google이 할당 된 것으로 대체됩니다.

 myApp.Post ( "/ tamstest", 함수 (요청, 응답) {
var recaptcha_url = "https://www.google.com/recaptcha/api/siteverify?";
reCAPTCHA_URL + = "Secret = 6LewmzGuaaaairsb2gv5akkx2cwyfulkzrmd7ws & amp;";
recAptCha_URL + = "응답 ="+ request.body [ "G- reCAPTCHA- 응답"] + "& amp;";
recAptCha_URL + = "remoteIP ="+ Request.Connection.RemoteAddress;

09. ... 그리고 Google 서버에 문의하십시오

다음 행위는 URL을 서버로 해제하는 것을 포함합니다. 이는 이전 단계에서 생성 된 주소를 기반으로하는 전통적인 JSON 요청을 통해 수행됩니다. 그런 다음 결과가 분석됩니다. 오류가 발생하면 클라이언트 측 응용 프로그램으로 오류가 반환됩니다.

 요청 (reCAPTCHA_URL, 함수 (오류,
resp, body) {
body = json.parse (본문);
if (body.success! == undefined & amp; & amp;!
성공) {
반환 응답 ({ "메시지":
"CAPTCHA 유효성 검사 실패"});
}
response.Header ( "content-type",
"응용 프로그램 / json"). send (본문);
});
});

10. 그것을 느슨하게 설정하십시오

Express.js의 HTTP 서버를 풀어야합니다. 이것은 app.listen 구조를 사용하여 가장 잘 수행됩니다. 1024보다 작은 숫자가있는 포트는 닉이드 운영 체제의 루트 사용자로 제한됩니다. 따라서 3000은 안전한 내기입니다.

 VAR 서버 = myApp.Listen (3000, 함수 () {
console.log ( "+ 서버를 듣기"합니다.
주소 (). 포트);
});

11. 양식을 조정하십시오

마지막으로, 우리의 양식은 노드에서 실행되는 로컬 서버와 연락을 취해야합니다 .js. 이것은 액션 문자열을 조정하여 가장 잘 수행됩니다. 특히 로컬 Express.js 서버를 사용하지 않는 경우 특히 유효한 도메인을 유효한 도메인으로 가리 킵니다.

& lt; body & gt; & lt; 폼 action = "http : // localhost : 3000 / tamstest"방법 = "post"& gt; & lt; div class = "g-recaptcha"데이터 - siteKey = "6Lewmzguaaaaeepswpvp6hlulnjxa_scwtwhyhyhge"& gt; & lt; / div & gt; & lt; br / gt;

12. 그것을 가져 오십시오!

Stop the bots with Google reCAPTCHA: Bring it up! — Python의 빠른 HTTP 서버를 사용하여 클라이언트 - 서버 시스템을 테스트합니다. (이미지 크레디트 : Tam Hanna)

Client-Server 시스템을 테스트하려면 Google의 Origin Verification으로 인해 두 개의 서버가 필요합니다. 다행히도 Python은 빠른 HTTP 서버를 제공합니다. express.js가 반환 된 응답의 확인을 수행하기 위해 Express.js가 입대하게됩니다.

 Tamhan @ Tamhan-ThinkPad : ~ / 노드 스페이스 / 노드 감지 $
노드 index.js.
3000 듣기
Tamhan @ tamhan-thinkpad : ~ / 노드 스페이스 / 노드 감지 $
python3 -m http.server.
0.0.0.0 포트 8000에 HTTP 제공 ...

13. 건조한 실행을하십시오

Stop the bots with Google reCAPTCHA: Perform a dry run — 보안 문자를 테스트 실행하십시오 (이미지 크레디트 : Tam Hanna)

실행 중일 때 확인란을 선택하고 큰 G가 당신을 던지는 데 어려움을 겪을 수 있습니다. 서버는 일반적으로 확인 측면에서별로 요구되지 않으며 위에 표시된 내용을 표시하는 데 진행됩니다.

14. 제출 버튼을 비활성화합니다

Stop the bots with Google reCAPTCHA: Disable the submit button — 시작시 제출 버튼을 비활성화하는 것은 유용성에 좋습니다. (이미지 크레디트 : Tam Hanna)

Google의 예제는 공격자로 클라이언트 측 제출 버튼을 무시하여 항상 JavaScript로 항상 다시 나타낼 수 있습니다. 보안 문자와 관련하여 제출 노브를 비활성화하는 동안 보안을 향상시키지 못하면 유용성에 긍정적 인 효과가 있습니다. 시작 후 버튼을 비활성화하여 시작하겠습니다.

& lt; 폼 action = "http : // localhost : 3000 / tamstest"방법 = "post"& gt;
& lt; div class = "g-recaptcha"데이터 - siteKey = "6Lewmzguaaaaeepswpvp6hlulnjxa_scwtwhyhyhge"& gt; & lt; / div & gt;
& lt; br / gt;
& lt; 입력 유형 = "제출"값 = "제출"사용 중지 & gt;
& lt; / form & gt;

15. CAPTCHA 이벤트를 처리하십시오

Stop the bots with Google reCAPTCHA: Handle CAPTCHA events — 이제 이벤트 처리기를 추가하십시오 (이미지 크레디트 : Tam Hanna)

다음으로 이벤트 처리기를 추가해야합니다. Google의 Captcha API는 사용자가 클라이언트 측 위치에서 확인 시도를 통과 할 때마다 호출됩니다.

 & lt; html & gt;
& lt; head & gt; ...에 ...에 ...에
& lt; script & gt;
ondcfired (값) 함수 {
console.log (값);
}
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; 폼 동작 = "http : // localhost : 3000 /
tamstest "method ="post "& gt;
& lt; div class = "g-recaptcha"데이터 - sitekey = "6Lewmzguaaaaeepswpvp6hlulnjxa_scwtwhyhyhge"데이터 - 콜백 =
"ondcfired"& lt; / div & gt;

16. 소풍 : 동적 CAPTCHA 렌더링

Google은 페이지로드 중에 개발자가 reCAPTCHA 요소를 래핑하도록 제한하지 않습니다. 그만큼 세우다() reCAPTCHA API에서 발견 된 방법을 사용하면 하나 이상의 & lt; div & gt; reCAPTCHA 위젯으로 변환 할 웹 사이트의 태그.

 var myCallback = 함수 (Val) {콘솔.
로그 (val); };
grecaptcha.render (
document.getElementsById ( 'my-id'),
{
콜백 : myCallback,
SiteKey : MySiteKey.
});

17. 필요한 경우 버튼을 활성화 ...

이를 통해 하나의 주요 문제가 남아 있습니다. RECAPTCHA가 제공 한 클릭 이벤트가 응용 프로그램 코드에 제공되는 클릭 이벤트가 다시 사용하면 제출 버튼을 다시 활성화해야합니다. 그런 간단한 예로 jQuery로드는 불필요하므로 대신 몇 가지 일반 JavaScript로 되돌아갑니다.

 & lt; script & gt;
ondcfired (값) 함수 {
Document.GetElementById.
( "버튼"). Disabled = False;
}
& lt; / script & gt;

 & lt; 입력 유형 = "제출"ID = "버튼"
값 = "제출"비활성화 & gt;

18. ... 그리고 우리를 정리하십시오

Google은 챌린지 응답 데이터를 영원히 저장할 수 없습니다. 그것으로 인해 확인 시간이 매우 빠른 시간이 지남에 따라, 우리의 프로그램은 그것에 대해 알지 못합니다. 다행히도 API에는 알림에 사용할 수있는 추가 필드가 포함되어 있습니다.

 함수 OnDcexpired (값) {
document.getElementById ( "버튼").
Disabled = true;
}

& lt; div class = "g-recaptcha"data-sitekey = "6lewmzguaaaaaepswpvp6hlulnjxa_scwtwhyhge" 데이터 - 콜백 = "onDcfired"데이터 만료 콜백 = "onDcexpired"& lt; / div & gt;

19. 추가 속성을 사용하십시오

헤드 JavaScript API에 포함 된 속성 목록을 찾으려면. 그들은 다양한 행동을 조정할 수 있습니다 - 예를 들어, reCAPTCHA 위젯은 야간 친화적 인 색 구성표로 렌더링 될 수 있습니다!

20. 투명하게 작업 ...

Google은 최근에 명시적인 사용자 상호 작용이 필요없는 reCAPTCHA API의 세 번째 버전을 도입했습니다. 대신 페이지 초기화 중에로드하기 만하면 코드는 자동으로 웹 사이트에서 와일드를 실행하는 사용자의 동작을 자동으로 모니터링합니다.

& lt; 스크립트 src = "https://www.google.com/recaptcha/api.js?reden=recaptcha_site_key"& gt; & lt; / script & gt; & lt; script & gt; grecaptcha.ready (함수 () { grecaptcha.execute ( 'recaptcha_site_key', {조치 : '홈페이지'}). 그런 다음 (함수 (토큰) { ...에 ... }); }); & lt; / script & gt;

21. ... 그리고 추가 정보를 제공하십시오

웹 사이트에서 수행되는 동작에 대한 추가 데이터의 플러그인 이익. 이 단계에 동반되는 스 니펫은 사용자가 현재 홈페이지를 방문하는 것을 알릴 것입니다. API에 대한 자세한 정보는 문서에서 찾을 수 있습니다.

 & lt; script & gt;
grecaptcha.ready (함수 () {
grecaptcha.execute ( 'recaptcha_site_key',
{조치 : '홈페이지'});
});
& lt; / script & gt;

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London — (이미지 크레디트 : 미래)

9 월 26 일에 Shoreditch in Creative Bloq, Net 및 Web Designer가 가져온 웹 디자이너를위한 맞춤식 회의 인 CSS를 생성하는 CSS를 생성하기 위해 9 월 26 일에 CSS를 생성하는 CSS에 가입하십시오. 8 월 15 일 이전에 이른 새 티켓을 예약하십시오 www.generateconf.com. ...에

이 기사는 원래 Creative Web Design Magazine의 Issage 287에서 출판되었습니다. 웹 디자이너 ...에 여기 문제를 구입하십시오 또는 웹 디자이너를 구독하십시오 ...에

관련 기사:

8 필수 WordPress 보안 비밀
Codepen이 어떻게 보안을 주었는지
9 해커에서 웹 사이트를 보호하기위한 보안 팁

Google reCAPTCHA로 봇을 중지

01. 가입하십시오!

02. 사이트 및 서버 키를 저장합니다

03. 사이트 확인 이해

04. Express.js를 설정합니다

05. 봉사 준비

06. 이해하고 시험합니다

07. 일부 요소를로드하십시오

08. 확인 준비 ...

09. ... 그리고 Google 서버에 문의하십시오

10. 그것을 느슨하게 설정하십시오

11. 양식을 조정하십시오

12. 그것을 가져 오십시오!

13. 건조한 실행을하십시오

14. 제출 버튼을 비활성화합니다

15. CAPTCHA 이벤트를 처리하십시오

16. 소풍 : 동적 CAPTCHA 렌더링

17. 필요한 경우 버튼을 활성화 ...

18. ... 그리고 우리를 정리하십시오

19. 추가 속성을 사용하십시오

20. 투명하게 작업 ...

21. ... 그리고 추가 정보를 제공하십시오

어떻게 - 가장 인기있는 기사

Photoshop에서 레이어를 뒤집는 방법 : 완전한 가이드

친 화성 디자이너 : 제약 조건을 사용하는 방법

5 분 이내에 사람을 스캔하는 방법

만델불을 만드는 방법

색상과 빛으로 캐릭터를 팝하게하십시오

모델링 속도를 높이는 6 가지 방법

개 연필 그리기

캐리커처 기술 개발

카테고리