什么是 window.origin？

Posted 2023-02-27

【中文标题】什么是 window.origin？

【英文标题】：What is window.origin?

【发布时间】：2019-08-22 09:43:42

【问题描述】：

window.origin 是什么？ the usual place 中似乎没有记录。

看起来它可能与window.location.origin 非常相似——例如，在 Stack Overflow 上，两者都返回

https://***.com

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

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

https://stacksnippets.net
null

嵌入的 sn-p 在 iframe 内 没有 allow-same-origin。如果您更改 iframe，例如，如果您编辑 Stack Overflow 的 html 并手动添加属性：

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

然后运行sn-p，得到：

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

在<iframe>s 的其他网站上也有同样的行为。

Google 似乎没有关于该主题的任何权威链接。搜索exact phrase + javascript 给出了许多与iframes 和postMessage 相关的结果，但没有准确描述window.origin 的具体含义。

从子 iframe 调用 postMessage 似乎会导致父窗口收到一条消息，其中 origin 属性与子框架的 window.origin 匹配 - 如果没有 allow-same-origin，则为 null，否则好像和孩子的window.location.origin一样。

以上是我认为我通过猜测和检查得出的结论，但我还不确定。非常感谢您的确认/解释，最好附上权威来源的链接。

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/…

developer.mozilla.org/en-US/docs/Web/API/Document/origin

哇哦，谢谢。我没想到要搜索WindowOrWorkerGlobalScope.origin

所以我得到 50 个代表？ ;)

@mplungjan 当然！相关信息看起来是 here 和 here（请参阅同一页面上的 allow-same-origin 了解它影响 iframe 的原因），一个“独特的不透明来源”-> 'null'在各种条件下设置，否则分配一个元组原点（如window.location.origin）。

【参考方案1】：

WindowOrWorkerGlobal.origin返回环境的来源，Location.origin返回环境的URL来源。

不幸的是，Stack-Snippets 以 null 为来源的帧会成为一个令人困惑的例子......

冒着解释the specs themselves 的风险，假设我们在https://example.com 上，然后从那里创建一个没有src 属性的新

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);

Live example

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

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

---

如果您想深入了解一下规范，请参阅前面示例的相关步骤：

frame 创建： https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element:about:blank

如果元素没有指定src 属性，或者它的值为空字符串，则让url 为URL“about:blank”。

为frame 创建新的浏览上下文时 https://html.spec.whatwg.org/multipage/browsers.html#creating-browsing-contexts:about:blank

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

所以这里已经确定新浏览上下文的origin是invocationOrigin，即确实创建@的浏览上下文的origin 987654349@，而url，由location使用，是"about:blank"。

---

现在 StackSnippets 沙盒框架的情况有点特殊，因为它们确实有一个 src 并因此有一个 tuple-origin url，但是由于它们的 sandbox 属性使得它们的 来源 不透明，它们的行为与前面示例中公开的相反，使self.origin 返回"null" 和location 返回iframe 的src 的URL。

【参考方案2】：

非常有趣的问题！ ?

我们可以从一些调查开始 - 让我们看看 window 的输出

console.log(window)

那个文件很大... Window 接口代表一个包含 DOM 文档的窗口； document 属性指向加载在该窗口中的 DOM 文档，并描述了 Window 和 WorkerGlobalScope 共有的几个特性。

more details here

但是你想看到一个非常特殊的属性window.origin。

window.origin 如您所见，对于堆栈溢出（代码 sn-p）来说，这很无聊，为 window 返回的 json obj 带来：

"origin": "null"

这个响应是窗口告诉我们原点不同并且我们不允许该窗口同源的方式。 iframe 很普通的效果，你自己扣的！

您还看到 window.location 不那么无聊...因为它包含更多数据，因为 Location 接口表示它链接到的对象的位置 (URL)，很酷的是任何更改在其上完成的操作会反映在与之相关的对象上。所以这就是我们在这里没有得到 null 的原因。

window.location...

"location": 
    "ancestorOrigins": 
        "0": "https://***.com",
        "length": 1,
        "item": function item() 
            [native code
            ]
        ,
        "contains": function contains() 
            [native code
            ]
        
    ,
    "origin": "https://stacksnippets.net",
    ...

【参考方案3】：

位置描述了当前页面的 URL。它可以通过窗口获得。位置属性。

<a id='foo' href='#bar'>Go to #bar</a>


<div style='height: 1000px'></div>


<a id='bar' href='#foo'>Go to #foo</a>
<script>
  var printHash = function() 




    console.log("'" + window.location.hash + "'");

  ;
  // Print initial hash
  printHash();
  window.onhashchange = printHash;
</script>`enter code here`

更多信息： Internet Explorer 无法访问 window.location.origin，这很糟糕，因为它是一个非常方便的变量，但我们可以通过相当直接的检查使其工作，因为我们访问 .origin；

if (!window.location.origin) 
  window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');

【参考方案4】：

我认为它没有记录，因为两者都是相同的，几乎没有区别， 在大多数情况下，您选择使用哪个选项并不重要。然而，在少数情况下，其中一个优于另一个，例如：

如果在 iframe 或另一个已经与当前窗口不同来源的窗口中设置新 URL（例如 iframe 的域与其加载的文档不同并且您想要更改），则同源策略冲突iframe 的 URL）将使用窗口。设置新 URL 的位置。这是因为 location.href 在从不同来源（域）调用时是只读的。 如果在 JavaScript 中严格使用 use 可能会在使用 window.位置，因为您实际上是在将字符串分配给对象，所以这里最好使用完整的 window.location.href。

参考this question。

【讨论】：

它 记录在 cmets 的链接中 - 如果您描述并参考描述行为的官方规范（请参阅我的评论 - “独特的不透明来源”很重要短语），我会奖励赏金:)