JavaScript WorkerLocation origin Property

What You’ll Learn

The origin property of a WorkerLocation object returns the worker’s origin as a string. Learn self.location.origin, how it differs from href and host, and what blob workers report—with five examples and try-it labs.

Introduction

An origin is the combination of scheme, host, and port that defines a security boundary on the web. Inside a worker, self.location.origin returns that origin for the worker script URL.

MDN’s classic idea: on a page like the MDN docs site, self.location.origin can look like "https://developer.mozilla.org:443".

Understanding the origin Property

A read-only instance property on WorkerLocation that returns the worker’s origin as a string.

• Value — a string (origin form).
• vs href — origin omits path, search, and hash.
• Access — self.location.origin or location.origin inside the worker.
• Workers only — not available on the main document thread.
• Baseline Widely available on MDN (since September 2016).

📝 Syntax

Read the property inside a worker script:

const result = self.location.origin;
// e.g. "https://developer.mozilla.org:443"

Value

A string.

Typical pattern (MDN idea)

// Inside a Web Worker
const result = self.location.origin;
self.postMessage(result);

⚖️ origin vs Related Ideas

Examples Gallery

Examples follow MDN WorkerLocation.origin. Labs use blob workers and compare origin with related URL parts.

const result = self.location.origin;
// e.g. "https://developer.mozilla.org:443"
self.postMessage(result);

https://developer.mozilla.org:443

self.postMessage({
  origin: location.origin,
  href: location.href
});

origin: …
href: blob:http://…

self.postMessage({
  origin: location.origin,
  protocol: location.protocol,
  href: location.href
});

protocol: blob:
origin: (browser-dependent)
href: blob:…

// Worker
self.postMessage(location.origin);

// Main
worker.onmessage = (e) => {
  console.log("worker:", e.data);
  console.log("page:", location.origin);
};

worker: …
page: http://localhost:3002

// Worker
self.postMessage(location.origin);

// Main
worker.onmessage = (e) => {
  console.log(e.data === location.origin);
};

sameAsPage: false

🚀 Common Use Cases

• Log the worker origin for security / debugging panels.
• Compare worker origin with the page origin.
• Distinguish blob workers from http(s) workers.
• Pair with href when diagnosing script URL issues.
• Teach same-origin concepts using workers.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since September 2016) — no Deprecated / Experimental / Non-standard banner.
• Only available in Web Workers (WorkerLocation / self.location).
• Read-only string; no path, search, or hash.
• Blob worker origins can differ from normal http(s) origins.
• Related learning: href, host, hostname, Worker().

💡 Best Practices