.png)
.svg){kind=icon}
23. März 2025
•
7
min lesen
User-Agent-Verwaltung in Puppeteer für die Geräteemulation
Georgi Miloradowitsch
Forscher, Texter und Usecase-Interviewer
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:
page.setUserAgent() und emulieren Sie Geräte mit integrierten Profilen wie iPhone oder benutzerdefinierten Einstellungen.Zu den wichtigsten Tipps gehören:
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.
Machen Sie Puppeteer bereit, indem Sie die erforderlichen Abhängigkeiten installieren und Ihr erstes Emulationsskript schreiben.
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.
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:
~/.cache/puppeteer.PUPPETEER_CACHE_DIR variable UmgebungIn diesem Abschnitt wird erläutert, wie Sie die User-Agent-Einstellungen effektiv konfigurieren und optimieren.
Das 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.
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'
);
Hier sind einige Tipps, um eine reibungslose User-Agent-Verwaltung zu gewährleisten:
// 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'
);
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.
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.
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);
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');
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.
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:
async function naturalDelay() {
const delay = Math.floor(Math.random() * (3000 - 1000) + 1000);
await page.waitForTimeout(delay);
}
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.
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.
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 |
| 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 %. Diese Ergebnisse zeigen, wie kleine Anpassungen zu großen Leistungssteigerungen führen können.
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.
