MessageEvent.origin — Eigenschaft · JavaScript-Referenz

Signatur

MessageEvent.origin

Beschreibung

Die schreibgeschützte Eigenschaft origin eines MessageEvent enthält den Ursprung des Dokuments oder Kontexts, der die Nachricht gesendet hat. Der Wert besteht aus Schema, Hostname und gegebenenfalls Port, z. B. "https://shop.example.com:8443". Pfad, Query-String und Fragment sind nie enthalten.

Am wichtigsten ist die Eigenschaft bei window.postMessage(). Jedes Fenster kann einem anderen Fenster Nachrichten schicken, deshalb muss der Empfänger in seinem message-Handler immer prüfen, ob event.origin einem erwarteten, vertrauenswürdigen Ursprung entspricht. Erst danach darf er event.data verarbeiten. Dieser Wert wird vom Browser gesetzt und lässt sich vom Absender nicht fälschen.

Bei anderen Nachrichtenquellen ist origin unterschiedlich belegt:

WebSocket: der Ursprung der Server-URL.
EventSource (Server-Sent Events): der Ursprung der Event-Stream-URL.
BroadcastChannel: der Ursprung des sendenden Kontexts.
MessageChannel/MessagePort und dedizierte Worker: meist ein leerer String "".

Wenn der Absender einen opaken Ursprung hat, etwa ein sandboxed iframe ohne allow-same-origin oder eine data:-/file:-URL, ist der Wert der String "null".

Rückgabewert

Typ

string

Beschreibung

Ursprung des Absenders im Format schema://host[:port]. Bei einem opaken Ursprung ist der Wert "null", bei Quellen ohne Ursprung (z. B. MessagePort) ein leerer String "".

Beispiele

postMessage-Empfänger mit Ursprungsprüfung absichern

// Im übergeordneten Fenster: nur Nachrichten vom Zahlungs-iframe annehmen
const TRUSTED_ORIGIN = 'https://pay.example.com';

const onMessage = (event) => {
  if (event.origin !== TRUSTED_ORIGIN) {
    console.warn('Nachricht verworfen von:', event.origin);
    return;
  }
  // Erst jetzt die Daten verarbeiten
  const { status, orderId } = event.data;
  console.log(`Bestellung ${orderId}: ${status}`);
};

window.addEventListener('message', onMessage);

Bestellung 4711: paid

Mehrere erlaubte Ursprünge per Set (Allowlist)

const allowedOrigins = new Set([
  'https://app.example.com',
  'https://admin.example.com'
]);

window.addEventListener('message', (event) => {
  if (!allowedOrigins.has(event.origin)) return;

  // Antwort gezielt an denselben Ursprung zurückschicken
  event.source?.postMessage({ ack: true }, event.origin);
});

Ursprung bei WebSocket und MessageChannel

const ws = new WebSocket('wss://chat.example.com/socket');
ws.addEventListener('message', (event) => {
  console.log('WebSocket-Origin:', event.origin);
});

const { port1, port2 } = new MessageChannel();
port1.onmessage = (event) => {
  console.log('MessagePort-Origin:', JSON.stringify(event.origin));
};
port2.postMessage('hallo');

MessagePort-Origin: "" WebSocket-Origin: wss://chat.example.com

Sandboxed iframe mit opakem Ursprung erkennen

window.addEventListener('message', (event) => {
  if (event.origin === 'null') {
    // Absender ist z. B. ein <iframe sandbox> ohne allow-same-origin
    console.log('Opaker Ursprung – Nachricht nur eingeschränkt vertrauen');
    return;
  }
  console.log('Absender:', event.origin);
});

Opaker Ursprung – Nachricht nur eingeschränkt vertrauen

// Wichtig · Fallstricke

Sicherheit: Ein message-Handler ohne Prüfung von event.origin ist eine häufige Ursache für XSS und Datenlecks. Jede Seite, die Ihre Seite in einem Fenster oder iframe öffnet, kann dann beliebige Nachrichten einschleusen.

Vergleichen Sie immer exakt mit === oder über eine Allowlist. Unsichere Prüfungen wie event.origin.includes('example.com'), startsWith oder endsWith lassen sich umgehen, etwa mit https://example.com.evil.net oder https://evilexample.com.
Behandeln Sie event.data auch bei vertrauenswürdigem Ursprung als Eingabe, die geprüft werden muss. Geben Sie die Daten nie ungefiltert an innerHTML, eval() oder location.href weiter.
Der String "null" ist ein gültiger Wert, der auf einen opaken Ursprung hinweist. Setzen Sie ihn nie auf die Allowlist, denn jeder sandboxed iframe erzeugt ihn.
Geben Sie beim Senden statt '*' möglichst immer einen konkreten targetOrigin an, z. B. event.origin aus der eingehenden Nachricht.
Der Port gehört zum Ursprung, https://example.com und https://example.com:8443 sind also verschieden. Standardports (443, 80) werden weggelassen.

Kompatibilität: Wird von allen modernen Browsern und in Web Workern unterstützt. Bei MessagePort und dedizierten Workern ist der Wert in der Regel leer. Dort ist die Ursprungsprüfung beim Einrichten des Kanals zu erledigen.

Siehe auch

Location.origin MessageEvent.ports MessageEvent.data MessageEvent.source MessageEvent.lastEventId