개발 도구 설정

​

권장 개발 도구

이 선택적 서비스들은 Overleaf를 실행하는 데 필수는 아니지만, 로컬 개발 중 개발, 디버깅 및 검사에 적극 권장됩니다.

• Hoppscotch는 Postman과 유사한 경량 API 테스트 도구로, 브라우저 기반이라 개발에 매우 편리합니다.
  • 프런트엔드: http://localhost:3000
  • 프록시(CORS 우회용): http://localhost:9159
• RedisInsight는 Redis 데이터를 검사할 수 있는 시각적 인터페이스를 제공합니다. UI 주소: http://localhost:5540
• Mongo Express는 MongoDB용 웹 기반 UI입니다. http://localhost:8081에 접속하며, 자격 증명은 admin:pass입니다.

docker-compose.yml에 다음 내용을 추가하세요.

develop/docker-compose.yml

develop/docker-compose.yml

# services: 
  # Overleaf Dev Containers
  # ...
  
  # Add those for your development
  # API debug
  hoppscotch-frontend:
    image: hoppscotch/hoppscotch-frontend:latest
    ports:
      - "3000:3000"

  hoppscotch-proxy:
    image: hoppscotch/proxyscotch:latest
    environment:
      - PORT=9159
    ports:
      - "9159:9159"

  # Redis-insight
  redis-insight:
    image: redislabs/redisinsight:latest
    ports:
      - "5540:5540"
    depends_on:
      - redis
    volumes:
      - ./data/redis-insight:/data

  # mongo-express
  # basicAuth credentials are "admin:pass"
  mongo-express:
    image: mongo-express
    ports:
      - "8081:8081"
    environment:
      ME_CONFIG_MONGODB_SERVER: mongo

​

Hoppscotch 설정

​

API 요청 프록시

Hoppscotch를 설정하려면 http://localhost:3000에 접속한 다음 설정 탭으로 이동합니다. 디버그 도구가 컨테이너 내부 네트워크와 상호 작용할 수 있도록 Proxy를 http://localhost:9159로 설정해야 합니다.

이제 http://web:3000/status로 테스트하여 web이 살아 있는지 확인할 수 있습니다.

​

CSRF 문제

Postman이나 다른 디버그 도구로 post 요청을 보내면 로그인이 금지되며 401 오류가 발생하는 것을 볼 수 있습니다. 이는 Overleaf가 csrf 검증으로 보호되고 있기 때문입니다.

콘솔에서 다음과 같은 내용을 볼 수 있습니다.

Overleaf 개발 중 이 문제를 해결하려면 csrf 토큰을 설정해야 합니다. 자세한 방법은 다음과 같습니다.

1. Pre-Request 추가

   Pre-Request에 다음 코드를 추가합니다.

   

   스크립트는 다음과 같습니다.

   pm.sendRequest("http://web:3000/dev/csrf", function (err, res) {
       if (err) {
           console.log(err);
           return;
       }
   
       // 1) Save CSRF token (/dev/csrf)
       const token = res.text().trim();
       pw.env.set("csrftoken", token);
       console.log("csrftoken =", token);
   
       const setCookieHeader = (res.headers || []).find(h => h.key?.toLowerCase() === "set-cookie")?.value;
       console.log("set-cookie =", setCookieHeader);
   
       if (!setCookieHeader) return;
   
       const cookiePair = setCookieHeader.split(";")[0].trim(); // overleaf.sid=...
       pw.env.set("cookie_header", cookiePair);
       console.log("cookie_header =", cookiePair);
   });
   
2. 요청 헤더 추가

   다음 헤더를 추가해야 합니다.

   헤더 이름	헤더 값
   Content-Type	application/json
   X-Csrf-Token	<<csrftoken>>
   Cookie	<<cookie_header>>

   
3. API 도구로 로그인

   이제 사용자 이름과 비밀번호로 로그인할 수 있습니다.

   {
     "_csrf": "<<csrftoken>>",
     "email": "[e-mail]",
     "password": "xxxxxx"
   }
   

   잘못된 사용자 이름이나 비밀번호를 입력했을 때의 응답은 다음과 같습니다.