User-Agent-Verwaltung in Puppeteer für die Geräteemulation

Die Steuerung, wie Ihr Browser für Websites erscheint, ist für Webautomatisierung und Tests entscheidend. Puppeteer ermöglicht dies, indem Sie den User-Agent-String anpassen können – eine digitale Kennung, mit der Websites Ihren Browser und Ihr Gerät erkennen.

Das lernen Sie:

• Was ist ein User-Agent-String? Er informiert Websites über Ihren Browser, Ihr Betriebssystem und Ihr Gerät.
• Warum sollte er angepasst werden? Um Erkennung zu vermeiden, Websites auf verschiedenen Geräten zu testen oder die mobile Responsivität sicherzustellen.
• So nutzen Sie Puppeteer: Ändern Sie den User-Agent mit page.setUserAgent() und emulieren Sie Geräte mit integrierten Profilen wie iPhone oder eigenen Einstellungen.

Wichtige Tipps:

• Legen Sie den User-Agent immer vor dem Laden einer Seite fest.
• Stimmen Sie den User-Agent auf gerätespezifische Einstellungen ab, etwa Viewport-Größe und Touch-Unterstützung.
• Nutzen Sie Tools wie puppeteer-extra-stealth-plugin, um Bot-Erkennung zu vermeiden.

Kurzes Beispiel:

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 });

Damit simuliert Ihr Browser ein iPhone. So können Sie Websites testen oder Daten scrapen, ohne markiert zu werden.

Puppeteer Tutorial #13 | setUserAgent und setViewPort | Test ...

Puppeteer einrichten

Bereiten Sie Puppeteer vor, indem Sie die erforderlichen Abhängigkeiten installieren und Ihr erstes Emulationsskript schreiben.

Installationsschritte

Stellen Sie sicher, dass Sie Node.js v14 oder neuer verwenden. Wählen Sie anschließend eine dieser Installationsmethoden:

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

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

Wenn Sie Linux verwenden, prüfen Sie mit folgendem Befehl auf fehlende Abhängigkeiten:

ldd chrome | grep not

Sobald Puppeteer installiert ist, können Sie Ihr erstes Skript zur Geräteemulation schreiben. Dieses Setup ist entscheidend, um den User-Agent zu steuern und Geräte effektiv zu simulieren.

Erstes Skript zur Geräteemulation

Hier ist ein Beispielskript, das ein iPhone X emuliert und eine Webseite lädt:

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();
})();

Dieses Skript deckt die Grundlagen der Geräteemulation ab:

• Browserstart: Startet Puppeteer zur besseren Sichtbarkeit im nicht-headless Modus.
• Seiteneinrichtung: Erstellt eine neue Seite im Browser.
• User-Agent-Einstellungen: Simuliert einen iPhone-X-Browser.
• Viewport-Konfiguration: Entspricht den Bildschirmabmessungen und Funktionen eines iPhone X.
• Navigation: Lädt eine festgelegte Webseite.

Konfigurationstipps

• Puppeteer speichert seinen Browser-Cache unter ~/.cache/puppeteer.
• Um ein benutzerdefiniertes Cache-Verzeichnis zu verwenden, setzen Sie die Umgebungsvariable PUPPETEER_CACHE_DIR.
• Wenn Sie in Docker oder WSL arbeiten, stellen Sie sicher, dass alle erforderlichen Systemabhängigkeiten installiert sind.
• Aus Sicherheitsgründen sollten Sie Chrome nur dann ohne Sandbox ausführen, wenn dies unbedingt erforderlich ist.

User-Agent-Strings festlegen

In diesem Abschnitt erfahren Sie, wie Sie User-Agent-Einstellungen effektiv konfigurieren und feinabstimmen.

setUserAgent() verwenden

Die Methode page.setUserAgent() ist Ihre erste Wahl, wenn Sie anpassen möchten, wie sich der Browser identifiziert. So verwenden Sie sie:

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'
);

Legen Sie den User-Agent unbedingt vor der Navigation zu einer Seite fest, um Konsistenz sicherzustellen.

User-Agent-Strings auswählen

Wählen Sie einen User-Agent-String, der zu Ihrem Anwendungsfall passt:

Für 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'
);

Für die mobile Emulation:

// 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'
);

Tipps zur User-Agent-Konfiguration

Diese Tipps sorgen für eine reibungslose Verwaltung von User-Agents:

• Einstellungen abstimmen: Kombinieren Sie Ihren User-Agent mit den entsprechenden Browsereigenschaften. Verwenden Sie beispielsweise mobile User-Agents mit mobilen Viewport-Einstellungen.
• Erkennungsprobleme vermeiden: Der Standard-User-Agent von Puppeteer enthält „HeadlessChrome“, was Mechanismen zur Bot-Erkennung auslösen kann.

// 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'
);

• Konsistent bleiben: Legen Sie den User-Agent für jede neue Seite oder jeden neuen Tab fest, um Inkonsistenzen zu vermeiden.

Für eine höhere Zuverlässigkeit können Sie zusätzlich zum User-Agent weitere Einstellungen konfigurieren:

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'
});

Eine korrekte Verwaltung des User-Agents ist nur ein Teil der Geräteemulation. Kombinieren Sie sie mit präzisen Viewport-, Netzwerk- und Browsereinstellungen, um ein realistischeres Browsererlebnis zu schaffen.

sbb-itb-23997f1

Erweiterte Geräteemulation

Integrierte Geräteprofile

Puppeteer vereinfacht die Geräteemulation mit vorkonfigurierten Geräteprofilen. Diese Profile bündeln wichtige Einstellungen, sodass Sie bestimmte Geräte schnell emulieren können.

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.
})();

Diese Profile richten wichtige Parameter automatisch ein und erleichtern so die präzise Emulation von Geräten. Sie funktionieren gut in Kombination mit User-Agent-Konfigurationen und ermöglichen zusätzliche Anpassungen von Bildschirm- und Viewport-Einstellungen.

Bildschirm- und Viewport-Einstellungen

Um Geräte effektiv zu emulieren, müssen Sie den Viewport korrekt einrichten. Der Standard-Viewport von Puppeteer (800×600 Pixel) entspricht nicht den meisten realen Geräten. Daher sollten Sie ihn anpassen:

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

Sie können den Viewport auch dynamisch anpassen, um unkompliziert Screenshots ganzer Seiten aufzunehmen:

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

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

Netzwerk- und Touch-Simulation

Sobald der Viewport konfiguriert ist, können Sie noch einen Schritt weitergehen und Netzwerkbedingungen sowie Touch-Interaktionen simulieren:

// 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');

Häufige Probleme beheben

Lösungen für Emulationsfehler

Bei der Emulation können nicht übereinstimmende User-Agent-Strings und Browserfunktionen eine Erkennung auslösen. Um dies zu vermeiden, stellen Sie sicher, dass der User-Agent auf allen Seiten konsistent ist:

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)');

Stellen Sie bei jeder neuen Seite sicher, dass der User-Agent gesetzt ist:

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

Verfeinern Sie Ihr Setup außerdem, um fortschrittlichere Erkennungstechniken zu bewältigen.

Browsererkennung vermeiden

Websites nutzen häufig ausgefeilte Methoden, um Automatisierungstools zu erkennen. Nutzen Sie als Gegenmaßnahme puppeteer-extra-stealth-plugin:

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

Um die Erkennung weiter zu minimieren, wenden Sie diese praktischen Maßnahmen an:

• Anfrageraten steuern: Fügen Sie zufällige Verzögerungen ein, um menschliches Verhalten nachzuahmen.

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

• Konsistente Header sicherstellen: Stimmen Sie HTTP-Header auf den User-Agent ab.

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

Sobald die Risiken einer Erkennung adressiert sind, konzentrieren Sie sich auf die Verbesserung von Leistung und Ressourceneffizienz.

Geschwindigkeit und Ressourcennutzung

Optimieren Sie Ihr Setup, um die Geschwindigkeit zu erhöhen und den Ressourcenverbrauch zu senken. Beginnen Sie mit der Optimierung der Startparameter des Browsers:

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

Verwenden Sie für Screenshot-Aufgaben effiziente Einstellungen:

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

Blockieren Sie unnötige Ressourcen wie Bilder und Schriftarten, um Speicher und Bandbreite zu sparen:

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

Diese Anpassungen verbessern die Leistung und erhalten gleichzeitig eine zuverlässige Emulation.

Fazit

Überblick über die wichtigsten Tipps

Die Feinabstimmung von User-Agent-Strings und die effektive Verwaltung von Headern können einen großen Unterschied machen, wenn Sie Erkennung vermeiden möchten. Hier ist ein kurzer Überblick über Strategien für eine bessere Geräteemulation:

Beispielsweise setzte Farfetch diese Methoden im Februar 2023 ein und verzeichnete einen Rückgang des Bot-Traffics um 40 % sowie eine Verbesserung der Ladezeiten um 15 % [1]. Diese Ergebnisse zeigen, wie kleine Anpassungen zu erheblichen Leistungssteigerungen führen können.

Nächste Schritte mit Puppeteer

Sobald Sie die Grundlagen beherrschen, können Sie Ihre Puppeteer-Skripte mit angepassten Starteinstellungen für ein realistischeres Verhalten auf die nächste Stufe bringen. Hier ist eine Beispielkonfiguration für den Einstieg:

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

Dieses Setup aktiviert Funktionen wie WebGL und deaktiviert gleichzeitig Automatisierungs-Flags, damit sich Ihre Skripte natürlicher einfügen.