由 window 打开的 Window.open 不会关闭

Question

I'm having problems with a piece of code that has worked before for years, but seems to have stopped working now.

I'm opening a window with a login form and I'm listening via a WebSocket for events regarding that login. After the login was successful, I want to close the window (that my script has opened and kept the reference to) after a short moment. I'm using the following code:

const windowManager = {
  window: null,
  eventType: null,
}
function openWindow({ url, eventType }) {
  windowManager.window = window.open(url)
  windowManager.eventType = eventType
}
function closeWindow({ eventType }) {
  if (windowManager.window && windowManager.eventType == eventType) {
    setTimeout(() => {
      windowManager.window && windowManager.window.close()
      windowManager.window = null
    }, 100)
  }
}

I have confirmed that windowManager.window.close() is called and does not thrown an error. I have also extracted the code from the application and tested it separately and it still won't close the window. As I said, this piece of code has worked before and was not changed in the past two years or so.

I'm using the following browsers:

• Safari 15.3
• Firefox 97.0b9 (Developer Edition)
• Chromium 94.0.4606.61

I'm grateful for any pointers which could help resolve this issue. Thanks a lot!

Answer 1

After figuring out that the above code worked totally fine with other sites like Google or GitHub, I found that the Cross-Origin-Opener-Policy header in our auth backend (which was the site that was opened with the code) is the culprit. We had just updated Helmet to version 5 which added the header by default.

Our solution was to set Cross-Origin-Opener-Policy to same-origin-allow-popups on both source and target window (which are hosted on the same origin, but served by different servers). It also worked when setting it to unsafe-none for the target window without setting it at all on the source window.