Why do I *inconsistently* get DOMException: Blocked a frame with origin "https://ec2b.foo.com" from accessing a cross-origin frame

Question

Here is my code

tl2010handle = window.open("/path/main.html", 'tl2010', 'statusbar=no,toolbar=no,scrollbars=no,locationbar=no,setResizable=no,width=840,height=600');
setTimeout(function() {console.log(tl2010handle.window.location.href)}, 2000); 

If I load my page as https://ec2b.foo.com/console/login2020.jsp I get DOMException: Blocked a frame with origin "https://ec2b.foo.com" from accessing a cross-origin frame.

If I add an entry 143.67.75.100 ec2b to /etc/hosts, and then load my page as https://ec2b/console/login2020.jsp it works and my console logs the href.

The mystery is that I am opening the window with a URL that does not specify an origin, so I don't understand how Chrome can complain that my request is cross-origin.

The code only exists on one server so there is no possibility that ec2b and ec2b.foo.com are different. Also confirmed with dig. I've tried this in both Chrome and Firefox with the same result, albeit that in the case of Firefox, the tl2010handle variable is unset in the first case, and set in the second case.

Answer 1

The mystery is that I am opening the window with a URL that does not specify an origin

You have a misconception about the Origin request header. The Origin is sent by the browser under these circumstances... in case of JavaScripts, the origin is inherited from the page that executes the script. The error message that you are getting indicates that your origin is set to: “https://ec2b.foo.com”

The code only exists on one server so there is no possibility that ec2b and ec2b.foo.com are different.

Note that same-origin does not mean same-ip. It means the protocol:host:port tuple should be exactly the same, which means foo.com, ec2b.foo.com and www.foo.com are all different origins (even though they all point to the same IP).

---

The error message indicates that your JavaScript's origin is set to: “https://ec2b.foo.com”... now in your JavaScript file, you open a new browser window, by running the following:

window.open("/path/main.html", ....); // <-- open a new browser window

You have not mentioned what is the URL that you see in this new window (I suspect it's "https://ec2b/path/main.html")... but it is certainly not “https://ec2b.foo.com”, that's why when you try to access the location.href of this new window, you are getting blocked because it's a Cross-Origin request.

According to MDN: Window.Open() returns a Window object, representing the newly created window:

The returned reference can be used to access properties and methods of the new window as long as it complies with Same-origin policy security requirements.

You can also try running the following script to find out the origin of your JavaScript file:

tl2010handle = window.open("/path/main.html", 'tl2010', 'statusbar=no,toolbar=no,scrollbars=no,locationbar=no,setResizable=no,width=840,height=600');
console.log(tl2010handle.origin); // <-- origin of your script file
/*
 * if you compare: tl2010handle.origin with the url display in tl2010handle window
 * it should clarify why you are having a cross-origin request.
 */