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.
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
<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ê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 :
<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 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.<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éthode d'accè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 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.
<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é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 [1]
Ensuite, examinons la redirection des requêtes en redirigeant les URL.
Redirections d'URL
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 jetons d'authentification, d'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 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.<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 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.<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 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 | 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 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 [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 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 :
<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. »
- Gestion des résolutions: Utilisation
isInterceptResolutionHandledvérifications pour éviter les conditions de course. - Gestionnaires multiples: Attribuer des priorités lors de l'utilisation de plusieurs gestionnaires d'interception :
<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 logique d'interception 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â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é. [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 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 :
<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.
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
