什么是window.origin? [英] What is window.origin?

问题描述

什么是window.origin?它似乎没有记录在通常的地方.

What is window.origin? It doesn't seem to be documented in the usual place.

它看起来可能与window.location.origin非常相似-例如，在此处的Stack Overflow中，两者都返回

It looks like it might be very similar to window.location.origin - for example, here on Stack Overflow, both return

https://stackoverflow.com

但是在iframe中，它们是不同的:

But inside an iframe, they're different:

console.log(window.location.origin);
console.log(window.origin);

https://stacksnippets.net
null

嵌入的代码段位于iframe 无 allow-same-origin中.例如，如果您更改iframe，则编辑Stack Overflow的HTML并手动添加属性:

The embedded snippet is inside an iframe without allow-same-origin. If you change the iframe, for example, if you edit Stack Overflow's HTML and manually add the attribute:

<iframe name="313b857b-943a-7ffd-4663-3d9060cf4cb6" sandbox="allow-same-origin allow-forms allow-modals allow-scripts" class="snippet-box-edit" frameborder="0" style="">
                                                             ^^^^^^^^^^^^^^^^^^

然后运行该代码段，您将得到:

and then run the snippet, you get:

https://stacksnippets.net
https://stacksnippets.net

在具有<iframe> s的其他网站上也表现出相同的行为.

The same sort of behavior is exhibited on other sites with <iframe>s.

Google 在该主题上似乎没有任何权威性链接.搜索精确短语 + Javascript会得出许多与iframe s和postMessage，但没有确切描述window.origin 实际上是什么.

Google does not appear to have any authoritative links on the subject. Searching for the exact phrase + Javascript gives many results related to iframes and postMessage, but no precise description of what window.origin actually is.

从子级iframe调用postMessage似乎导致父窗口接收到一条消息，该消息的origin属性与子帧的window.origin相匹配-不带allow-same-origin的是null，否则看起来与孩子的window.location.origin相同.

Calling postMessage from a child iframe appears to result in the parent window receiving a message with the origin property matching the window.origin of the child frame - without allow-same-origin, it's null, otherwise it looks like it's the same as the window.location.origin of the child.

以上是我思考的想法，我从猜测和核对中得出了结论，但我距离目标还很遥远.非常感谢您的确认/解释，最好是带有权威来源的链接.

The above is what I think I've figured out from guessing-and-checking, but I'm nowhere near certain. I'd appreciate a confirmation/explanation, preferably with a link to an authoritative source.

推荐答案

Location.origin 返回环境URL的来源.

WindowOrWorkerGlobal.origin returns the origin of the environment, Location.origin returns the origin of the URL of the environment.

不幸的是，以堆栈片段为空的框架会导致一个令人困惑的示例...

Unfortunately Stack-Snippets null-origined frames will make for a confusing example...

冒昧解释规范本身 ，假设我们在https://example.com上，然后从那里创建一个新的< iframe>元素，而没有src属性:

At the risk of paraphrasing the specs themselves, let's say we are on https://example.com and from there, we create a new <iframe> element without an src attribute:

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

实时示例

我们的frameWin的location是"about:blank"，它的location.origin是null，因为"about:blank"是

The location of our frameWin is "about:blank" and its location.origin is null, because "about:blank" is an opaque origin.

但是，框架的窗口frameWin将其自己的origin设置为父窗口("https://example.com")之一，该父窗口是在初始化frameWin的浏览上下文时设置的.

However, the frame's Window frameWin got its own origin set to the one of the parent Window ("https://example.com") which was set when frameWin's browsing context got initialized.

如果您希望稍微了解一下规格，则可以参考上一个示例的相关步骤:

If you wish a little diving into the specs here are the relevant steps for the previous example:

• 在frame创建时: https://html.spec .whatwg.org/multipage/iframe-embed-object.html#the-if​​rame-element:about:blank

• At frame creation: https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element:about:blank

如果元素未指定src属性，或者其值为空字符串，则将url设为URL"about:blank".

If the element has no src attribute specified, or its value is the empty string, let url be the URL "about:blank".

• 为frame创建新的浏览上下文时 https://html.spec.whatwg.org /multipage/browsers.html#creating-browsing-contexts:about:空白
• When creating a new browsing context for frame https://html.spec.whatwg.org/multipage/browsers.html#creating-browsing-contexts:about:blank

如果invocationOrigin不为null，且url为about:blank，则返回invocationOrigin.

If invocationOrigin is not null, and url is about:blank, then return invocationOrigin.

因此，在这里已确定新的浏览上下文的origin是invocationOrigin，即确实创建了frame，而location使用的url是"about:blank".

So here it has been determined that origin of the new browsing context is invocationOrigin, i.e the origin of the browsing context that did create frame, while url, used by location, is "about:blank".

现在，对于StackSnippets沙盒框架而言，它有点特殊，因为它们确实具有src并因此具有

Now the case of StackSnippets sandboxed frames is a bit particular in that they do have an src and thus a tuple-origin url, but since their sandbox attribute makes their origin opaque, they'll behave at the inverse of what is exposed in the previous example, making self.origin return null and location return the iframe's src's URL.

这篇关于什么是window.origin?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！