Web Resource - Origin

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





Discover More
Authentication - Cross Origin Authentication

When the authorization_endpoint is not from the same origin, this is a cross-origin' authentication. A redirect to the endpoint where the authentication happens there. The user's credentials...
Browser
Browser - Fetching Resources (Request/Response)

This article is fetching (http request/response) in the browser. User agents can implement a variety of transfer protocols to fetch resources such as: HTTP : , ... Form FTP ... rendering...
CSS - Font

This page is font in CSS and html. From a web perspective, a font is considered to be a media resource and can be included in any page from any origin. the font-size is set on the body to be able...
Http Cache Partitioning Example
HTTP - Cache Store

A cache store is an http cache component that caches the http response if the cache control header permits it. There is two type of cache: intermediate cache (proxy) client cache (user-agent cache...
HTTP - Cross-Origin Request

A cross-origin request is a request that was not created by code (html page, javascript, ...)) of the same origin. cross site requestsame origin requestcross-originsame origin A page may contain images...
Origin Http Header
HTTP - Origin Server (Header Field)

The Origin header is: a header field added to a request by the browser (ie client) with the origin value that indicate the source of the code (HTML, Javascript, ...) that created the request....
Chrome Devtool Har
HTTP - Request

An HTTP request is a message sent from a client to a server. It's the first part of a fetch, the second being the response. A request message has: a first line called the request...
HTTP - Same Origin Request

A request is a same-origin request if: the request’s origin and the origin of request’s current url page are the same. requestsame-origincross origin Two HTTP requests havenot the same origin...
Cors Blocked
How to resolve a blockage due to a CORS policy error? A getting started guide

A detailled step by step guide on why you can get a CORS policy violation and how to simply resolve it
Media resources are images, JavaScript, CSS, or fonts

Media resources are resources that are embedded into an page. They are from the following type: images, Script (JavaScript), CSS stylesheets, fonts iframes, videos. audio Or external...



Share this page:
Follow us:
Task Runner