Installer les outils de développement

​

Outils de développement recommandés

Ces services facultatifs ne sont pas nécessaires pour exécuter Overleaf, mais ils sont fortement recommandés pour le développement, le débogage et l’inspection lors du développement en local.

• Hoppscotch est un outil léger de test d’API similaire à Postman, mais basé sur le navigateur et très pratique pour le développement.
  • Frontend : http://localhost:3000
  • Proxy (pour contourner CORS) : http://localhost:9159
• RedisInsight fournit une interface visuelle pour inspecter les données Redis. Interface disponible à l’adresse : http://localhost:5540
• Mongo Express est une interface web pour MongoDB. Vous pouvez y accéder sur http://localhost:8081 avec les identifiants : admin:pass

Veuillez ajouter ce qui suit à votre 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

​

Configurer Hoppscotch

​

Requêtes API via le proxy

Pour configurer Hoppscotch, rendez-vous sur http://localhost:3000, puis ouvrez l’onglet des paramètres. Vous devez définir Proxy sur http://localhost:9159, afin que vos outils de débogage puissent communiquer avec les réseaux internes des conteneurs.

Vous pouvez maintenant tester avec http://web:3000/status pour vérifier que le service web est actif :

​

Problèmes de CSRF

Si vous utilisez Postman ou d’autres outils de débogage pour générer une requête POST, vous constaterez peut-être que la connexion est refusée, avec une erreur 401. Cela s’explique par le fait qu’Overleaf est protégé par une vérification CSRF.

Dans votre console, vous verrez peut-être :

Pour gérer cela dans votre développement Overleaf, vous devez configurer votre jeton CSRF. Voici le tutoriel détaillé.

1. Ajouter un script de pré-requête

   Ajoutez le code suivant dans Pre-Request

   

   Voici le script :

   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. Ajouter les en-têtes de requête

   Vous devez ajouter les en-têtes suivants :

   Nom de l’en-tête	Valeur de l’en-tête
   Content-Type	application/json
   X-Csrf-Token	<<csrftoken>>
   Cookie	<<cookie_header>>

   
3. Se connecter avec les outils d'API

   Vous pouvez maintenant vous connecter avec votre nom d’utilisateur et votre mot de passe.

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

   Voici la réponse obtenue lorsque vous saisissez un nom d’utilisateur ou un mot de passe incorrect.