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

Inhaltsverzeichnis

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

Die Kontrolle darüber, wie Ihr Browser auf Websites angezeigt wird, ist für die Webautomatisierung und das Testen von entscheidender Bedeutung. Puppenspieler ermöglicht dies, indem es Ihnen erlaubt, die User-Agent-Zeichenfolge – eine digitale ID, die Websites verwenden, um Ihren Browser und Ihr Gerät zu erkennen.

Folgendes wirst du lernen:

Was ist eine User-Agent-Zeichenfolge? Es informiert Websites über Ihren Browser, Ihr Betriebssystem und Ihr Gerät.
Warum anpassen? Um eine Erkennung zu vermeiden, testen Sie Websites auf verschiedenen Geräten oder stellen Sie sicher, dass sie auf Mobilgeräten funktionieren.
So verwenden Sie Puppeteer: Ändern Sie den User-Agent mit page.setUserAgent() und emulieren Sie Geräte mit integrierten Profilen wie iPhone oder benutzerdefinierten Einstellungen.

Zu den wichtigsten Tipps gehören:

Setzen Sie immer den User-Agent bevor Laden einer Seite.
Passen Sie den User-Agent an gerätespezifische Einstellungen an (z. B. Ansichtsfenstergröße, Touch-Unterstützung).
Verwenden Sie Tools wie das puppeteer-extra-stealth-plugin um eine 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 });

Dadurch wird sichergestellt, dass Ihr Browser ein iPhone nachahmt, sodass Sie Websites testen oder Daten scrapen können, ohne dass dies bemerkt wird.

Puppenspieler Tutorial Nr. 13 | setUserAgent und setViewPort | Testen ...

Puppenspieler

Puppenspieler einrichten

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

Installationsschritte

Stellen Sie sicher, dass Sie es verwenden Node.js v14 oder neuer. Wählen Sie dann eine der folgenden 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, suchen Sie mit:

ldd chrome | grep not

Sobald Puppeteer installiert ist, können Sie Ihr erstes Geräteemulationsskript schreiben. Dieses Setup ist entscheidend für die Steuerung des User-Agents und die effektive Gerätesimulation.

Erstes Geräteemulationsskript

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 wesentlichen Aspekte der Geräteemulation ab:

Browserstart: Startet Puppeteer zur besseren Sichtbarkeit im Nicht-Headless-Modus.
Seiteneinrichtung: Erstellt eine neue Seite im Browser.
User-Agent-Einstellungen: Imitiert einen iPhone X-Browser.
Ansichtsfensterkonfiguration: Entspricht den Bildschirmabmessungen und Funktionen eines iPhone X.
Menü: Lädt eine angegebene Webseite.

Konfigurationstipps

Puppeteer speichert seinen Browser-Cache unter ~/.cache/puppeteer.
Um ein benutzerdefiniertes Cache-Verzeichnis zu verwenden, legen Sie die PUPPETEER_CACHE_DIR variable Umgebung
Wenn Sie in Docker oder WSL arbeiten, stellen Sie sicher, dass alle erforderlichen Systemabhängigkeiten installiert sind.
Aus Sicherheitsgründen vermeiden Sie das Ausführen Chrome ohne Sandboxing, es sei denn, es ist unbedingt erforderlich.

Festlegen von User-Agent-Strings

In diesem Abschnitt wird erläutert, wie Sie die User-Agent-Einstellungen effektiv konfigurieren und optimieren.

Verwenden von setUserAgent()

Der page.setUserAgent() Mit dieser Methode können Sie die Identifizierung des Browsers anpassen. Hier ist ein Anwendungsbeispiel:

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

Stellen Sie sicher, dass der User-Agent bevor Navigieren Sie zu einer Seite, um die Konsistenz sicherzustellen.

Auswählen von User-Agent-Strings

Wählen Sie eine User-Agent-Zeichenfolge, die zu Ihrem Anwendungsfall passt:

Zum Prüfen:

// 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

Hier sind einige Tipps, um eine reibungslose User-Agent-Verwaltung zu gewährleisten:

Spieleinstellungen: Koppeln Sie Ihren User-Agent mit den entsprechenden Browsereigenschaften. Verwenden Sie beispielsweise mobile User-Agents mit mobilen Ansichtsfenstereinstellungen.
Vermeiden Sie Erkennungsprobleme: Der Standard-User-Agent von Puppeteer enthält „HeadlessChrome“, das Bot-Erkennungsmechanismen 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'
);

Seien Sie konsequent: Legen Sie den User-Agent für jede neue Seite oder Registerkarte fest, um Inkonsistenzen zu vermeiden.

Für eine bessere Zuverlässigkeit können Sie neben Ihrem User-Agent auch zusätzliche 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'
});

Die ordnungsgemäße Verwaltung von User-Agents ist nur ein Teil der Geräteemulation. Kombinieren Sie sie mit präzisen Ansichtsfenster-, Netzwerk- und Browsereinstellungen, um ein realistischeres Surferlebnis 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 in einem Profil, sodass Sie schnell bestimmte Geräte 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 automatisch wichtige Parameter ein und vereinfachen so die präzise Emulation von Geräten. Sie funktionieren gut mit User-Agent-Konfigurationen und ermöglichen zusätzliche Anpassungen der Bildschirm- und Ansichtsfenstereinstellungen.

Bildschirm- und Ansichtsfenstereinstellungen

Um Geräte effektiv zu emulieren, müssen Sie den Ansichtsbereich richtig einrichten. Der Standardansichtsbereich von Puppeteer (800 × 600 Pixel) entspricht nicht den meisten realen Geräten. Sie sollten ihn daher anpassen:

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

Sie können den Ansichtsbereich auch dynamisch anpassen, um problemlos Screenshots der ganzen Seite 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 Ansichtsbereich konfiguriert ist, können Sie noch einen Schritt weiter gehen, indem Sie Netzwerkbedingungen und 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-Zeichenfolgen 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 für jede neue Seite sicher, dass der Benutzeragent festgelegt ist:

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

Verfeinern Sie außerdem Ihr Setup, um fortgeschrittenere Erkennungstechniken zu unterstützen.

Browsererkennung vermeiden

Websites verwenden oft ausgefeilte Methoden, um Automatisierungstools zu identifizieren. Um dem entgegenzuwirken, verwenden Sie die 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 Taktiken an:

Anfrageraten verwalten: Führen 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);
}

Sicherstellen der Header-Konsistenz: Richten Sie HTTP-Header am Benutzeragenten aus.

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

Sobald die Erkennungsrisiken behoben sind, konzentrieren Sie sich auf die Verbesserung der Leistung und Ressourceneffizienz.

Geschwindigkeit und Ressourcennutzung

Optimieren Sie Ihr Setup, um die Geschwindigkeit zu erhöhen und den Ressourcenverbrauch zu reduzieren. Beginnen Sie mit der Optimierung der Browser-Startparameter:

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 gewährleisten gleichzeitig eine zuverlässige Emulation.

Fazit

Überprüfung der wichtigsten Tipps

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

Aspekt	Beste Übung	Impact der HXNUMXO Observatorien
User-Agent-Setup	Weisen Sie jedem neuen Tab oder jeder neuen Seite einen User-Agent zu	40 % weniger Bot-Verkehr ^[1]
Anforderungsmuster	Browser-Fingerabdruckmuster nachahmen	Reduziert die Wahrscheinlichkeit einer Entdeckung
Kopfzeilenausrichtung	HTTP-Header dem zugewiesenen User-Agent zuordnen	Gewährleistet konsistente Emulation

Zum Beispiel, Farfetch implementierte diese Methoden im Februar 2023 und verzeichnete einen Rückgang des Bot-Verkehrs um 40 % sowie eine Verbesserung der Ladezeiten um 15 % ^[1]Diese Ergebnisse zeigen, wie kleine Anpassungen zu großen Leistungssteigerungen führen können.

Nächste Schritte mit Puppeteer

Sobald Sie die Grundlagen beherrschen, können Sie Ihre Puppeteer-Skripte optimieren, indem Sie die Starteinstellungen für ein realistischeres Verhalten optimieren. 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 ermöglicht Funktionen wie WebGL Deaktivieren Sie Automatisierungsflags, damit sich Ihre Skripte natürlicher einfügen.