webRequest.onBeforeRequest

Dieses Ereignis wird ausgelöst, wenn eine Anfrage kurz davor ist, gesendet zu werden, und bevor die Header verfügbar sind. An dieser Stelle sollten Sie zuhören, wenn Sie die Anfrage abbrechen oder umleiten möchten.

Um die Anfrage abzubrechen oder umzuleiten, fügen Sie zunächst "blocking" in das extraInfoSpec Array-Argument für 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 ein.
  • Um die Anfrage umzuleiten, fügen Sie eine Eigenschaft redirectUrl mit dem Wert der URL ein, zu der Sie umleiten möchten.

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

Wenn mehrere blockierende Handler eine Anfrage modifizieren, tritt nur eine Modifikationsreihe in Kraft. Weiterleitungen und Stornierungen haben die gleiche Priorität. Wenn Sie also eine Anfrage abgebrochen haben, könnten Sie erneut eine Anfrage mit derselben requestId sehen, wenn ein anderer blockierender Handler die Anfrage umgeleitet hat.

Ab Firefox 52 kann der Listener anstelle der Rückgabe von BlockingResponse ein Promise zurückgeben, das mit einem BlockingResponse aufgelöst wird. Dies ermöglicht 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)

Hört auf, auf dieses Ereignis zu hören. Das listener-Argument ist der zu entfernende Listener.

hasListener(listener)

Überprüfen, ob 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 auftritt. Der Funktion wird dieses Argument übergeben:

details

object. Details zur Anfrage. Siehe den Abschnitt details für weitere Informationen.

Rückgabe: webRequest.BlockingResponse. Wenn "blocking" im extraInfoSpec-Parameter angegeben ist, sollte der Ereignis-Listener ein BlockingResponse-Objekt zurückgeben und kann entweder dessen cancel- oder redirectUrl-Eigenschaften setzen. Ab Firefox 52 kann anstelle der Rückgabe von BlockingResponse ein Promise zurückgegeben werden, das mit einem BlockingResponse aufgelöst wird. Dies ermöglicht 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 of 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": enthält requestBody im details-Objekt, das an den Listener übergeben wird

Zusätzliche Objekte

details

cookieStoreId

string. Wenn die Anfrage von einem Tab stammt, der in einer kontextuellen Identität geöffnet ist, die Cookie-Store-ID der kontextuellen Identität. Weitere Informationen finden Sie unter Mit kontextuellen Identitäten arbeiten.

documentUrl

string. URL des Dokuments, in dem die Ressource geladen wird. Zum Beispiel, wenn die Webseite unter "https://example.com" ein Bild oder ein iframe enthält, dann ist die documentUrl für das Bild oder iframe "https://example.com". Für ein oberstes Dokument ist documentUrl undefiniert.

frameAncestors

array. Enthält Informationen für jedes Dokument in der Frame-Hierarchie bis zum obersten Dokument. Das erste Element im Array enthält Informationen über das unmittelbare Elternteil des angeforderten Dokuments, und das letzte Element enthält Informationen über das oberste Dokument. Wenn das Laden tatsächlich für das oberste Dokument erfolgt, 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 erfolgt; ein positiver Wert ist die ID eines Unterrahmens, in dem die Anfrage erfolgt. Wenn das Dokument eines (Unter-)Rahmens geladen wird (type ist main_frame oder sub_frame), gibt frameId die ID dieses Rahmens an, nicht die ID des äußeren Rahmens. Frame-IDs sind innerhalb eines Tabs einzigartig.

incognito

boolean. Ob die Anfrage aus einem privaten Browserfenster stammt.

method

string. Standard-HTTP-Methode: zum Beispiel "GET" oder "POST".

originUrl

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

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

parentFrameId

integer. ID des Rahmens, der den Rahmen enthält, der die Anfrage gesendet hat. Auf -1 gesetzt, wenn kein übergeordneter Rahmen 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. True, wenn der Proxy die DNS-Auflösung basierend auf dem angegebenen Hostnamen durchführt, was bedeutet, dass der Client kein eigenes DNS-Lookup durchführen sollte.

failoverTimeout

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

requestBody Optional

object. Enthält die HTTP-Anfrage-Body-Daten. Wird nur bereitgestellt, wenn extraInfoSpec "requestBody" enthält.

error Optional

string. Dies wird gesetzt, wenn Fehler aufgetreten sind, als die Anfrage-Body-Daten abgerufen wurden.

formData Optional

object. Dieses Objekt ist vorhanden, wenn die Anfragemethode POST ist und der Body 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. Zum Beispiel: {'key': ['value1', 'value2']}. Wenn die Daten von einem anderen Medientyp sind oder wenn sie fehlerhaft sind, ist das Objekt nicht vorhanden.

raw Optional

array von webRequest.UploadData. Wenn die Anfragemethode PUT oder POST ist und der Body nicht bereits in formData analysiert ist, dann enthält dieses Array die nicht analysierten Anfrage-Body-Elemente.

requestId

string. Die ID der Anfrage. Anfragen-IDs sind innerhalb einer Browsersitzung einzigartig, sodass Sie sie verwenden können, um verschiedene Ereignisse zuzuordnen, 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 verbunden ist.

thirdParty

boolean. Gibt an, ob die Anfrage und ihre Inhaltfenster-Hierarchie Drittanbieter ist.

timeStamp

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

type

webRequest.ResourceType. Der Typ der angeforderten Ressource: zum Beispiel "image", "script", "stylesheet".

url

string. Ziel der Anfrage.

urlClassification

object. Der mit der Anfrage verbundene Typ des Trackings, wenn die Anfrage durch Firefox Tracking Protection klassifiziert wird. Dies ist ein Objekt mit diesen Eigenschaften:

firstParty

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

thirdParty

array of string. Klassifikationsflags für die Anfrage oder die (Fenster)Hierarchie von Drittparteien.

Die Klassifikationsflags umfassen:

  • fingerprinting und fingerprinting_content: weist darauf hin, dass die Anfrage an Fingerprinting beteiligt ist ("ein Ursprung, der fingerprinting durchgeführt hat").
    • fingerprinting gibt an, dass die Domain in der Fingerprinting- und Tracking-Kategorie ist. Beispiele für diese Art von Domain sind Werbetreibende, die ein Profil mit dem besuchenden Benutzer verknüpfen möchten.
    • fingerprinting_content gibt an, dass die Domain in der Fingerprinting-Kategorie, aber nicht in der Tracking-Kategorie ist. Beispiele für diese Art von Domain sind Zahlungsanbieter, die Fingerprinting-Techniken verwenden, um den besuchenden Benutzer zu Identifikationszwecken gegen Betrug 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: weist darauf hin, dass die Anfrage an Tracking beteiligt ist. tracking ist jede generische Tracking-Anfrage, die ad, analytics, social und content Suffixe identifizieren den Typ des Trackers.
  • emailtracking und emailtracking_content: weist darauf hin, dass die Anfrage an E-Mail-Tracking 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 Trackertypen finden Sie auf der disconnect.me Website. Das content-Suffix weist auf Tracker hin, die Inhalte verfolgen und bereitstellen. Das Blockieren dieser schützt Benutzer, kann jedoch dazu führen, dass Websites nicht funktionieren oder Elemente nicht angezeigt werden.

Browser-Kompatibilität

Reigenfolge der DNS-Auflösung, wenn BlockingResponse verwendet wird

Bezüglich der DNS-Auflösung, wenn BlockingResponse mit OnBeforeRequest verwendet wird: Im HTTP-Channel tritt onBeforeRequest mit Blocking-Response vor der DNS-Auflösung und auch vor einer spekulativen Verbindung auf. Bei anderen Kanälen kann eine spekulative Verbindung dazu führen, dass DNS-Anfragen vor onBeforeRequest auftreten. Diese Reihenfolge ist etwas, worauf sich ein Erweiterungsentwickler nicht verlassen sollte, da sie je nach Browser und von einer Browserversion zur anderen variieren kann, geschweige denn von einem Anfragekanal zum anderen. Weitere Informationen finden Sie in der BugZilla-Klärung von Mozilla-Entwicklern zur DNS-Auflösungsreihenfolge.

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 zu URLs unter "https://developer.mozilla.org/" gemacht werden (um die Wirkung zu sehen, besuchen Sie eine beliebige Seite auf MDN, die Bilder enthält, wie 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 alle Netzwerkanfragen für Bilder, die zu URLs unter "https://developer.mozilla.org/" gemacht werden, durch eine Umleitung (um die Wirkung zu sehen, besuchen Sie eine beliebige Seite auf MDN, die Bilder enthält, wie 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 genauso wie das vorherige Beispiel, außer dass der Listener die Anfrage asynchron behandelt. Er gibt ein Promise zurück, das einen Timer setzt und mit der Umleitungs-URL aufgelöst wird, 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

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