Interception et modification des requêtes réseau dans Puppeteer : guide pratique

Interception et modification des requêtes réseau dans Marionnettiste est un outil puissant pour gérer les tâches d'automatisation web. Il vous permet 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é du réseau:Consignez les détails tels que les URL, les méthodes, les en-têtes et les charges utiles.
• Modifier les demandes: Modifiez les en-têtes, redirigez les URL ou ajustez les charges utiles pour les tests et le débogage des API.
• Ressources de bloc: Empêchez le chargement d'images, de polices ou de scripts pour améliorer les performances.
• Simuler les réponses: Simulation des réponses du serveur pour tester ou modifier le contenu de manière dynamique.
• Scénarios d'erreur de test: Simulez 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 l'interception des requêtes, y compris des exemples pratiques pour surveiller, modifier et tester les interactions réseau.

Marionnettiste Tutoriel n° 12 | Intercepteurs HTTP | Requêtes d'interception

Surveillance des requêtes réseau

Puppeteer permet de surveiller les requêtes réseau, vous offrant ainsi une vision claire du trafic web lors des tâches d'automatisation. Voici comment suivre et analyser efficacement l'activité réseau.

Configuration des écouteurs de requêtes

Commencez par activer l'interception des requêtes et attacher 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();
});

À l'intérieur de l' 'request' Grâce à l'écouteur d'événements, vous pouvez accéder aux requêtes interceptées et même les modifier. Assurez-vous simplement d'appeler request.continue() donc la demande d'origine n'est pas bloquée.

Filtrage des demandes par type

Puppeteer vous permet de filtrer les requêtes réseau selon leur type, ce qui vous permet de vous concentrer plus facilement sur un trafic spécifique. Voici comment gérer 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 hiérarchisant les types de ressources, vous pouvez rationaliser vos efforts de surveillance du réseau et vous concentrer sur ce qui compte le plus.

Enregistrement des données de demande

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

Demande de propriété	Description	Méthode d'accès
URL	URL de la demande complète	request.url()
Méthode	Méthode HTTP (par exemple, GET, POST)	request.method()
En-têtes	En-têtes de demande	request.headers()
Publier des données	Charge utile envoyée avec la requête	request.postData()

Par exemple, si vous souhaitez surveiller les requêtes API pour les données de tarification :

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 permet d'analyser le trafic en détail. Vérifiez toujours request.isInterceptResolutionHandled() pour éviter les conflits avec d'autres gestionnaires.

Modification des demandes sortantes

Avec Puppeteer, vous pouvez modifier les requêtes sortantes pour mieux répondre à vos besoins lors de vos interactions avec les serveurs Web.

Modifications d'en-tête

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

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

Pour un contrôle plus précis des demandes 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, comme la définition d'en-têtes personnalisés, la modification des méthodes de requête ou l'ajustement de la charge utile de la requête. - Saairaamprasad

Ensuite, examinons la redirection des requêtes en redirigeant les URL.

Redirections d'URL

Redirigez des demandes spécifiques en utilisant 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 de l’API ou à rediriger les demandes de manière dynamique.

Demander des modifications de données

Vous pouvez également modifier les charges utiles 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 :

Demande de propriété	Comment modifier	Cas d’utilisation courants
En-têtes	continue({ headers })	Ajout de jetons d'authentification, d'identifiants personnalisés
URL	continue({ url })	Redirection des points de terminaison, réacheminement des demandes
Publier des données	continue({ postData })	Mise à jour des données du formulaire, modification des charges utiles de l'API

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.

Gestion des 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 pour vous offrir un contrôle total des interactions réseau.

Surveillance des réponses

Vous pouvez suivre les réponses entrantes 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 enregistre des détails tels que l'URL, les codes d'état et les en-têtes, vous permettant d'analyser le comportement du serveur. Au-delà de la surveillance, vous pouvez modifier dynamiquement le contenu des réponses selon vos besoins.

Modification du contenu de la réponse

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 les API en simulant les réponses ou en modifiant les données dans des scénarios spécifiques.

Test des 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 :

Code d'état	Case Study	Exemple de mise en œuvre
200	Réponse de réussite	status: 200, body: JSON.stringify(successData)
404	Ressource manquante	status: 404, body: 'Not Found'
500	Erreur du serveur	status: 500, body: 'Internal Server Error'

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 diverses conditions réseau ou gérer le chargement dynamique de contenu. – Saairaamprasad

Pro TipBien que l'interception des réponses puisse être efficace, utilisez-la avec parcimonie. Une utilisation excessive de l'interception peut ralentir vos scripts d'automatisation ou introduire une complexité inutile.

sbb-itb-23997f1

Directives relatives aux demandes d'interception

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

Gestion des sessions utilisateur

Voici comment vous pouvez 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 l’état d’interception avant de modifier les en-têtes pour éviter les conflits avec d’autres intercepteurs.

Optimisation de vitesse

Le blocage des ressources inutiles peut réduire considérablement les temps de chargement des pages, parfois jusqu'à 500 millisecondes. . Voici un exemple:

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

Type de ressource	Action	Impact positif
Images	Bloquer	Accélère le chargement des pages
Feuilles de style	Chargement sélectif	Économise de la bande passante
Statistiques	Bloquer	Réduit la surcharge du réseau
Appels API	Autoriser	Conserve les fonctionnalités essentielles

Lorsque des problèmes de performances surviennent, ces stratégies de gestion des ressources peuvent être utiles.

Des conseils de dépannage

Une mauvaise manipulation est une source fréquente de problèmes. Voici quelques solutions pratiques :

« Une fois l'interception des demandes activée, chaque demande sera bloquée à moins qu'elle ne soit poursuivie, répondue ou abandonnée. »

• Antoine Vastel, Directeur de la Recherche à Château

1. Gestion des résolutions: Utilisation isInterceptResolutionHandled vérifications pour éviter les conditions de course.
2. Gestionnaires multiples: Attribuer des priorités lors de l'utilisation de plusieurs gestionnaires d'interception :

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

3. Demandes bloquées:Assurez-vous que toutes les demandes sont résolues correctement :

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

Gardez une logique d'interception simple. Des règles trop complexes peuvent ralentir le processus et compliquer la maintenance de votre code.

Faits marquants

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

• Demande de modification: Ajustez les en-têtes, les méthodes et les charges utiles pour contrôler efficacement le flux de données.
• Gestion des réponses: Personnalisez les réponses du serveur pour différents besoins de test.
• Gestion des ressources: Améliorez les performances en gérant les demandes de manière sélective.

Applications pratiques

L'interception des requêtes s'est avérée utile dans de nombreux cas. Par exemple, dans un récent cas de commerce électronique, la modification des demandes de prix de produits en fonction des codes postaux a démontré son utilité. .

Certaines utilisations courantes incluent :

• Simulation des réponses de l'API pour les tests
• Améliorer le scraping de données en modifiant les en-têtes
• Augmenter la vitesse 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 aux défis de développement et d’exploitation, ouvrant la voie à des techniques d’automatisation avancées.

Utiliser Puppeteer avec Laténode

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 vous pouvez modifier les en-têtes de requête de manière dynamique pour répondre à vos besoins spécifiques.

articles similaires

• Installation et configuration de Puppeteer : résolution des problèmes courants de dépendance et de Chromium
• Analyse et traitement des réponses du réseau dans Puppeteer : surveillance et modification
• Gestion des agents utilisateurs dans Puppeteer pour l'émulation de périphériques
• Gestion du cache dans Puppeteer : désactivation, effacement et optimisation des performances