Table of Contents

About

The origin is a property of a resource that is used as the scope of privilege for scripts used by user agents (browser)

The origin is calculated and set by the browser (ie client) on each resource from the fetch data.

Origins are fundamental for the Web’s security model.

Syntax

The origin is the combination of

of the request URI (ie URL) that has fetch the resource

The definition from respectively, the rfc6454 (#section-7) and the RFC 3986

# rfc 6454
scheme "://" fqdn host [ ":" port ]

# rfc 3986
<scheme>, <fqdn host>, <port>

But this is more complicate than that, to see the details and be more precise, you can see the Browser Origin documentation

Why the full qualified name and not the top-level domain name as host value ?

The fully qualified host name is used and not the “top-level” domain because the trust relationships between host names vary by deployment.

For example, at many educational institutions:

they then should not be part of the same origin to inhabit the same protection domain.

Ref

Value

Javascript

You can get the origin value calculated by the browser

console.log('In this iframe, the `self.origin` value is '+self.origin);
console.log('In this iframe, the `window.origin` value is '+window.origin);
console.log('In this iframe, the `document.domain` domain has the `full qualified domain value (FQDN)` and is '+document.domain);

let pageUrl = new URL(parent.location.href)
console.log('In this iframe, the origin of the parent page is '+pageUrl.origin);
let ancestorsOrigins = location.ancestorOrigins;
console.log('In this iframe, the ancestors origin (all parent of parent) is '+location.ancestorOrigins[0].toString());

Developers are strongly encouraged to use self.origin over location.origin. Ref

Demo:

var frame = document.createElement("iframe")
frame.onload = function() {
  var frameWin = frame.contentWindow
  console.log(frameWin.location.origin) // "null"
  console.log(frameWin.origin) // "https://origin"
}
document.body.appendChild(frame)

Devtool

You can see how User agents categorize resource according to its “origin” with devtool and the Sources tab. URIs are grouped together into origins, which represent protection domains.

Browser Scripts Classed By Origin

Equality Example

Is Equal

When each of the URIs has the same scheme, host, and port components, they are from the same-origin

Example: All of the following resources have the same origin

Two origins are said to be the same origin if the algorithm returns true.

Is Not Equal

Each of the following resources has a different origin from the others. In each case, at least one of the scheme, host, and port component will differ from the others in the list.

Security

Origins are fundamental for the Web’s security model.

Authority

The privilege is mostly known as the authority (not to confound with authority of the URI. authority in the context of web security is a privilege that is granted or not by the user agent (browser).

Active content resources are granted the origin's full authority, whereas passive content are not.

Resource Type Example Authority Grant
Passive content image No authority granted - no access to the objects and resources available to its origin.
Active content HTML document, scripts within (or imported into) Granted the origin's full authority - they can access every resource in its origin.

User agents determine how much authority to grant a resource by examining its media type.

Ref

Same-origin

same-origin policy

  • Two actors that share an origin are assumed to trust each other and to have the same authority.
  • Actors with differing origins are considered potentially hostile versus each other, and are isolated from each other to varying degrees.

user agents isolate content retrieved from different origins and permit controlled communication between origins.

  • user agents allow content retrieved from one origin to interact freely with other content retrieved from that origin,
  • user agents restrict how that content can interact with content from another origin. implementation are application specific and are then defined in HTML and WebSockets RFC6455.

Request Type

If the destination server of a request and the script that creates this request have the same origin, the request is said to be of the same-origin, otherwise it's called a cross-origin request

The HTTP header field, named Origin is added by the browser to indicate to the server the origin of the code that created the HTTP request.

Origin-Policy Error

To see the chrome error type in the address bar: chrome://interstitials/origin_policy

Documentation / Reference