.png)
.svg){kind=icon}
23 mars 2025
•
7
min lire
Interception et modification des requêtes réseau dans Puppeteer : guide pratique
Georges Miloradovitch
Chercheur, rédacteur et intervieweur de cas d'utilisation
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 :
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.
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.
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.
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.
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.
Avec Puppeteer, vous pouvez modifier les requêtes sortantes pour mieux répondre à vos besoins lors de vos interactions avec les serveurs Web.
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.
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.
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 |
Attention : 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.
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.
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.
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.
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.
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.
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.
Bloquer les ressources inutiles peut réduire considérablement le 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.
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
isInterceptResolutionHandled vérifications pour éviter les conditions de course.await request.continue({
priority: 1,
headers: modifiedHeaders
});
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.
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 :
L'interception des demandes s'est avérée utile dans de nombreux scénarios. 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 :
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.
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.
