ExtendableMessageEvent.origin — Eigenschaft · JavaScript-Referenz

Signatur

ExtendableMessageEvent.origin

Beschreibung

Die Eigenschaft origin des ExtendableMessageEvent enthält den serialisierten Ursprung des Absenders, also Schema, Host und Port, z. B. "https://example.com". Ein solches Event erhält ein Service Worker in seinem message-Handler, wenn eine Seite, ein Worker oder ein anderer Client über navigator.serviceWorker.controller.postMessage() bzw. ServiceWorker.postMessage() eine Nachricht schickt.

Gebraucht wird die Eigenschaft vor allem, um den Absender zu prüfen und zu protokollieren. Weil ein Service Worker nur Clients desselben Ursprungs steuert, stimmt event.origin im Normalfall mit self.location.origin überein. Eine ausdrückliche Prüfung ist trotzdem guter Stil: Sie hält eine Bedingung fest, auf die sich dein Code verlässt, und fängt unerwartete Absender ab, bevor du Daten in Caches oder IndexedDB schreibst.

Genauere Angaben zum Absender stehen in event.source. Das ist ein Client-, ServiceWorker- oder MessagePort-Objekt. Bei einem Client findest du dort etwa die vollständige url und die id, über die du direkt antworten kannst.

Rückgabewert

Typ

string

Beschreibung

Der serialisierte Ursprung des sendenden Clients, z. B. "https://app.example.com". Je nach Implementierung und Absenderart kann der Wert auch ein leerer String sein.

Beispiele

Ursprung einer eingehenden Nachricht protokollieren

// sw.js
self.addEventListener('message', (event) => {
  console.log('Nachricht von:', event.origin);
  console.log('Inhalt:', event.data);
});

Nachricht von: https://app.example.com Inhalt: { type: 'PING' }

Absender prüfen, bevor Daten in den Cache geschrieben werden

// sw.js
const ERLAUBTER_URSPRUNG = self.location.origin;

self.addEventListener('message', (event) => {
  // Fallback, falls origin leer ist: Ursprung aus der Client-URL ableiten
  const herkunft = event.origin || (event.source?.url ? new URL(event.source.url).origin : '');

  if (herkunft !== ERLAUBTER_URSPRUNG) {
    console.warn('Nachricht von unbekanntem Ursprung verworfen:', herkunft);
    return;
  }

  if (event.data?.type === 'PRECACHE') {
    // waitUntil hält den Service Worker aktiv, bis das Caching fertig ist
    event.waitUntil(
      caches.open('v1').then((cache) => cache.addAll(event.data.urls))
    );
  }
});

Seite sendet Nachricht, Service Worker antwortet

// main.js (Seite)
const sendeAnServiceWorker = async () => {
  const reg = await navigator.serviceWorker.ready;
  reg.active.postMessage({ type: 'PING' });
};

navigator.serviceWorker.addEventListener('message', (event) => {
  console.log('Antwort:', event.data);
});

sendeAnServiceWorker();

// sw.js
self.addEventListener('message', (event) => {
  if (event.origin !== self.location.origin) return;
  event.source.postMessage({ type: 'PONG', von: event.origin });
});

Antwort: { type: 'PONG', von: 'https://app.example.com' }

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an event.origin hat keine Wirkung. Im strikten Modus wird sie ignoriert oder löst einen TypeError aus.
Leerer String möglich: Manche ältere Browser-Versionen liefern "", besonders wenn die Nachricht über einen MessagePort kommt. Leite den Ursprung in diesem Fall aus new URL(event.source.url).origin ab.
Nicht mit MessageEvent.origin verwechseln: Bei window.postMessage() zwischen Fenstern verschiedener Ursprünge ist die Prüfung von origin sicherheitskritisch, weil sie XSS und Datenabfluss verhindert. Im Service Worker sind die Absender dagegen grundsätzlich Clients desselben Ursprungs.
Nachrichteninhalt trotzdem prüfen: Ein passender Ursprung heißt nicht, dass event.data vertrauenswürdig ist. Auch ein kompromittiertes Skript auf der eigenen Seite kann Nachrichten senden. Prüfe also Struktur und Typ der Daten, bevor du sie weiterverarbeitest.
Service Worker laufen nur in sicheren Kontexten, also über HTTPS oder localhost.

Siehe auch

Client.url ExtendableMessageEvent.ports ExtendableMessageEvent.data ExtendableMessageEvent.source ExtendableMessageEvent.lastEventId