웹 UI 스팸 방지 및 CAPTCHA 지원

GitLab 애플리케이션의 새로운 UI 영역에 스팸 방지와 CAPTCHA 지원을 추가하는 방법을 설명합니다.

GitLab 애플리케이션의 새로운 UI 영역에 스팸 방지 및 CAPTCHA 지원을 추가하는 방법은 기존 코드의 구현 방식에 따라 다릅니다. 지원되는 요청 제출 시나리오 # 세 가지 시나리오가 지원됩니다. 두 가지는 Apollo 또는 Axios를 사용하는 JavaScript XHR/Fetch 요청에 사용되며, 하나는 표준 HTML 폼 요청에만 사용됩니다: JavaScript 기반 제출 (Vue를 통할 수도 있음) Apollo 사용 (Fetch/XHR 요청을 통한 GraphQL API) Axios 사용 (Fetch/XHR 요청을 통한 REST API) 표준 HTML 폼 제출 (HTML 요청) 구현의 일부는 어떤 시나리오를 지원해야 하는지에 따라 달라집니다. JavaScript XHR/Fetch 요청에 특화된 구현 작업 # 두 가지 방법이 완전히 지원됩니다: GraphQL API를 사용하는 Apollo. GraphQL API를 사용하는 Axios. 프론트엔드와 백엔드 간의 스팸 및 CAPTCHA 관련 데이터 통신에는 모델에 추가 필드를 추가할 필요가 없습니다. 대신 다음을 통해 통신이 처리됩니다: 요청의 커스텀 헤더 값을 통해. 응답의 최상위 JSON 필드를 통해. 스팸 및 CAPTCHA 관련 로직도 재사용 가능한 모듈과 헬퍼 메서드로 깔끔하게 추상화되어 있으며, 기존 로직을 래핑할 수 있습니다. 잠재적인 스팸이 감지되거나 CAPTCHA 표시가 필요한 경우에만 기존 플로우를 변경합니다. 이 접근 방식을 통해 애플리케이션의 새 영역에 스팸 및 CAPTCHA 지원을 최소한의 변경으로 추가할 수 있습니다. 프론트엔드의 경우, 잠재적으로 제로(zero) 변경이 필요할 수 있습니다! 프론트엔드에서는 Apollo에 ApolloLink 를 사용하고 Axios에는 Axios 인터셉터를 사용하여 추상적이고 투명하게 처리됩니다. CAPTCHA 표시는 표준 GitLab UI / Pajamas 모달 컴포넌트로 처리됩니다. 관련 프론트엔드 코드는 모두 app/assets/javascripts/captcha 아래에서 찾을 수 있습니다. 그러나 요청 인터셉션 및 모달의 실제 처리가 투명하게 이루어지고, 폼이나 페이지의 관련 JavaScript 또는 Vue 컴포넌트에 대한 필수 변경 사항이 없더라도, 요청 또는 오류 처리에서 변경이 필요할 수 있습니다. 기존 동작이 올바르게 작동하지 않을 수 있기 때문에 변경이 필요합니다. 예를 들어, 실패하거나 취소된 CAPTCHA 표시가 표준 요청 플로우나 UI 업데이트를 방해하는 경우입니다. 잠재적인 문제를 발견하기 위해 모든 시나리오에 대한 신중한 탐색적 테스트가 중요합니다. 이 시퀀스 다이어그램은 프론트엔드의 JavaScript XHR/Fetch 요청에 대한 표준 CAPTCHA 플로우를 보여줍니다: sequenceDiagram participant U as User participant V as Vue/JS Application participant A as ApolloLink or Axios Interceptor partici