Gestion du User-Agent dans Puppeteer pour l’émulation d’appareils

Il est essentiel de contrôler la manière dont votre navigateur apparaît aux yeux des sites web pour l’automatisation et les tests web. Puppeteer rend cela possible en vous permettant de modifier la chaîne User-Agent — une identité numérique que les sites web utilisent pour détecter votre navigateur et votre appareil.

Voici ce que vous allez apprendre :

• Qu’est-ce qu’une chaîne User-Agent ? Elle informe les sites web sur votre navigateur, votre système d’exploitation et votre appareil.
• Pourquoi la personnaliser ? Pour éviter la détection, tester des sites web sur différents appareils ou garantir la réactivité mobile.
• Comment utiliser Puppeteer : Modifiez le User-Agent avec page.setUserAgent() et émulez des appareils à l’aide de profils intégrés comme l’iPhone ou de paramètres personnalisés.

Voici les principaux conseils :

• Définissez toujours le User-Agent avant de charger une page.
• Associez le User-Agent à des paramètres spécifiques à l’appareil (par exemple, la taille du viewport et la prise en charge tactile).
• Utilisez des outils tels que puppeteer-extra-stealth-plugin pour éviter la détection des bots.

Exemple rapide :

await page.setUserAgent(
  'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1'
);
await page.setViewport({ width: 375, height: 812, isMobile: true, hasTouch: true });

Cela garantit que votre navigateur imite un iPhone, ce qui vous aide à tester des sites web ou à extraire des données sans être signalé.

Tutoriel Puppeteer n°13 | setUserAgent et setViewPort | Tester ...

Configurer Puppeteer

Préparez Puppeteer en installant les dépendances nécessaires et en rédigeant votre premier script d’émulation.

Étapes d’installation

Assurez-vous d’utiliser Node.js v14 ou une version ultérieure. Choisissez ensuite l’une de ces méthodes d’installation :

# Option 1: Install Puppeteer with Chrome included
npm i puppeteer

# Option 2: Install Puppeteer without Chrome
npm i puppeteer-core

Si vous êtes sous Linux, vérifiez les dépendances manquantes avec :

ldd chrome | grep not

Une fois Puppeteer installé, vous pouvez rédiger votre premier script d’émulation d’appareil. Cette configuration est essentielle pour contrôler le User-Agent et simuler efficacement des appareils.

Premier script d’émulation d’appareil

Voici un exemple de script qui émule un iPhone X et charge une page web :

const puppeteer = require('puppeteer');

(async () => {
  // Launch browser in non-headless mode
  const browser = await puppeteer.launch({ 
    headless: false 
  });

  // Create a new page
  const page = await browser.newPage();

  // Set iPhone X User-Agent
  await page.setUserAgent(
    'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) ' +
    'AppleWebKit/604.1.38 (KHTML, like Gecko) ' +
    'Version/11.0 Mobile/15A372 Safari/604.1'
  );

  // Configure viewport for iPhone X
  await page.setViewport({
    width: 375,
    height: 812,
    deviceScaleFactor: 3,
    isMobile: true,
    hasTouch: true
  });

  // Navigate to a webpage
  await page.goto('https://pptr.dev');

  // Pause to view the result
  await page.waitForTimeout(3000);

  // Close the browser
  await browser.close();
})();

Ce script couvre les éléments essentiels de l’émulation d’appareil :

• Lancement du navigateur : démarre Puppeteer en mode non-headless pour une meilleure visibilité.
• Configuration de la page : crée une nouvelle page dans le navigateur.
• Paramètres User-Agent : imite un navigateur d’iPhone X.
• Configuration du viewport : correspond aux dimensions et capacités d’écran d’un iPhone X.
• Navigation : charge une page web spécifiée.

Conseils de configuration

• Puppeteer stocke son cache navigateur dans ~/.cache/puppeteer.
• Pour utiliser un répertoire de cache personnalisé, définissez la variable d’environnement PUPPETEER_CACHE_DIR.
• Si vous travaillez dans Docker ou WSL, assurez-vous que toutes les dépendances système requises sont installées.
• Pour des raisons de sécurité, évitez d’exécuter Chrome sans sandboxing, sauf en cas de nécessité absolue.

Définir les chaînes User-Agent

Cette section explique comment configurer et affiner efficacement les paramètres User-Agent.

Utiliser setUserAgent()

La méthode page.setUserAgent() est votre outil de référence pour personnaliser la manière dont le navigateur s’identifie. Voici un exemple d’utilisation :

const page = await browser.newPage();
await page.setUserAgent(
  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 ' +
  '(KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36'
);

Veillez à définir le User-Agent avant de naviguer vers une page afin de garantir la cohérence.

Choisir des chaînes User-Agent

Choisissez une chaîne User-Agent adaptée à votre cas d’usage :

Pour les tests :

// Desktop Chrome on Windows 10
await page.setUserAgent(
  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) ' +
  'AppleWebKit/537.36 (KHTML, like Gecko) ' +
  'Chrome/120.0.0.0 Safari/537.36'
);

Pour l’émulation mobile :

// iPhone 14 Safari
await page.setUserAgent(
  'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) ' +
  'AppleWebKit/605.1.15 (KHTML, like Gecko) ' +
  'Version/16.0 Mobile/15E148 Safari/604.1'
);

Conseils de configuration User-Agent

Voici quelques conseils pour assurer une gestion fluide du User-Agent :

• Faites correspondre les paramètres : associez votre User-Agent aux propriétés de navigateur correspondantes. Par exemple, utilisez des User-Agents mobiles avec des paramètres de viewport mobile.
• Évitez les problèmes de détection : le User-Agent par défaut de Puppeteer inclut « HeadlessChrome », ce qui peut déclencher des mécanismes de détection de bots.

// Default User-Agent (not recommended)

// Custom User-Agent (recommended)
await page.setUserAgent(
  'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) ' +
  'AppleWebKit/537.36 (KHTML, like Gecko) ' +
  'Chrome/120.0.0.0 Safari/537.36'
);

• Soyez cohérent : définissez le User-Agent pour chaque nouvelle page ou nouvel onglet afin d’éviter les incohérences.

Pour une meilleure fiabilité, vous pouvez également configurer des paramètres supplémentaires en même temps que votre User-Agent :

await page.setExtraHTTPHeaders({
  'Accept-Language': 'en-US,en;q=0.9',
  'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8'
});

Une gestion appropriée du User-Agent n’est qu’un élément de l’émulation d’appareil. Associez-la à des paramètres précis de viewport, de réseau et de navigateur afin de créer une expérience de navigation plus réaliste.

sbb-itb-23997f1

Émulation avancée d’appareils

Profils d’appareils intégrés

Puppeteer facilite l’émulation d’appareils grâce à ses profils d’appareils préconfigurés. Ces profils regroupent les paramètres essentiels, ce qui vous permet d’émuler rapidement des appareils spécifiques.

const puppeteer = require('puppeteer');
const iPhone15Pro = puppeteer.KnownDevices['iPhone 15 Pro'];

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.emulate(iPhone15Pro);
  // The page now behaves like an iPhone 15 Pro.
})();

Ces profils configurent automatiquement des paramètres importants, ce qui facilite l’émulation précise des appareils. Ils fonctionnent bien avec les configurations de User-Agent et permettent d’ajuster davantage les paramètres d’écran et de viewport.

Paramètres d’écran et de viewport

Pour émuler efficacement des appareils, vous devez configurer correctement le viewport. Le viewport par défaut de Puppeteer (800×600 pixels) ne correspond pas à la plupart des appareils réels ; vous devrez donc le personnaliser :

await page.setViewport({
  width: 1920,
  height: 1080,
  deviceScaleFactor: 2,
  isMobile: false,
  hasTouch: false,
  isLandscape: true
});

Vous pouvez également ajuster le viewport de manière dynamique pour capturer facilement des captures d’écran de pages entières :

await page.setViewport({
  width: 1440,
  height: 900,
  deviceScaleFactor: 1
});

const options = {
  fullPage: true,
  captureBeyondViewport: true
};
await page.screenshot(options);

Simulation du réseau et des interactions tactiles

Une fois le viewport configuré, vous pouvez aller plus loin en simulant les conditions réseau et les interactions tactiles :

// Simulate 3G network conditions
await page.emulateNetworkConditions({
  offline: false,
  downloadThroughput: (750 * 1024) / 8, // 750 kb/s
  uploadThroughput: (250 * 1024) / 8, // 250 kb/s
  latency: 100 // 100 ms
});

await page.setViewport({
  width: 375,
  height: 812,
  isMobile: true,
  hasTouch: true
});

await page.tap('#button-element');

Résoudre les problèmes courants

Solutions aux erreurs d’émulation

Lors de l’émulation, des chaînes user-agent et des fonctionnalités de navigateur incompatibles peuvent déclencher une détection. Pour l’éviter, assurez-vous que le user-agent est cohérent sur toutes les pages :

const puppeteer = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
puppeteer.use(StealthPlugin());

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 17_3_1 like Mac OS X)');

Pour chaque nouvelle page, assurez-vous de définir le user-agent :

const newPage = await browser.newPage();
await newPage.setUserAgent(currentUserAgent);

Affinez également votre configuration pour gérer des techniques de détection plus avancées.

Éviter la détection du navigateur

Les sites web utilisent souvent des méthodes sophistiquées pour identifier les outils d’automatisation. Pour y remédier, utilisez le puppeteer-extra-stealth-plugin :

const stealthPlugin = StealthPlugin();
stealthPlugin.enabledEvasions.add('user-agent-override');
puppeteer.use(stealthPlugin);

Pour réduire davantage la détection, appliquez ces tactiques pratiques :

• Gérez les cadences de requêtes : introduisez des délais aléatoires pour imiter le comportement humain.

async function naturalDelay() {
  const delay = Math.floor(Math.random() * (3000 - 1000) + 1000);
  await page.waitForTimeout(delay);
}

• Assurez la cohérence des en-têtes : alignez les en-têtes HTTP sur le user-agent.

await page.setExtraHTTPHeaders({
  'Accept-Language': 'en-US,en;q=0.9',
  'Accept': 'text/html,application/xhtml+xml',
  'User-Agent': currentUserAgent
});

Une fois les risques de détection traités, concentrez-vous sur l’amélioration des performances et de l’efficacité des ressources.

Vitesse et utilisation des ressources

Optimisez votre configuration afin d’améliorer la vitesse et de réduire la consommation de ressources. Commencez par optimiser les paramètres de lancement du navigateur :

const browser = await puppeteer.launch({
  args: [
    '--disable-gpu',
    '--disable-dev-shm-usage',
    '--disable-setuid-sandbox',
    '--no-first-run',
    '--no-sandbox',
    '--no-zygote'
  ],
  userDataDir: './cache'
});

Pour les tâches de capture d’écran, utilisez des paramètres efficaces :

const screenshot = await page.screenshot({
  type: 'jpeg',
  quality: 80,
  fullPage: true,
  encoding: 'binary'
});

Bloquez les ressources inutiles comme les images et les polices afin d’économiser la mémoire et la bande passante :

await page.setRequestInterception(true);
page.on('request', (request) => {
  if (request.resourceType() === 'image' || request.resourceType() === 'font') {
    request.abort();
  } else {
    request.continue();
  }
});

Ces ajustements améliorent les performances tout en maintenant une émulation fiable.

Conclusion

Récapitulatif des conseils clés

L’ajustement précis des chaînes User-Agent et la gestion efficace des en-têtes peuvent faire une grande différence pour éviter la détection. Voici un aperçu rapide des stratégies permettant une meilleure émulation d’appareils :

Par exemple, Farfetch a mis en œuvre ces méthodes en février 2023 et a constaté une baisse de 40 % du trafic des bots, ainsi qu’une amélioration de 15 % des temps de chargement [1]. Ces résultats montrent que de petits ajustements peuvent générer d’importants gains de performance.

Prochaines étapes avec Puppeteer

Une fois les bases maîtrisées, faites passer vos scripts Puppeteer au niveau supérieur en ajustant les paramètres de lancement pour adopter un comportement plus réaliste. Voici un exemple de configuration pour commencer :

// Advanced browser launch setup
const browser = await puppeteer.launch({
  args: [
    '--enable-webgl',
    '--use-gl=desktop',
    '--disable-automation'
  ],
  ignoreDefaultArgs: ['--enable-automation']
});

Cette configuration active des fonctionnalités telles que WebGL tout en désactivant les indicateurs d’automatisation, ce qui aide vos scripts à se fondre plus naturellement dans le trafic.