Suggestion for an alternative way to block bot spam comments (reCAPTCHA & etc.)

[zvuc]

• http://haacked.com/archive/2007/09/11/honeypot-captcha.aspx/
• http://www.usertesting.com/blog/2014/04/09/think-your-site-needs-captcha-try-these-user-friendly-alternatives/
• http://uxmovement.com/forms/captchas-vs-spambots-why-the-slider-captcha-wins/

봇과 사람을 구별하는데 captcha를 많이 쓰는건 이미 흔한건데 사실 개인적으로 이걸 별로 안 좋아하는 이유가 댓글을 작성하려할때 한단계 더 텍스트를 입력해야한다는 귀찮음이 생기고 디자인적으로도 별로 미려한 방식은 아니라 꺼려하고 있었는데요,

최근 트위터 등지를 통해서 유저에게 귀찮은 단계를 하나 더 제공하는게 아니고 그냥 한번 체크만 하면 되는 체크박스 형식이라든가 폼을 숨겨놓는 honeypot 방식이라든가 꽤 괜찮아보이는 방식의 봇 트랩이 있다는걸 알게 되었습니다. 텍스트큐브를 벌써 7년 넘게 쓰고있는데 아직까지도 완벽하게 스팸 문제를 이겨내지 못한지라.. (수많은 플러그인을 써봤지만 결국 어떤것도 만족하지 못하고 지금은 모 님의 플러그인중 '영어만 들어있는 코멘트'는 무조건 차단하는 방식으로 하고 있는데요 문제는 실제 외국인 방문자가 있다거나 국내 사용자라도 단문의 코멘트를 남길경우 잘린다는 것이..)

텍스트큐브 내장으로 이런 간단한 방식의 캡차를 도입해보는건 어떨까 싶은데요, 스킨 html파일에서 넣는다고 해서 할수 있는건 아닌것 같아보이더라구요. 어떻게 생각하시는지 의견을 듣고싶습니다.

[inureyes]

reCAPTCHA를 적용할 방법을 찾아보고, 내장하거나 아니면 플러그인 형태로 붙일 수 있도록 하겠습니다. 혹시 플러그인으로 처리가 안 될 것 같으면 그게 가능하도록 API를 추가로 만들어서 플러그인을 붙이겠습니다. :+1:

[inureyes]

Reference : https://www.google.com/recaptcha/intro/index.html

@achimnol : Interested in this? :+1:

[achimnol]

@inureyes: Call!

[achimnol]

현재 구현 작업 진행 중인데 몇가지 이슈 남겨둡니다.

기본 구현 방향 :

• Google로부터 받아온 site key와 secret key 등록은 플러그인 환경설정 이용해서 구현
• 플러그인 활성화 시 코멘트 목록과 입력양식 불러올 때마다 자동으로 recaptcha 컨트롤 추가
• 코멘트 전송 시 recaptcha response 정보를 서버로 전달하여 AddingComment 이벤트를 통해 플러그인에서 Google 서버와 통신해 accept 여부 결정

프로그래밍 상의 이슈 :

• 코멘트 입력폼을 띄울 때 AJAX로 불러오는 HTML 내용을 플러그인에서 customize할 수 있는 지점이 존재하지 않음 -> 자바스크립트로 해결 가능 (코멘트 버튼 누르는 이벤트에 핸들러 추가해서 HTML 생성 여부를 타이머로 모니터링하다가 생성되면 Google 라이브러리 호출해서 초기화 수행. 타이머를 사용하는 이유는 AJAX로 들어오는 HTML에 script 태그를 넣어도 보안 문제로 웹브라우저가 자동 실행해주지 않는 문제가 있기 때문.)
• 코멘트 입력폼에서 g-recaptcha-response라는 이름의 추가 필드값이 전송되는데 현재는 텍스트큐브의 IV (Input Validation) 레이어에서 플러그인이 원하는 필드형식을 custom으로 추가할 수 있는 기능이 없음 -> 텍스트큐브 코어에 기능을 추가해야 함.
• 기존에 스팸 방지를 위해 자바스크립트로 복잡하게 짜여진 코멘트 입력 데이터 조작 코드를 싹 들어내고(어차피 현재는 스팸 방지에 별다른 효과도 없음) 정리하는 작업 필요. 예를 들어 코멘트가 달리는 글의 entry ID 값이 IV 필터에 동적으로 포함되는데 플러그인이 IV를 정하는 시점에는 이를 알 방법이 없음.

[achimnol]

일단 일반 댓글 달기와 로그인 상태에서의 댓글 달기까지는 정상 동작 및 recaptcha 오류 검증 확인했습니다. 현재 남은 이슈는 댓글에 댓글 달기가 동작하지 않는다는 점으로, 이 팝업창 인터페이스는 플러그인 관련 이벤트가 존재하지 않고 전체가 하드코딩(library/view/replyEditorView.php)되어 있어 이 역시 코어 개선이 필요한 상태입니다.

[inureyes]

일반적인 스킨에서 플러그인이 동작하지 않는 문제가 있습니다. DOM 이 스킨마다 달라서 일어나는 일로 보입니다.

이 부분을 해결하기 위해 (hentry 같이) 스킨 파서에서 임의의 위치에 엘리먼트를 강제로 하나 출력해 주는 식으로 개선하는게 어떨까 싶습니다.

[achimnol]

기본적인 기능 구현 및 동작 확인 완료하였습니다. 향후 추가 수정·개선 사항은 별도 이슈로 다루겠습니다.

[achimnol]

아직 특수한 경우에 대한 자바스크립트 후킹이 더 필요합니다.

• 댓글을 수정·삭제해서 댓글 영역이 다시 불러와지는 경우
• 방명록을 작성해서 방명록 영역이 다시 불러와지는 경우

궁극적으로는 자바스크립트도 텍스트큐브 PHP 코드처럼 fireEvent() 같은 자체적인 이벤트 프레임워크를 도입해서 특정 동작에 대한 확장이 가능하도록 해야 할 것 같습니다.

[zvuc]

안녕하세요, 우선 무엇보다도 먼저 감사하다는 말씀을 드리고 싶습니다. 제안했던 것이 이렇게 빨리 답변을 받고 실제 기능으로 구현될지는 기대 안 하고 있어서요, 텍스트큐브 아직 안 죽었구나!!(?) 하고 오랜만에 희망(?)을 가지게 되는 계기가 되었습니다 ㅎㅎ

오늘 메인 블로그에 텍스트큐브를 dev 빌드로 올리고 reCAPTCHA 플러그인을 적용해보고 여러모로 테스트 해봤는데요, 우선 느낀 점은 구글의 '인간' 감지 방법이 어떤것인지 정확히 모르겠지만 여러번 시도해본 결과 생각했던것보다 본래 뜨지 말아야할 기존 캡챠 입력폼이 뜬 경우가 상당히 많았다는 점입니다 (사실 최초 적용 후 1회 클릭 이후 모든 타 기기에서의 시도가 전부 문자열 입력창이 떴습니다). 구글 리캡차를 실제 적용한 사이트들을 아직 많이 보지 못해서 잘 몰랐던 점도 있긴 합니다만.. 이렇게 되면 제가 처음에 무엇보다 피하려고 했던 '유저 입장에서 댓글을 작성하는데 한 단계가 더 생겨서 귀찮아지는 점'의 문제를 극복하지 못하는 지라 조금 걱정이 됩니다.

각종 환경에서의 버그나 기타 integration 문제는 둘째치고, 또 하나 걱정되는 것은 CSS인데요, iframe으로 위젯이 출력되는 만큼 위젯 내부를 수정할 수가 없어서 블로그의 스킨 디자인에 따라 유저가 커스터마이징을 할 수 없다는 점이 있습니다. 구글의 documentation페이지를 보아도 파라미터라든가 내부 스타일을 건드릴 수 있는 방법은 없는것 같고요. 모바일 (가로폭 320px)에서 보았을때는 페이지가 무조건 깨지게 된다는 문제도 연이어 발생합니다.

사실 이미 대부분 구현과 적용이 완료된 상태에서 뒤늦게 이런 말씀을 드리는것이 뭔가 찬물을 끼얹는것 같아서 죄송하긴 합니다만 ㅠㅠ 처음에 제안할때 링크를 걸고 제가 생각했던건:

1. CSS로 숨겨진 빈 폼을 출력해 봇이 폼을 채우지 말아야 할 폼을 채우게 낚는 honeypot 방식
2. 자바스크립트로 단순한 체크박스를 출력해 사람이 댓글 전송을 누르기 전 체크박스를 체크하게 하는 방식 위 두가지를 조합해 적용해보는 것이었는데요. 외부 서비스에 의존하는 방식도 아니고 UI상으로도 기존의 스킨 디자인에 실제 보이는 차이점은 체크박스 하나만 삽입하면 되는 것이라 레이아웃을 파괴하지 않을수도 있고요. 물론 요즘 스팸봇들이 워낙 지능적이라 얼마나 효과적으로 걸러낼 수 있느냐가 관건이겠지만 그래도 한번 시험해보면 좋겠다는 생각을 했습니다.

[achimnol]

안녕하세요~ 말씀하신 방식 모두 과거 시도했던 적이 있습니다. 문제는, 스패머 입장에서는 결국 서버로 가는 parameter를 우리가 원하는 형식으로 맞춰주기만 하면 되는 거라서, 아무리 속임수를 많이 써도 그때그때 텍스트큐브 버전 업데이트할 때마다 일시적인 차단 효과는 있을지 몰라도 텍스트큐브의 소스코드가 공개되어 있는 이상 익명 세션에서의 봇 동작을 궁극적으로 차단할 방법이 없습니다. 그래서 EAS/FAS와 같은 별도의 집단 지성 혹은 기계학습 기반의 필터링 서비스를 만들었던 것이고요.

Google reCAPTCHA 같은 경우는 Google 자체의 독점적인 방법과 검증 알고리즘을 사용하기 때문에 이런 문제에서 상대적으로 자유롭고, 아직까지 뒤틀린 문자열 이미지 인식이나 이미지의 유사도 판단과 같은 부분은 알고리즘으로 구현하기가 까다롭기 때문에 스팸 차단 효과가 있는 것입니다. 정확히 알려진 바는 없으나 AdSense의 사용자 추적 기술 등을 활용해 다른 구글 서비스에 로그인한 세션 정보가 있는지, 마우스 포인터나 키보드의 움직임 패턴 등을 보고 인간 여부를 판정하는 것으로 보입니다.

이번 reCAPTCHA 플러그인은 사실 Google의 reCAPTCHA 서비스뿐만 아니라 다른 형태의 bot trap을 텍스트큐브에 구현할 수 있는 기술적 토대를 만들었다는 점이 더 중요합니다. 텍스트큐브 자체의 IV 보안 레이어를 플러그인이 customize할 수 있는 기능이 추가되었죠. 자바스크립트 쪽은 현재는 후킹으로 땜질했지만 좀더 편리한 방법으로 플러그인을 제작할 수 있도록 간단한 이벤트 프레임워크를 만들 생각입니다.

[zvuc]

아, 이미 시도해보신 전적이 있었군요. ㅠㅠ 음.. 그렇게 되면 현재로써 리캡차만큼 스팸 방지에 더 강력한 방법은 없을 것 같네요. 다만 문제라면 커스터마이징과 모바일에서의 UX 문제라.. 뭔가 개선될만한 여지가 있을까요?

[achimnol]

reCAPTCHA 플러그인의 디자인 이슈는 구글 쪽에서 해결해주지 않으면 딱히 방법이 없습니다. 현재는 light / dark 테마를 선택하는 옵션만 제공되고 있죠. 다만 구글의 관련 블로그 글들을 보면 향후 모바일 지원 개선 등을 계획하고 있는 걸로 보아 앞으로 차츰 나아질 것으로 생각합니다.

[inureyes]

@achimnol ... 바로 적용해보겠습니다! 스킨 수정은 나중에 필요하면 하면 되겠죠! ^^ P. S. 구글 reCAPTCHA의 불편한 점 하나 발견해서 말씀드릴게요. 댓글 하나를 작성하고 바로 또 하나를 작성하려고 하면 안 됩니다. 반드시 새로고침을 해야 하네요. 댓글 하나를 작성하면 reCAPTCHA 폼이 없어지는 것이 문제인 것 같습니다. 원래 이렇게 만드셨을수도 있겠지만 일단 말씀드립니다! ... 라고 합니다. walter.E 님께서 공지 블로그에 리포트해주신 내용입니다.

[achimnol]

@inureyes 그 부분 해결을 위해서 #1732 초기 구현이 필요합니다. 안 하고도 끼워맞출 순 있긴 한데 같은 코드를 여러 곳에 copy & paste하게 되는 문제가....-_-;

[inureyes]

@achimnol 결국 삽질을 시작해야겠네요;; ....