Intercepter et modifier les requêtes réseau dans Puppeteer : guide pratique

L’interception et la modification des requêtes réseau dans Puppeteer constituent un moyen puissant de gérer les tâches d’automatisation web. Elles vous permettent de surveiller, bloquer ou ajuster les requêtes et réponses HTTP en temps réel. Voici ce que vous pouvez faire :

• Surveiller l’activité réseau : consigner des informations telles que les URL, les méthodes, les en-têtes et les payloads.
• Modifier les requêtes : changer les en-têtes, rediriger les URL ou ajuster les payloads pour tester et déboguer les API.
• Bloquer des ressources : empêcher le chargement d’images, de polices ou de scripts afin d’améliorer les performances.
• Simuler des réponses : simuler des réponses de serveur pour les tests ou modifier le contenu dynamiquement.
• Tester des scénarios d’erreur : simuler des codes d’état HTTP tels que 404 ou 500 pour tester la gestion des erreurs.

Exemple rapide

await page.setRequestInterception(true);
page.on('request', async (request) => {
    if (request.url().includes('/api/test')) {
        await request.respond({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({ success: true })
        });
    } else {
        await request.continue();
    }
});

Ce guide explique comment utiliser l’API de Puppeteer pour intercepter les requêtes, avec des exemples pratiques de surveillance, de modification et de test des interactions réseau.

Tutoriel Puppeteer n°12 | Intercepteurs HTTP | Intercepter les requêtes

Surveiller les requêtes réseau

Puppeteer permet de surveiller les requêtes réseau, ce qui vous donne une vision claire du trafic web pendant les tâches d’automatisation. Voici comment suivre et analyser efficacement l’activité réseau.

Configurer des écouteurs de requêtes

Commencez par activer l’interception des requêtes et attachez un écouteur. Voici un exemple :

await page.setRequestInterception(true);
page.on('request', async (request) => {
    if (request.isInterceptResolutionHandled()) return;
    console.log(`Intercepted: ${request.url()}`);
    await request.continue();
});

Dans l’écouteur d’événement 'request', vous pouvez accéder aux requêtes interceptées et même les modifier. Veillez simplement à appeler request.continue() afin que la requête d’origine ne soit pas bloquée.

Filtrer les requêtes par type

Puppeteer vous permet de filtrer les requêtes réseau selon leur type, ce qui facilite la concentration sur un trafic spécifique. Voici comment traiter les requêtes de manière sélective :

page.on('request', interceptedRequest => {
    if (interceptedRequest.isInterceptResolutionHandled()) return;
    const resourceType = interceptedRequest.resourceType();
    switch(resourceType) {
        case 'image':
            // Handle image requests
            break;
        case 'xhr':
            // Handle API calls
            break;
        default:
            interceptedRequest.continue();
    }
});

En catégorisant et en priorisant les types de ressources, vous pouvez rationaliser vos efforts de surveillance réseau et vous concentrer sur ce qui compte le plus.

Consigner les données de requête

Une fois les requêtes filtrées, la consignation de leurs informations clés peut vous aider à identifier des tendances utiles. Voici un aperçu rapide de quelques propriétés importantes des requêtes :

Par exemple, si vous souhaitez surveiller les requêtes API relatives aux données tarifaires :

page.on('request', async (request) => {
    if (request.url().includes('/api/prices')) {
        const requestData = {
            url: request.url(),
            method: request.method(),
            postData: request.postData()
        };
        console.log('Price Request:', requestData);
    }
    await request.continue();
});

Cette méthode vous permet d’analyser le trafic en détail. Vérifiez toujours request.isInterceptResolutionHandled() afin d’éviter les conflits avec d’autres gestionnaires.

Modifier les requêtes sortantes

Avec Puppeteer, vous pouvez ajuster les requêtes sortantes afin qu’elles répondent mieux à vos besoins lors de vos interactions avec des serveurs web.

Modifier les en-têtes

Vous pouvez ajuster les en-têtes HTTP afin d’inclure des jetons, de modifier les agents utilisateurs ou d’ajouter des valeurs personnalisées.

await page.setExtraHTTPHeaders({
    'Authorization': 'Bearer YOUR_TOKEN',
    'Custom-Header': 'CustomValue'
});

Pour un contrôle plus précis des requêtes individuelles :

page.on('request', async (request) => {
    if (request.isInterceptResolutionHandled()) return;
    const headers = request.headers();
    headers['Authorization'] = 'Bearer YOUR_TOKEN';
    await request.continue({ headers });
});

« L’interception des requêtes facilite la modification des propriétés des requêtes sortantes, par exemple la définition d’en-têtes personnalisés, la modification des méthodes de requête ou l’ajustement du payload de la requête. » - Saairaamprasad [1]

Voyons maintenant comment réacheminer les requêtes en redirigeant les URL.

Redirections d’URL

Redirigez des requêtes spécifiques à l’aide de l’approche suivante :

await page.setRequestInterception(true);
page.on('request', async (request) => {
    if (request.url().includes('/api/original')) {
        await request.continue({
            url: request.url().replace('/api/original', '/api/new')
        });
    } else {
        await request.continue();
    }
});

Cette méthode vous aide à modifier les points de terminaison d’API ou à réacheminer les requêtes dynamiquement.

Modifier les données de requête

Vous pouvez également modifier les payloads des requêtes POST et PUT. Voici comment :

page.on('request', async (request) => {
    if (request.isInterceptResolutionHandled()) return;

    if (request.url().includes('/api/prices') && request.method() === 'POST') {
        let postData = request.postData();
        if (postData) {
            postData = postData.replace(/11001/g, '90210');
            await request.continue({ postData });
            return;
        }
    }
    await request.continue();
});

Voici une référence rapide pour modifier différentes propriétés de requête :

Remarque : la modification des requêtes peut affecter les performances ; il est donc préférable de les intercepter uniquement lorsque cela est nécessaire. Ces méthodes vous offrent un contrôle précis des requêtes sortantes dans vos workflows d’automatisation.

Gérer les réponses du serveur

Puppeteer vous permet de gérer et de modifier les réponses du serveur, ce qui en fait un outil puissant pour l’automatisation web. Cette section s’appuie sur les techniques précédentes de modification des requêtes et se concentre sur le contrôle des réponses du serveur afin de vous donner une maîtrise complète des interactions réseau.

Surveiller les réponses

Vous pouvez suivre les réponses provenant du serveur en configurant un écouteur d’événements de réponse :

page.on('response', async (response) => {
    const url = response.url();
    const status = response.status();
    console.log(`Response from ${url}: ${status}`);

    if (response.url().includes('/api/prices')) {
        const data = await response.json();
        // Process response data
    }
});

Cet extrait consigne des informations telles que l’URL, les codes d’état et les en-têtes, ce qui vous aide à analyser le comportement du serveur. Au-delà de la surveillance, vous pouvez modifier le contenu des réponses dynamiquement selon vos besoins.

Modifier le contenu des réponses

Pour personnaliser le traitement des réponses, utilisez l’interception. Voici un exemple :

page.on('request', async (request) => {
    if (request.url().includes('/api/prices')) {
        await request.respond({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({
                price: 99.99,
                currency: 'USD',
                zipCode: '90210'
            })
        });
        return;
    }
    await request.continue();
});

Cette technique est particulièrement utile pour tester des API en simulant des réponses ou en ajustant les données dans des cas spécifiques.

Tester les codes d’état HTTP

Une fois que vous maîtrisez la modification de contenu, vous pouvez simuler différents codes d’état HTTP pour tester la gestion des erreurs. Voici comment :

Par exemple :

page.on('request', async (request) => {
    if (request.url().includes('/api/test-endpoint')) {
        await request.respond({
            status: 404,
            contentType: 'text/plain',
            body: 'Not Found!'
        });
        return;
    }
    await request.continue();
});

« L’interception des requêtes dans Puppeteer vous permet d’observer, de modifier ou de bloquer les requêtes HTTP sortantes et les réponses entrantes. Cette fonctionnalité est pratique pour optimiser le chargement des pages, simuler différentes conditions réseau ou gérer le chargement de contenu dynamique. » – Saairaamprasad [1]

Conseil de pro : bien que l’interception des réponses puisse être puissante, utilisez-la avec parcimonie. Un usage excessif peut ralentir vos scripts d’automatisation ou introduire une complexité inutile.

sbb-itb-23997f1

Bonnes pratiques d’interception des requêtes

L’interception des requêtes est un outil puissant, mais elle nécessite une utilisation rigoureuse pour garantir des performances fluides et maintenir la fiabilité. Vous trouverez ci-dessous des mesures pratiques pour gérer les sessions, améliorer la vitesse et résoudre les problèmes courants.

Gérer les sessions utilisateur

Voici comment gérer efficacement les sessions utilisateur :

await page.setRequestInterception(true);
page.on('request', async (request) => {
    if (!request.isInterceptResolutionHandled()) {
        const headers = request.headers();
        headers['Authorization'] = 'Bearer ' + yourAuthToken;
        await request.continue({ headers });
    }
});

Vérifiez toujours le statut d’interception avant de modifier les en-têtes afin d’éviter les conflits avec d’autres intercepteurs.

Optimiser la vitesse

Bloquer les ressources inutiles peut réduire considérablement les temps de chargement des pages, parfois jusqu’à 500 millisecondes [3]. Voici un exemple :

await page.route('**/*', (route) => {
    const resourceType = route.request().resourceType();
    if (['image', 'stylesheet', 'font'].includes(resourceType)) {
        route.abort();
        return;
    }
    route.continue();
});

Lorsque des problèmes de performance surviennent, ces stratégies de gestion des ressources peuvent vous aider.

Conseils de dépannage

Une gestion inadéquate est une source fréquente de problèmes. Voici quelques corrections pratiques :

« Une fois l’interception des requêtes activée, chaque requête sera bloquée tant qu’elle n’est pas poursuivie, traitée par une réponse ou abandonnée. »

• Antoine Vastel, responsable de la recherche chez Castle [4]

1. Gestion de la résolution : utilisez les vérifications isInterceptResolutionHandled pour éviter les conditions de concurrence.
2. Gestionnaires multiples : attribuez des priorités lorsque vous utilisez plusieurs gestionnaires d’interception :

await request.continue({
    priority: 1,
    headers: modifiedHeaders
});

3. Requêtes bloquées : assurez-vous que toutes les requêtes sont correctement résolues :

page.on('request', async (request) => {
    try {
        if (!request.isInterceptResolutionHandled()) {
            await request.continue();
        }
    } catch (error) {
        console.error('Request handling error:', error);
        await request.abort();
    }
});

Gardez votre logique d’interception simple. Des règles trop complexes peuvent ralentir le processus et rendre votre code plus difficile à maintenir.

Points clés à retenir

L’interception des requêtes de Puppeteer fournit aux développeurs des outils puissants pour affiner les tâches d’automatisation web. Ces outils permettent de :

• Modifier les requêtes : ajuster les en-têtes, les méthodes et les payloads afin de contrôler efficacement le flux de données.
• Gérer les réponses : personnaliser les réponses du serveur pour différents besoins de test.
• Gérer les ressources : améliorer les performances en traitant les requêtes de manière sélective.

Applications pratiques

L’interception des requêtes s’est révélée utile dans de nombreux cas. Par exemple, dans un récent cas d’usage e-commerce, la modification des requêtes de prix de produits en fonction des codes postaux a démontré son utilité [2].

Voici quelques usages courants :

• Simuler des réponses API pour les tests
• Améliorer l’extraction de données en modifiant les en-têtes
• Accélérer les temps de chargement en bloquant les ressources inutiles
• Renforcer la sécurité avec des jetons d’authentification personnalisés

Ces exemples montrent comment l’interception des requêtes peut répondre à la fois aux défis de développement et aux enjeux opérationnels, ouvrant la voie à des techniques d’automatisation avancées.

Utiliser Puppeteer avec Latenode

Latenode simplifie la mise en œuvre de ces stratégies. Voici un exemple de workflow illustrant l’intégration de Puppeteer avec Latenode :

// Example workflow setup in Latenode
await page.setRequestInterception(true);
page.on('request', async (request) => {
    if (request.resourceType() === 'fetch') {
        const modifiedHeaders = {
            ...request.headers(),
            'Custom-Header': 'Modified-Value'
        };
        await request.continue({ headers: modifiedHeaders });
    }
});

Cet exemple montre comment modifier dynamiquement les en-têtes des requêtes afin de répondre à vos besoins spécifiques.