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:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
  <span class="hljs-string">'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'</span>
);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({ <span class="hljs-attr">width</span>: <span class="hljs-number">375</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">812</span>, <span class="hljs-attr">isMobile</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">hasTouch</span>: <span class="hljs-literal">true</span> });

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

<span class="hljs-comment"># Option 1: Install Puppeteer with Chrome included</span>
npm i puppeteer

<span class="hljs-comment"># Option 2: Install Puppeteer without Chrome</span>
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:

<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer'</span>);

(<span class="hljs-title function_">async</span> () => {
  <span class="hljs-comment">// Launch browser in non-headless mode</span>
  <span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({ 
    <span class="hljs-attr">headless</span>: <span class="hljs-literal">false</span> 
  });

  <span class="hljs-comment">// Create a new page</span>
  <span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();

  <span class="hljs-comment">// Set iPhone X User-Agent</span>
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
    <span class="hljs-string">'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) '</span> +
    <span class="hljs-string">'AppleWebKit/604.1.38 (KHTML, like Gecko) '</span> +
    <span class="hljs-string">'Version/11.0 Mobile/15A372 Safari/604.1'</span>
  );

  <span class="hljs-comment">// Configure viewport for iPhone X</span>
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
    <span class="hljs-attr">width</span>: <span class="hljs-number">375</span>,
    <span class="hljs-attr">height</span>: <span class="hljs-number">812</span>,
    <span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">3</span>,
    <span class="hljs-attr">isMobile</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-attr">hasTouch</span>: <span class="hljs-literal">true</span>
  });

  <span class="hljs-comment">// Navigate to a webpage</span>
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://pptr.dev'</span>);

  <span class="hljs-comment">// Pause to view the result</span>
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForTimeout</span>(<span class="hljs-number">3000</span>);

  <span class="hljs-comment">// Close the browser</span>
  <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">close</span>();
})();

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

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

<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
  <span class="hljs-string">'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 '</span> +
  <span class="hljs-string">'(KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36'</span>
);

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:

<span class="hljs-comment">// Desktop Chrome on Windows 10</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
  <span class="hljs-string">'Mozilla/5.0 (Windows NT 10.0; Win64; x64) '</span> +
  <span class="hljs-string">'AppleWebKit/537.36 (KHTML, like Gecko) '</span> +
  <span class="hljs-string">'Chrome/120.0.0.0 Safari/537.36'</span>
);

Für die mobile Emulation:

<span class="hljs-comment">// iPhone 14 Safari</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
  <span class="hljs-string">'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) '</span> +
  <span class="hljs-string">'AppleWebKit/605.1.15 (KHTML, like Gecko) '</span> +
  <span class="hljs-string">'Version/16.0 Mobile/15E148 Safari/604.1'</span>
);

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.

<span class="hljs-comment">// Default User-Agent (not recommended)</span>

<span class="hljs-comment">// Custom User-Agent (recommended)</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
  <span class="hljs-string">'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) '</span> +
  <span class="hljs-string">'AppleWebKit/537.36 (KHTML, like Gecko) '</span> +
  <span class="hljs-string">'Chrome/120.0.0.0 Safari/537.36'</span>
);

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:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setExtraHTTPHeaders</span>({
  <span class="hljs-string">'Accept-Language'</span>: <span class="hljs-string">'en-US,en;q=0.9'</span>,
  <span class="hljs-string">'Accept'</span>: <span class="hljs-string">'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8'</span>
});

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.

<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer'</span>);
<span class="hljs-keyword">const</span> iPhone15Pro = puppeteer.<span class="hljs-property">KnownDevices</span>[<span class="hljs-string">'iPhone 15 Pro'</span>];

(<span class="hljs-title function_">async</span> () => {
  <span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>();
  <span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">emulate</span>(iPhone15Pro);
  <span class="hljs-comment">// The page now behaves like an iPhone 15 Pro.</span>
})();

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:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
  <span class="hljs-attr">width</span>: <span class="hljs-number">1920</span>,
  <span class="hljs-attr">height</span>: <span class="hljs-number">1080</span>,
  <span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">2</span>,
  <span class="hljs-attr">isMobile</span>: <span class="hljs-literal">false</span>,
  <span class="hljs-attr">hasTouch</span>: <span class="hljs-literal">false</span>,
  <span class="hljs-attr">isLandscape</span>: <span class="hljs-literal">true</span>
});

Sie können den Ansichtsbereich auch dynamisch anpassen, um problemlos Screenshots der ganzen Seite aufzunehmen:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
  <span class="hljs-attr">width</span>: <span class="hljs-number">1440</span>,
  <span class="hljs-attr">height</span>: <span class="hljs-number">900</span>,
  <span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">1</span>
});

<span class="hljs-keyword">const</span> options = {
  <span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">captureBeyondViewport</span>: <span class="hljs-literal">true</span>
};
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>(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:

<span class="hljs-comment">// Simulate 3G network conditions</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">emulateNetworkConditions</span>({
  <span class="hljs-attr">offline</span>: <span class="hljs-literal">false</span>,
  <span class="hljs-attr">downloadThroughput</span>: (<span class="hljs-number">750</span> * <span class="hljs-number">1024</span>) / <span class="hljs-number">8</span>, <span class="hljs-comment">// 750 kb/s</span>
  <span class="hljs-attr">uploadThroughput</span>: (<span class="hljs-number">250</span> * <span class="hljs-number">1024</span>) / <span class="hljs-number">8</span>, <span class="hljs-comment">// 250 kb/s</span>
  <span class="hljs-attr">latency</span>: <span class="hljs-number">100</span> <span class="hljs-comment">// 100 ms</span>
});

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
  <span class="hljs-attr">width</span>: <span class="hljs-number">375</span>,
  <span class="hljs-attr">height</span>: <span class="hljs-number">812</span>,
  <span class="hljs-attr">isMobile</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">hasTouch</span>: <span class="hljs-literal">true</span>
});

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">tap</span>(<span class="hljs-string">'#button-element'</span>);

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:

<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer-extra'</span>);
<span class="hljs-keyword">const</span> <span class="hljs-title class_">StealthPlugin</span> = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer-extra-plugin-stealth'</span>);
puppeteer.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">StealthPlugin</span>());

<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>();
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(<span class="hljs-string">'Mozilla/5.0 (iPhone; CPU iPhone OS 17_3_1 like Mac OS X)'</span>);

Stellen Sie für jede neue Seite sicher, dass der Benutzeragent festgelegt ist:

<span class="hljs-keyword">const</span> newPage = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">await</span> newPage.<span class="hljs-title function_">setUserAgent</span>(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:

<span class="hljs-keyword">const</span> stealthPlugin = <span class="hljs-title class_">StealthPlugin</span>();
stealthPlugin.<span class="hljs-property">enabledEvasions</span>.<span class="hljs-title function_">add</span>(<span class="hljs-string">'user-agent-override'</span>);
puppeteer.<span class="hljs-title function_">use</span>(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.

<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">naturalDelay</span>(<span class="hljs-params"></span>) {
  <span class="hljs-keyword">const</span> delay = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() * (<span class="hljs-number">3000</span> - <span class="hljs-number">1000</span>) + <span class="hljs-number">1000</span>);
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForTimeout</span>(delay);
}

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

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setExtraHTTPHeaders</span>({
  <span class="hljs-string">'Accept-Language'</span>: <span class="hljs-string">'en-US,en;q=0.9'</span>,
  <span class="hljs-string">'Accept'</span>: <span class="hljs-string">'text/html,application/xhtml+xml'</span>,
  <span class="hljs-string">'User-Agent'</span>: 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:

<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({
  <span class="hljs-attr">args</span>: [
    <span class="hljs-string">'--disable-gpu'</span>,
    <span class="hljs-string">'--disable-dev-shm-usage'</span>,
    <span class="hljs-string">'--disable-setuid-sandbox'</span>,
    <span class="hljs-string">'--no-first-run'</span>,
    <span class="hljs-string">'--no-sandbox'</span>,
    <span class="hljs-string">'--no-zygote'</span>
  ],
  <span class="hljs-attr">userDataDir</span>: <span class="hljs-string">'./cache'</span>
});

Verwenden Sie für Screenshot-Aufgaben effiziente Einstellungen:

<span class="hljs-keyword">const</span> screenshot = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
  <span class="hljs-attr">type</span>: <span class="hljs-string">'jpeg'</span>,
  <span class="hljs-attr">quality</span>: <span class="hljs-number">80</span>,
  <span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">encoding</span>: <span class="hljs-string">'binary'</span>
});

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

<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-function">(<span class="hljs-params">request</span>) =></span> {
  <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">resourceType</span>() === <span class="hljs-string">'image'</span> || request.<span class="hljs-title function_">resourceType</span>() === <span class="hljs-string">'font'</span>) {
    request.<span class="hljs-title function_">abort</span>();
  } <span class="hljs-keyword">else</span> {
    request.<span class="hljs-title function_">continue</span>();
  }
});

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	Auswirkungen
User-Agent-Setup	Weisen Sie jedem neuen Tab oder jeder neuen Seite einen User-Agent zu	40% Rückgang des Bot-Verkehrs [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:

<span class="hljs-comment">// Advanced browser launch setup</span>
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({
  <span class="hljs-attr">args</span>: [
    <span class="hljs-string">'--enable-webgl'</span>,
    <span class="hljs-string">'--use-gl=desktop'</span>,
    <span class="hljs-string">'--disable-automation'</span>
  ],
  <span class="hljs-attr">ignoreDefaultArgs</span>: [<span class="hljs-string">'--enable-automation'</span>]
});

Dieses Setup ermöglicht Funktionen wie WebGL Deaktivieren Sie Automatisierungsflags, damit sich Ihre Skripte natürlicher einfügen.