Resolve iframe CORS errors - Fix #19724

[jwoglom]

Breaking change

Proposed change

Resolves a regression introduced in homeassistant 20240207 which prevented HA from functioning when loaded inside an iframe on a different domain, with appropriate CORS settings set.

To test, I created iframe.html:

<iframe src="http://localhost:8123/lovelace/0" height="100%" width="100%"></iframe>

and served it with

python3 -m http.server 8223

Then opened http://localhost:8223/iframe.html and observed that, with the below http.use_x_frame_options: false configuration, it did not load:

With this PR, the page loads:

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

http:
  use_x_frame_options: false

This config may be used in addition to a reverse proxy in front of HomeAssistant which sets content security policy settings to allow cross-iframe requests from specific domains.

Additional information

• This PR fixes or closes issue: fixes Frontend stopped loading inside an IFRAME after upgrading to 20240207.0 #19724
• This PR is related to issue or discussion: Frontend stopped loading inside an IFRAME after upgrading to 20240207.0 #19724
• Link to documentation pull request: n/a

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works -- not sure if this is easily doable as it would require significant integration testing

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io -- n/a

[shannonhochkins]

What's the intention of this function? simply to just try and find a parent iframe anywhere up the tree by name? else return the parent window?

This could be a lot smarter if the original intention is to ensure the window returned is the window by MAIN_WINDOW_NAME

import { MAIN_WINDOW_NAME } from "../../data/main_window";

export const mainWindow = (() => {
  try {
    let currentWindow = window;
    const targetWindowName = MAIN_WINDOW_NAME;

    // Function to safely check window name against target
    const isTargetWindow = (win) => {
      try {
        return win.name === targetWindowName;
      } catch {
        return false; // Security error or other issues
      }
    };

    // Check current window first
    if (isTargetWindow(currentWindow)) {
      return currentWindow;
    }

    // Iteratively check parent windows
    while (currentWindow.parent && currentWindow !== currentWindow.parent) {
      currentWindow = currentWindow.parent;
      if (isTargetWindow(currentWindow)) {
        return currentWindow;
      }
    }

    // If nothing found, safely try to access top, if different from current
    if (currentWindow !== window.top) {
      return isTargetWindow(window.top) ? window.top : window;
    }

    // Default to current window if no match found
    return window;
  } catch (error) {
    return window; // In case of any error, fallback to current window
  }
})();