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

Apprenez à intercepter et à modifier les requêtes réseau dans Puppeteer pour une automatisation web efficace, des tests et une optimisation des performances.

Raian12 février 2026

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âchesautomatisation 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 chargementimages, 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énarioserreur de test: Simulez des codes d’état HTTP tels que 404 ou 500 pour tester la gestion des erreurs.

Exemple rapide

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/test'</span>)) {
        <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">respond</span>({
            <span class="hljs-attr">status</span>: <span class="hljs-number">200</span>,
            <span class="hljs-attr">contentType</span>: <span class="hljs-string">'application/json'</span>,
            <span class="hljs-attr">body</span>: <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>({ <span class="hljs-attr">success</span>: <span class="hljs-literal">true</span> })
        });
    } <span class="hljs-keyword">else</span> {
        <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
    }
});

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êtesinterception

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âchesautomatisation. 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 :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">isInterceptResolutionHandled</span>()) <span class="hljs-keyword">return</span>;
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`Intercepted: <span class="hljs-subst">${request.url()}</span>`</span>);
    <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
});

À l'intérieur de l' 'request' Grâce à l'écouteurévénements, vous pouvez accéder aux requêtes interceptées et même les modifier. Assurez-vous simplementappeler request.continue() donc la demandeorigine 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.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-function"><span class="hljs-params">interceptedRequest</span> =></span> {
    <span class="hljs-keyword">if</span> (interceptedRequest.<span class="hljs-title function_">isInterceptResolutionHandled</span>()) <span class="hljs-keyword">return</span>;
    <span class="hljs-keyword">const</span> resourceType = interceptedRequest.<span class="hljs-title function_">resourceType</span>();
    <span class="hljs-keyword">switch</span>(resourceType) {
        <span class="hljs-keyword">case</span> <span class="hljs-string">'image'</span>:
            <span class="hljs-comment">// Handle image requests</span>
            <span class="hljs-keyword">break</span>;
        <span class="hljs-keyword">case</span> <span class="hljs-string">'xhr'</span>:
            <span class="hljs-comment">// Handle API calls</span>
            <span class="hljs-keyword">break</span>;
        <span class="hljs-attr">default</span>:
            interceptedRequest.<span class="hljs-title function_">continue</span>();
    }
});

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éthodeaccès
URL	URL de la demande complète	requête.url()
Méthode	Méthode HTTP (par exemple, GET, POST)	requête.méthode()
En-têtes	En-têtes de demande	requête.headers()
Publier des données	Charge utile envoyée avec la requête	requête.postData()

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

page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/prices'</span>)) {
        <span class="hljs-keyword">const</span> requestData = {
            <span class="hljs-attr">url</span>: request.<span class="hljs-title function_">url</span>(),
            <span class="hljs-attr">method</span>: request.<span class="hljs-title function_">method</span>(),
            <span class="hljs-attr">postData</span>: request.<span class="hljs-title function_">postData</span>()
        };
        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Price Request:'</span>, requestData);
    }
    <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
});

Cette méthode permetanalyser le trafic en détail. Vérifiez toujours request.isInterceptResolutionHandled() pour éviter les conflits avecautres 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.

Modificationsen-tête

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

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setExtraHTTPHeaders</span>({
    <span class="hljs-string">'Authorization'</span>: <span class="hljs-string">'Bearer YOUR_TOKEN'</span>,
    <span class="hljs-string">'Custom-Header'</span>: <span class="hljs-string">'CustomValue'</span>
});

Pour un contrôle plus précis des demandes individuelles :

page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">isInterceptResolutionHandled</span>()) <span class="hljs-keyword">return</span>;
    <span class="hljs-keyword">const</span> headers = request.<span class="hljs-title function_">headers</span>();
    headers[<span class="hljs-string">'Authorization'</span>] = <span class="hljs-string">'Bearer YOUR_TOKEN'</span>;
    <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>({ headers });
});

L'interception des requêtes facilite la modification des propriétés des requêtes sortantes, comme la définitionen-têtes personnalisés, la modification des méthodes de requête ou l'ajustement de la charge utile de la requête. - Saairaamprasad [1]

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

RedirectionsURL

Redirigez des demandes spécifiques en utilisant l'approche suivante :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/original'</span>)) {
        <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>({
            <span class="hljs-attr">url</span>: request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">replace</span>(<span class="hljs-string">'/api/original'</span>, <span class="hljs-string">'/api/new'</span>)
        });
    } <span class="hljs-keyword">else</span> {
        <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
    }
});

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.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">isInterceptResolutionHandled</span>()) <span class="hljs-keyword">return</span>;

    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/prices'</span>) && request.<span class="hljs-title function_">method</span>() === <span class="hljs-string">'POST'</span>) {
        <span class="hljs-keyword">let</span> postData = request.<span class="hljs-title function_">postData</span>();
        <span class="hljs-keyword">if</span> (postData) {
            postData = postData.<span class="hljs-title function_">replace</span>(<span class="hljs-regexp">/11001/g</span>, <span class="hljs-string">'90210'</span>);
            <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>({ postData });
            <span class="hljs-keyword">return</span>;
        }
    }
    <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
});

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({ en-têtes })	Ajout de jetonsauthentification,identifiants personnalisés
URL	continuer({ url })	Redirection des points de terminaison, réacheminement des demandes
Publier des données	continuer({ postData })	Mise à jour des données du formulaire, modification des charges utiles de l'API

Note: 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 workflowsautomatisation.

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événements de réponse :

page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'response'</span>, <span class="hljs-title function_">async</span> (response) => {
    <span class="hljs-keyword">const</span> url = response.<span class="hljs-title function_">url</span>();
    <span class="hljs-keyword">const</span> status = response.<span class="hljs-title function_">status</span>();
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`Response from <span class="hljs-subst">${url}</span>: <span class="hljs-subst">${status}</span>`</span>);

    <span class="hljs-keyword">if</span> (response.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/prices'</span>)) {
        <span class="hljs-keyword">const</span> data = <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">json</span>();
        <span class="hljs-comment">// Process response data</span>
    }
});

Cet extrait enregistre des détails tels que l'URL, les codesétat et les en-têtes, vous permettantanalyser 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.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/prices'</span>)) {
        <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">respond</span>({
            <span class="hljs-attr">status</span>: <span class="hljs-number">200</span>,
            <span class="hljs-attr">contentType</span>: <span class="hljs-string">'application/json'</span>,
            <span class="hljs-attr">body</span>: <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>({
                <span class="hljs-attr">price</span>: <span class="hljs-number">99.99</span>,
                <span class="hljs-attr">currency</span>: <span class="hljs-string">'USD'</span>,
                <span class="hljs-attr">zipCode</span>: <span class="hljs-string">'90210'</span>
            })
        });
        <span class="hljs-keyword">return</span>;
    }
    <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
});

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état HTTP

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

Codeétat	Case Study	Exemple de mise en œuvre
200	Réponse de réussite	statut : 200, corps : JSON.stringify(successData)
404	Ressource manquante	statut : 404, corps : « Introuvable »
500	Erreur du serveur	statut : 500, corps : « Erreur interne du serveur »

Par exemple :

page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/test-endpoint'</span>)) {
        <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">respond</span>({
            <span class="hljs-attr">status</span>: <span class="hljs-number">404</span>,
            <span class="hljs-attr">contentType</span>: <span class="hljs-string">'text/plain'</span>,
            <span class="hljs-attr">body</span>: <span class="hljs-string">'Not Found!'</span>
        });
        <span class="hljs-keyword">return</span>;
    }
    <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
});

L'interception des requêtes dans Puppeteer vous permetobserver, 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 [1]

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

sbb-itb-23997f1

Directives relatives aux demandesinterception

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 :

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (!request.<span class="hljs-title function_">isInterceptResolutionHandled</span>()) {
        <span class="hljs-keyword">const</span> headers = request.<span class="hljs-title function_">headers</span>();
        headers[<span class="hljs-string">'Authorization'</span>] = <span class="hljs-string">'Bearer '</span> + yourAuthToken;
        <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>({ 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. [3]. Voici un exemple:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">route</span>(<span class="hljs-string">'**/*'</span>, <span class="hljs-function">(<span class="hljs-params">route</span>) =></span> {
    <span class="hljs-keyword">const</span> resourceType = route.<span class="hljs-title function_">request</span>().<span class="hljs-title function_">resourceType</span>();
    <span class="hljs-keyword">if</span> ([<span class="hljs-string">'image'</span>, <span class="hljs-string">'stylesheet'</span>, <span class="hljs-string">'font'</span>].<span class="hljs-title function_">includes</span>(resourceType)) {
        route.<span class="hljs-title function_">abort</span>();
        <span class="hljs-keyword">return</span>;
    }
    route.<span class="hljs-title function_">continue</span>();
});

Type de ressource	Action	Impact
Images	Bloquer	Accélère le chargement des pages
Feuilles de style	Chargement sélectif	Économise de la bande passante
Analyses	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 [4]

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

<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>({
    <span class="hljs-attr">priority</span>: <span class="hljs-number">1</span>,
    <span class="hljs-attr">headers</span>: modifiedHeaders
});

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

page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">try</span> {
        <span class="hljs-keyword">if</span> (!request.<span class="hljs-title function_">isInterceptResolutionHandled</span>()) {
            <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>();
        }
    } <span class="hljs-keyword">catch</span> (error) {
        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Request handling error:'</span>, error);
        <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">abort</span>();
    }
});

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

À retenir

L'interception des requêtes de Puppeteer offre aux développeurs des outils puissants pour affiner les tâchesautomatisation 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é. [2].

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 jetonsauthentification 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 :

<span class="hljs-comment">// Example workflow setup in Latenode</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-title function_">async</span> (request) => {
    <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">resourceType</span>() === <span class="hljs-string">'fetch'</span>) {
        <span class="hljs-keyword">const</span> modifiedHeaders = {
            ...request.<span class="hljs-title function_">headers</span>(),
            <span class="hljs-string">'Custom-Header'</span>: <span class="hljs-string">'Modified-Value'</span>
        };
        <span class="hljs-keyword">await</span> request.<span class="hljs-title function_">continue</span>({ <span class="hljs-attr">headers</span>: 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.