Blocked a frame with origin "file://" from accessing a cross-origin frame

[ghost]

Issue Details

• Electron Version:
  • 5.0.4+, 6.0.0+
• Operating System:
  • MacOS 10.14.6, Win 7, Win 10
• Last Known Working Electron version:
  • 5.0.3

Expected Behavior

When I use native chrome window.open function, I'd like to have windows communication way using window.opener.

Actual Behavior

When I try to access data stored in parent window, I got security error:

Uncaught DOMException: Blocked a frame with origin "file://" from accessing a cross-origin frame.

No matter both windows origin is 'file:'.

To Reproduce

Sample in attachments
To reproduce:

npm i
npm start

Reload document (cmd+R)
Click "New child window"
Observe child window console

electron-quick-start.zip

[alper-teke]

Can we get a feedback about this please? It's blocking us to use latest versions of electron. Thanks a lot

[rpastro]

Any feedback on this issue?

[rpastro]

I haven't looked in detail, but it seems that the problem could have been introduced by #18614.

[MarshallOfSound]

Unique file:// URLs are all considered on different origins for security reasons, this is the same behavior as a browser

[rpastro]

@MarshallOfSound This is a scenario where the electron app is opening a second window using window.open function. The origin is the same on both windows. This is a false match for a cross origin issue since all files are under the electron app itself.

Please take a look at the attached sample application to see the problem.

[MarshallOfSound]

@rpastro This is not a false match. As I explained different file:// URLs are considered on different origins for security reasons. If you want to do this you should use a custom protocol as that follows traditional protocol://[domain]/[path] rules that the file:// protocol does not follow

[rpastro]

@MarshallOfSound Regarding the comparison with the browser. This would be equivalent to a web application opening another window for a different page in the same domain, which is allowed and we are actually using in our web application.

[rpastro]

@MarshallOfSound How can I use a different protocol than file:// to load a page that is packaged together with the electron app itself? Again, this has always been allowed in electron and it was broken in v5.0.4. The rules for file:// protocol should follow the same rules as other protocols and should consider the 'domain' itself. For an electron app the domain would be all files packaged as part of the app (i.e domain is __dirname)

[MarshallOfSound]

This would be equivalent to a web application opening another window for a different page in the same domain, which is allowed and we are actually using in our web application.

No it's not the same, it's on the file:// protocol. That changes everything.

The rules for file:// protocol should follow the same rules as other protocols and should consider the 'domain' itself.

No... They shouldn't. I'm sorry but the file:// protocol is an exception to all normal rules, you can use the electron.protocol module to register your own custom protocol that will follow the normal rules.

[rpastro]

@MarshallOfSound regarding your suggestion. Are you saying that I would not have the CORS . issue if I create a custom protocol that has the same effect as the file:// protocol, similar to the example in https://electronjs.org/docs/api/protocol?

I'm assuming this also means that I would have to load all my windows using this custom protocol.

[jon-heard]

I am also struggling with cross-origin issues. Am I right in thinking that if you want different windows of your application to work together you have to be running a webserver alongside electron?

I looked at the protocol api, but it doesn't really explain how to use protocols once you've set them up.

[jon-heard]

I've come to realize that if you have multiple windows, the proper way to communicate between them is by using the main process as a liason. This can be done through IPC. This would mean that you'd also have to initiate each window through the main process (again, can be done through IPC).

My particulars are a bit different as I have a parent window and an iframe, so there is no main process between them. However, I have found a solution that allows for cross-origin communication: Window.postMessage.
I've provided an explanation here.

[moughxyz]

Related: #18214

[ghost]

@MarshallOfSound, in any case, if it relates to security, there is an security issue in electron. Without main window reload, my desired behavior is working (each even reload change result). So you need pay attention to it.

But honestly I didn't understand how behavior of chromium is changed within electron version change from 5.0.3 to 5.0.4. I hope that this could become like feature that is disabled by default.

I guess load files stored in same asar archive has nothing common with tab isolation solving Spectre vulnerability and could be treated as same origin. There is no way now to have simple communication layer parent-child to grab some classes/methods/data.

[moughxyz]

@MarshallOfSound should different file:// paths be able to share localStorage? I'm seeing that they are indeed able to read each other's values: #21260

[clusterberries]

If somebody is looking for workaround, I found a solution: protocol.interceptFileProtocol allows to intercept file:// as well. So if you have a window /project/index.html and you need to load /project/child.html using window.open, do the following:

• load /project/index.html#child, so it will be interpreted as the same origin

• replace index.html#child with child.html in main process:

   protocol.interceptFileProtocol('file', (request, cb) => {
        let url = request.url.replace(/file:[/\\]*/, '');
        url = decodeURIComponent(url);
        url = url.replace(/\/index\.html#child.*$/, '/child.html');
        cb(url);
    }, err => console.log(err));

[chenweihan]

use the electron protocol.registerSchemesAsPrivileged. eg: customFileProtocol app://. It's can be solved.

https://www.electronjs.org/docs/latest/api/protocol#protocolregisterschemesasprivilegedcustomschemes

eg: https://nklayman.github.io/vue-cli-plugin-electron-builder/ It.s use protocol.registerSchemesAsPrivileged

[SuperKirik]

@chenweihan thanks a lot ! this solution worked for me 😺