Run Home Assistant in an iframe

Configuration
1

Hi,

I have a problem with running HA in an iframe, that I can’t solve with Google, so I would like to try the power of local community :slight_smile:

I have a perfectly working HA instance on my domain via nginx https reverse proxy - something like https://hass.example.cz. I also have my own simple web application, that I’m using as a simple catalog of my own home services - HA is one of them. And in this simple web application, I’m showing my home services in an iframe. Till the last week, HA was perfectly working in the iframe, but now, I get Uncaught DOMException: Blocked a frame with origin "https://hass.example.cz" from accessing a cross-origin frame. I was suspecting some HA update, but downgrade works the same, so my new main suspect is the new Chrome version with some stricter CORS policy. It don’t work in Firefox too with similar error message Uncaught DOMException: Permission denied to access property "addEventListener" on cross-origin object.... I tried to add CORS header to nginx proxy add_header Access-Control-Allow-Origin *; - but it didn’t help and now, I don’t know what to try next.

I will be glad for any hint :slight_smile:

Thanks.

2

This is a known issue, I have this problem too.

3

Thanks for the link, it saved my time :slight_smile:

4

FYI: the 2021.6 update solves the iFrame problem!

5

Great news! Thanks.

7

i thought i add a bit of what i did to this thread so someone in the future can take advantage. I manage at least 4 instances of Home Assistant and i wanted to have them all show in one page. I used iFrames for that, thanks to ChatGPT :slight_smile:

here’s how it looks:

Screenshot 2023-08-15 at 15.49.55
Screenshot 2023-08-15 at 15.49.551920×1173 114 KB

here’s the code that works (not in chrome if the index.html is stored on your computer, i might move to a self-hosted later and will let you know if it works or not on chrome):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Assistant</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            border: 0;
        }

        .controls {
            padding: 10px;
            background-color: #f0f0f0;
            text-align: center; /* Center the contents */
        }

        .box-container {
            display: flex;
            height: calc(100% - 40px); /* Adjusting for controls height */
        }

        .box {
            flex: 0; /* Initially hidden */
            height: 100%;
            overflow: hidden;
        }

        .visible {
            flex: 1;
        }

        iframe {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="controls">
        <label><input type="checkbox" onclick="toggleBox(0)" checked><a href="https://url1.com" target="_blank">HA 1</a></label>
        <label><input type="checkbox" onclick="toggleBox(1)" checked><a href="https://url3.com" target="_blank">HA 2</a></label>
        <label><input type="checkbox" onclick="toggleBox(2)" checked><a href="https://url4.com" target="_blank">HA 3</a></label>
        <label><input type="checkbox" onclick="toggleBox(3)" checked><a href="https://url4.com" target="_blank">HA 4</a></label>
    </div>
    <div class="box-container">
        <div class="box visible" id="box0"><iframe src="https://url1.com"></iframe></div>
        <div class="box visible" id="box1"><iframe src="https://url2.com"></iframe></div>
        <div class="box visible" id="box2"><iframe src="https://url3.com"></iframe></div>
        <div class="box visible" id="box3"><iframe src="https://url4.com"></iframe></div>
    </div>

    <script>
        var urls = [
            "https://url1.com",
            "https://url2.com",
            "https://url3.com",
            "https://url4.com"
        ];

        function toggleBox(index) {
            var box = document.getElementById('box' + index);
            if (box.classList.contains('visible')) {
                box.classList.remove('visible');
                box.innerHTML = '';
            } else {
                box.classList.add('visible');
                box.innerHTML = '<iframe src="' + urls[index] + '"></iframe>';
            }
        }
    </script>
</body>

</html>
1 Like