webRequest.onBeforeRequest

Dieses Ereignis wird ausgelöst, wenn eine Anfrage kurz davor steht, getätigt zu werden, und bevor Header verfügbar sind. Dies ist ein guter Zeitpunkt, um zuzuhören, wenn Sie die Anfrage abbrechen oder umleiten möchten.

Um die Anfrage abzubrechen oder umzuleiten, fügen Sie zuerst "blocking" in das extraInfoSpec Array-Argument von addListener() ein. Geben Sie dann in der Listener-Funktion ein BlockingResponse Objekt zurück und setzen Sie die entsprechende Eigenschaft:

  • Um die Anfrage abzubrechen, fügen Sie eine Eigenschaft cancel mit dem Wert true hinzu.
  • Um die Anfrage umzuleiten, fügen Sie eine Eigenschaft redirectUrl mit dem gewünschten Umleitungsziel-URL hinzu.

Wenn eine Erweiterung eine öffentliche (z. B. HTTPS) URL auf eine Erweiterungsseite umleiten möchte, muss die Datei manifest.json der Erweiterung einen web_accessible_resources Schlüssel enthalten, der die URL der Erweiterungsseite auflistet.

Wenn mehrere blockierende Handler eine Anfrage modifizieren, wird nur eine Modifikation wirksam. Weiterleitungen und Abbrüche haben dieselbe Priorität. Daher könnte es sein, dass Sie eine Anfrage mit demselben requestId noch einmal sehen, wenn ein anderer blockierender Handler die Anfrage umgeleitet hat.

Ab Firefox 52 kann der Listener, anstatt BlockingResponse zurückzugeben, ein Promise zurückgeben, das mit einem BlockingResponse aufgelöst wird. Dies ermöglicht es dem Listener, die Anfrage asynchron zu verarbeiten.

Wenn Sie "blocking" verwenden, müssen Sie die "webRequestBlocking" API-Berechtigung in Ihrem manifest.json haben.

Syntax

js
browser.webRequest.onBeforeRequest.addListener(
  listener,             // function
  filter,               //  object
  extraInfoSpec         //  optional array of strings
)
browser.webRequest.onBeforeRequest.removeListener(listener)
browser.webRequest.onBeforeRequest.hasListener(listener)

Ereignisse haben drei Funktionen:

addListener(listener, filter, extraInfoSpec)

Fügt diesem Ereignis einen Listener hinzu.

removeListener(listener)

Stoppt das Zuhören für dieses Ereignis. Das listener-Argument ist der zu entfernende Listener.

hasListener(listener)

Prüft, ob der listener für dieses Ereignis registriert ist. Gibt true zurück, wenn es zuhört, andernfalls false.

addListener Syntax

Parameter

listener

Die Funktion, die aufgerufen wird, wenn dieses Ereignis eintritt. Der Funktion wird dieses Argument übergeben:

details

object. Details zur Anfrage. Weitere Informationen finden Sie im Abschnitt details.

Rückgabe: webRequest.BlockingResponse. Wenn "blocking" im Parameter extraInfoSpec angegeben ist, sollte der Ereignis-Listener ein BlockingResponse-Objekt zurückgeben und entweder dessen cancel- oder redirectUrl-Eigenschaften setzen. Ab Firefox 52 kann der Listener, anstatt BlockingResponse zurückzugeben, ein Promise zurückgeben, das mit einem BlockingResponse aufgelöst wird. Dies ermöglicht es dem Listener, die Anfrage asynchron zu verarbeiten.

filter

webRequest.RequestFilter. Ein Filter, der die Ereignisse einschränkt, die an diesen Listener gesendet werden.

extraInfoSpec Optional

array von string. Zusätzliche Optionen für das Ereignis. Sie können einen der folgenden Werte übergeben:

  • "blocking": macht die Anfrage synchron, sodass Sie die Anfrage abbrechen oder umleiten können
  • "requestBody": schließt requestBody in das details-Objekt ein, das an den Listener übergeben wird

Zusätzliche Objekte

details

cookieStoreId

string. Wenn die Anfrage von einem Tab stammt, der in eine kontextuelle Identität geöffnet ist, die Cookie-Store-ID der kontextuellen Identität. Siehe Arbeiten mit kontextuellen Identitäten für weitere Informationen.

documentUrl

string. URL des Dokuments, in dem die Ressource geladen wird. Beispielsweise, wenn die Webseite unter "https://example.com" ein Bild oder ein iframe enthält, dann ist die documentUrl des Bildes oder iframes "https://example.com". Für ein Top-Level-Dokument ist documentUrl undefiniert.

frameAncestors

array. Enthält Informationen für jedes Dokument im Frame-Hierarchiebaum bis zum obersten Dokument. Das erste Element im Array enthält Informationen über das unmittelbare übergeordnete Dokument des angeforderten Dokuments, und das letzte Element enthält Informationen über das oberste Dokument. Wenn der Ladevorgang tatsächlich für das oberste Dokument ist, ist dieses Array leer.

url

string. Die URL, von der das Dokument geladen wurde.

frameId

integer. Die frameId des Dokuments. details.frameAncestors[0].frameId ist dasselbe wie details.parentFrameId.

frameId

integer. Null, wenn die Anfrage im Hauptframe stattfindet; ein positiver Wert ist die ID eines Unterframes, in dem die Anfrage stattfindet. Wenn das Dokument eines (Unter-)Frames geladen wird (type ist main_frame oder sub_frame), zeigt frameId die ID dieses Frames an, nicht die ID des äußeren Frames. Frame-IDs sind eindeutig innerhalb eines Tabs.

incognito

boolean. Ob die Anfrage von einem privaten Fenster kommt.

method

string. Standard-HTTP-Methode: z.B. "GET" oder "POST".

originUrl

string. URL der Ressource, die die Anfrage ausgelöst hat. Beispielsweise, wenn "https://example.com" einen Link enthält und der Benutzer auf den Link klickt, dann ist die originUrl der resultierenden Anfrage "https://example.com".

Die originUrl ist oft, aber nicht immer, dieselbe wie die documentUrl. Beispielsweise, wenn eine Seite ein iframe enthält und das iframe einen Link enthält, der ein neues Dokument in das iframe lädt, dann ist die documentUrl der resultierenden Anfrage das übergeordnete Dokument des iframes, aber die originUrl wird die URL des Dokuments im iframe sein, das den Link enthielt.

parentFrameId

integer. ID des Frames, der den Frame enthält, der die Anfrage gesendet hat. Auf -1 gesetzt, wenn kein übergeordneter Frame existiert.

proxyInfo

object. Diese Eigenschaft ist nur vorhanden, wenn die Anfrage über einen Proxy geleitet wird. Sie enthält die folgenden Eigenschaften:

host

string. Der Hostname des Proxy-Servers.

port

integer. Die Portnummer des Proxy-Servers.

type

string. Der Typ des Proxy-Servers. Einer von:

  • "http": HTTP-Proxy (oder SSL CONNECT für HTTPS)
  • "https": HTTP-Proxying über TLS-Verbindung zum Proxy
  • "socks": SOCKS v5-Proxy
  • "socks4": SOCKS v4-Proxy
  • "direct": kein Proxy
  • "unknown": unbekannter Proxy
username

string. Benutzername für den Proxy-Dienst.

proxyDNS

boolean. Wahr, wenn der Proxy die Namensauflösung basierend auf dem angegebenen Hostnamen durchführt, was bedeutet, dass der Client seine eigene DNS-Abfrage nicht durchführen sollte.

failoverTimeout

integer. Failover-Timeout in Sekunden. Wenn die Proxy-Verbindung fehlschlägt, wird der Proxy für diesen Zeitraum nicht wieder verwendet.

requestBody Optional

object. Enthält die HTTP-Anfragekörperdaten. Nur bereitgestellt, wenn extraInfoSpec "requestBody" enthält.

error Optional

string. Dies wird gesetzt, wenn Fehler beim Abrufen der Anfragekörperdaten auftreten.

formData Optional

object. Dieses Objekt ist vorhanden, wenn die Anfragemethode POST ist und der Körper eine Sequenz von Schlüssel-Wert-Paaren ist, die in UTF-8 als entweder "multipart/form-data" oder "application/x-www-form-urlencoded" kodiert sind.

Es ist ein Wörterbuch, in dem jeder Schlüssel die Liste aller Werte für diesen Schlüssel enthält. Beispielsweise: {'key': ['value1', 'value2']}. Wenn die Daten eines anderen Medientyps sind oder fehlerhaft sind, ist das Objekt nicht vorhanden.

raw Optional

array von webRequest.UploadData. Wenn die Anfragemethode PUT oder POST ist und der Körper nicht bereits in formData geparst ist, enthält dieses Array die ungeparsten Anfragekörperelemente.

requestId

string. Die ID der Anfrage. Anfrage-IDs sind innerhalb einer Browsersitzung eindeutig, sodass Sie sie verwenden können, um verschiedene Ereignisse zu verknüpfen, die mit derselben Anfrage verbunden sind.

tabId

integer. ID des Tabs, in dem die Anfrage stattfindet. Auf -1 gesetzt, wenn die Anfrage nicht mit einem Tab zusammenhängt.

thirdParty

boolean. Gibt an, ob die Anfrage und ihre Inhaltsfensterhierarchie von Dritten stammen.

timeStamp

number. Die Zeit, zu der dieses Ereignis ausgelöst wurde, in Millisekunden seit der Epoche.

type

webRequest.ResourceType. Der Ressourcentyp der angefragt wird: z.B. "image", "script", "stylesheet".

url

string. Ziel der Anfrage.

urlClassification

object. Der Typ der Verfolgung, der mit der Anfrage in Zusammenhang steht, wenn die Anfrage von Firefox Tracking Protection klassifiziert wird. Dies ist ein Objekt mit folgenden Eigenschaften:

firstParty

array von string. Klassifikationsflags für den First Party der Anfrage.

thirdParty

array von string. Klassifikationsflags für die Dritte, die an der Anfrage oder ihrer Fensterhierarchie beteiligt sind.

Die Klassifikationsflags umfassen:

  • fingerprinting und fingerprinting_content: zeigt an, dass die Anfrage an Fingerprinting beteiligt ist („Eine Herkunft wurde gefunden, die Fingerprinting betreibt“).
    • fingerprinting bedeutet, dass die Domain in der Kategorie Fingerprinting und Verfolgung ist. Beispiele für diese Art von Domain sind Werbetreibende, die ein Profil mit dem Besucher verknüpfen möchten.
    • fingerprinting_content bedeutet, dass die Domain in der Kategorie Fingerprinting, aber nicht in der Kategorie Verfolgung ist. Beispiele für diese Art von Domain sind Zahlungsanbieter, die Fingerprinting-Techniken verwenden, um den Besuchenden aus Anti-Betrugsgründen zu identifizieren.
  • cryptomining und cryptomining_content: ähnlich wie die Fingerprinting-Kategorie, jedoch für Cryptomining-Ressourcen.
  • tracking, tracking_ad, tracking_analytics, tracking_social und tracking_content: zeigt an, dass die Anfrage an der Verfolgung beteiligt ist. tracking ist jede allgemeine Verfolgungsanfrage, die Suffixe ad, analytics, social und content identifizieren den Typ des Trackers.
  • emailtracking und emailtracking_content: zeigt an, dass die Anfrage an der Verfolgung von E-Mails beteiligt ist.
  • any_basic_tracking: Ein Meta-Flag, das Tracking- und Fingerprinting-Flags kombiniert, mit Ausnahme von tracking_content und fingerprinting_content.
  • any_strict_tracking: Ein Meta-Flag, das alle Tracking- und Fingerprinting-Flags kombiniert.
  • any_social_tracking: Ein Meta-Flag, das alle sozialen Tracking-Flags kombiniert.

Weitere Informationen zu Tracker-Typen finden Sie auf der disconnect.me Website. Das Suffix content zeigt Tracker an, die überwachen und Inhalte servieren. Sie zu blockieren schützt Benutzer, kann aber dazu führen, dass Webseiten fehlerhaft funktionieren oder Elemente nicht angezeigt werden.

DNS-Auflösungsreihenfolge bei Verwendung von BlockingResponse

Bezüglich der DNS-Auflösung bei Verwendung von BlockingResponse mit OnBeforeRequest: Im HTTP-Kanal erfolgt das onBeforeRequest mit blockierendem Ergebnis vor der DNS-Auflösung und auch vor der spekulativen Verbindung. Bei anderen Kanälen kann die spekulative Verbindung dazu führen, dass DNS-Anfragen vor onBeforeRequest stattfinden. Auf diese Reihenfolge sollte sich ein Erweiterungsentwickler nicht verlassen, da sie je nach Browser variieren kann und von einer Browserversion zur anderen sowie von einem Anfragenkanal zum anderen. Siehe BugZilla-Erklärung zum Thema DNS-Auflösungsreihenfolge von Mozilla-Entwicklern

Beispiele

Dieser Code protokolliert die URL für jede angeforderte Ressource, die dem <all_urls> Muster entspricht:

js
function logURL(requestDetails) {
  console.log(`Loading: ${requestDetails.url}`);
}

browser.webRequest.onBeforeRequest.addListener(logURL, {
  urls: ["<all_urls>"],
});

Dieser Code bricht Anfragen für Bilder ab, die an URLs unter "https://developer.mozilla.org/" gerichtet sind (um den Effekt zu sehen, besuchen Sie eine beliebige Seite auf MDN, die Bilder enthält, wie z.B. webRequest):

js
// match pattern for the URLs to redirect
let pattern = "https://developer.mozilla.org/*";

// cancel function returns an object
// which contains a property `cancel` set to `true`
function cancel(requestDetails) {
  console.log(`Canceling: ${requestDetails.url}`);
  return { cancel: true };
}

// add the listener,
// passing the filter argument and "blocking"
browser.webRequest.onBeforeRequest.addListener(
  cancel,
  { urls: [pattern], types: ["image"] },
  ["blocking"],
);

Dieser Code ersetzt durch Weiterleitung alle Netzwerk-Anfragen für Bilder, die an URLs unter "https://developer.mozilla.org/" gerichtet sind (um den Effekt zu sehen, besuchen Sie eine beliebige Seite auf MDN, die Bilder enthält, wie z.B. webRequest):

js
// match pattern for the URLs to redirect
let pattern = "https://developer.mozilla.org/*";

// redirect function
// returns an object with a property `redirectURL`
// set to the new URL
function redirect(requestDetails) {
  console.log(`Redirecting: ${requestDetails.url}`);
  return {
    redirectUrl:
      "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif",
  };
}

// add the listener,
// passing the filter argument and "blocking"
browser.webRequest.onBeforeRequest.addListener(
  redirect,
  { urls: [pattern], types: ["image"] },
  ["blocking"],
);

Dieser Code ist genau wie das vorherige Beispiel, außer dass der Listener die Anfrage asynchron verarbeitet. Es gibt ein Promise zurück, das einen Timer setzt und mit der Weiterleitungs-URL auflöst, wenn der Timer abläuft:

js
// match pattern for the URLs to redirect
let pattern = "https://developer.mozilla.org/*";

// URL we will redirect to
let redirectUrl =
  "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif";

// redirect function returns a Promise
// which is resolved with the redirect URL when a timer expires
function redirectAsync(requestDetails) {
  console.log(`Redirecting async: ${requestDetails.url}`);
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ redirectUrl });
    }, 2000);
  });
}

// add the listener,
// passing the filter argument and "blocking"
browser.webRequest.onBeforeRequest.addListener(
  redirectAsync,
  { urls: [pattern], types: ["image"] },
  ["blocking"],
);

Ein weiteres Beispiel, das alle Bilder zu einer Daten-URL umleitet:

js
let pattern = "https://developer.mozilla.org/*";

let image = `
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <rect style="stroke-width: 10; stroke: #666;" width="100%" height="100%" fill="#d4d0c8" />
    <text transform="translate(0, 9)" x="50%" y="50%" width="100%" fill="#666" height="100%" style="text-anchor: middle; font: bold 10pt 'Segoe UI', Arial, Helvetica, Sans-serif;">Blocked</text>
  </svg>
`;

function listener(details) {
  const redirectUrl = `data:image/svg+xml,${encodeURIComponent(image)}`;
  return { redirectUrl };
}

browser.webRequest.onBeforeRequest.addListener(
  listener,
  { urls: [pattern], types: ["image"] },
  ["blocking"],
);

Hier ist eine weitere Version:

js
function randomColor() {
  return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}

const pattern = "https://developer.mozilla.org/*";

let image = `
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <rect width="100%" height="100%" fill="${randomColor()}"/>
  </svg>
`;

function listener(details) {
  const redirectUrl = `data:image/svg+xml,${encodeURIComponent(image)}`;
  return { redirectUrl };
}

browser.webRequest.onBeforeRequest.addListener(
  listener,
  { urls: [pattern], types: ["image"] },
  ["blocking"],
);

Beispielerweiterungen

Browser-Kompatibilität

Hinweis: Diese API basiert auf der chrome.webRequest API von Chromium. Diese Dokumentation ist übernommen von web_request.json im Chromium-Code.