Playwright JSON 요청으로 해결된 토큰 제출

1. 1.

   솔버 준비

   Node.js 22+, Playwright와 공식 JavaScript SDK를 사용하세요. SDK 설치 안내를 따르고, npm 레지스트리에서 제공된다고 가정하지 말고 문서에 명시된 패키지 다운로드를 사용하세요. SOLVETHREE_API_KEY는 브라우저 코드가 아닌 Node.js 프로세스에 보관하세요.

2. 2.

   사이트 및 프록시 설정

   TARGET_URL을 직접 소유한 테스트 페이지로, SOLVETHREE_PROXY를 해당 페이지에 사용할 HTTP 또는 HTTPS 프록시 URL로 설정하세요. 이 예제는 페이지의 호스트 이름에 대해 login 작업을 요청합니다. 해당 호스트 이름에는 활성 워크스페이스 프로필이 필요하므로 먼저 사이트 프로필을 설정하세요. 애플리케이션이 다른 작업을 사용한다면 작업을 변경하세요.

3. 3.

   정확한 제출 요청 식별

   TARGET_SUBMIT_URL을 경로를 포함한 JSON POST 엔드포인트로 설정하세요. 이 엔드포인트는 페이지와 출처가 같아야 합니다. 이 예제는 recaptchaToken이 포함된 객체와 접근 가능한 이름이 정확히 Submit인 버튼을 전제로 합니다. 이러한 애플리케이션별 세부 사항은 함께 변경하세요.

테스트 픽스처로는 해당 엔드포인트에 JSON 객체를 보내고 검사 가능한 응답을 반환하는 페이지를 사용하세요. 다른 필드와 CSRF 필드도 포함해 둘 다 변경되지 않는지 확인할 수 있도록 하세요. 입력을 그대로 반환하는 로컬 픽스처로 JSON 재작성을 시연할 수는 있지만, CAPTCHA가 수락되었는지는 검증할 수 없습니다. 제공된 예제는 여전히 실제 풀이를 수행하며, 프록시를 통해 접근할 수 있는 설정된 사이트가 필요합니다.

import { chromium } from 'playwright';
import { Solvethree } from '@solvethree/sdk';
const client = new Solvethree({ apiKey: process.env.SOLVETHREE_API_KEY });
const target = new URL(process.env.TARGET_URL);
const proxy = new URL(process.env.SOLVETHREE_PROXY);
const result = await client.solve({ site: target.hostname, action: 'login', proxy: process.env.SOLVETHREE_PROXY });
const proxyConfig = { server: `${proxy.protocol}//${proxy.host}`, username: decodeURIComponent(proxy.username), password: decodeURIComponent(proxy.password) };

const submit = new URL(process.env.TARGET_SUBMIT_URL);
if (submit.origin !== target.origin) throw new Error('Use this demo with a same-origin submission URL');
const browser = await chromium.launch();
try {
  const context = await browser.newContext({ proxy: proxyConfig, userAgent: result.solution.userAgent,
    extraHTTPHeaders: { 'sec-ch-ua': result.solution.secChUa } });
  const page = await context.newPage();
  await page.route(submit.href, async route => {
    if (route.request().method() !== 'POST') return route.continue();
    const body = route.request().postDataJSON();
    if (!body || typeof body !== 'object' || Array.isArray(body)) throw new Error('Expected the known JSON object');
    await route.continue({ postData: JSON.stringify({ ...body, recaptchaToken: result.solution.token }),
      headers: { ...route.request().headers(), 'content-type': 'application/json' } });
  });
  await page.goto(target.href);
  const outcome = page.waitForResponse(r => r.url() === submit.href && r.request().method() === 'POST');
  await page.getByRole('button', { name: 'Submit', exact: true }).click();
  console.log('Application HTTP status:', (await outcome).status());
  // recaptchaToken, the Submit button and this endpoint belong to this demo app.
  // Adapt them to the real application, retaining its session/CSRF data.
  await context.close();
} finally { await browser.close(); }

client.solve는 태스크를 생성하고 준비될 때까지 폴링하거나 예외를 발생시킵니다. 그런 다음 예제는 solution.userAgent, solution.secChUa와 풀이에 제공한 동일한 단일 프록시를 사용해 브라우저 컨텍스트를 생성합니다. SDK가 풀이 결과를 브라우저에 적용하는 것은 아닙니다. 이 작업은 라우트 핸들러가 수행합니다.

브라우저 컨텍스트는 새로 생성됩니다. 제출에 인증이나 다른 세션 설정이 필요하다면 제출 전에 이 컨텍스트에서 수행하세요. 이 예제는 기존 브라우저 세션을 가져오지 않습니다.

라우트는 탐색 전에 등록되며, 설정된 제출 URL에만 적용됩니다. POST가 아닌 요청은 변경 없이 계속 진행됩니다. POST 요청의 경우 핸들러는 기존 JSON 객체를 읽고 필드를 복사한 뒤 recaptchaToken만 교체합니다.

이렇게 하면 폼 값과 CSRF 데이터 같은 본문 필드가 유지됩니다. 핸들러는 요청 헤더도 복사하고 콘텐츠 유형을 JSON으로 설정합니다. 애플리케이션의 기존 세션 및 CSRF 동작을 유지하세요. 풀이된 토큰은 어느 쪽도 대체하지 않습니다.

라우트 범위를 모든 요청으로 넓히거나 토큰처럼 보이는 아무 필드나 교체하지 마세요. 직접 소유한 애플리케이션의 발신 요청을 검사하고 실제 필드 이름을 사용하세요. 이 예제는 위젯을 탐색하거나 임의의 콜백을 호출하지 않으며, 임의의 타사 페이지를 지원하지도 않습니다. 가로채기 메커니즘은 Playwright의 네트워크 문서에서 설명합니다.

응답 대기는 클릭 전에 시작되며 제출 URL과 POST 메서드가 일치하는 응답을 기다립니다. 기록되는 상태는 solvethree 태스크가 아닌 애플리케이션 응답의 상태입니다. 애플리케이션 자체의 성공 판정 기준에 따라 해당 응답 본문이나 애플리케이션의 결과 상태를 검사하세요. 태스크가 준비되었다는 사실이나 HTTP 성공 상태만으로는 애플리케이션이 토큰을 수락했다고 볼 수 없습니다.

응답 대기가 끝나지 않습니다.

해당 Submit 버튼이 설정된 URL로 POST 요청을 보내는지 확인하세요.

다음을 시도해 보세요: 애플리케이션에 맞게 버튼 로케이터, 엔드포인트 또는 메서드를 수정하세요. 가로채기 범위를 관련 없는 트래픽까지 넓히지 마세요.

라우트가 JSON 객체를 읽지 못합니다.

요청 본문과 콘텐츠 유형을 검사하세요.

다음을 시도해 보세요: 이 핸들러는 구조를 알고 있는 JSON 객체 엔드포인트에만 사용하세요. 폼 데이터, 배열 및 다른 페이로드 형식은 별도로 처리해야 합니다.

태스크가 준비되었지만 애플리케이션이 제출을 거부합니다.

발신 JSON에 solution.token이 있는지 검사한 다음 세션/CSRF 데이터, 작업, 반환된 브라우저 식별 정보 및 프록시를 확인하세요.

다음을 시도해 보세요: 다른 풀이에 비용을 지불하기 전에 일치하지 않는 요청을 수정하세요. 브라우저가 풀이에 사용한 프록시를 계속 사용하도록 하고 반환된 식별 정보를 사용하세요.

브라우저가 열리기 전에 풀이가 실패합니다.

HTTP 요청 오류와 태스크의 최종 실패를 구분하세요. 태스크가 실패했다면 errorCode와 error를 검사하세요.

다음을 시도해 보세요: 입력을 그대로 재시도하지 말고 보고된 입력, 프로필 또는 연결 문제를 해결하세요. API 오류 처리를 참고하세요.