Unable to display OctoPrint inside Home Assistant iframe

What is the problem?

I get page refused to connect when trying to display the OctoPrint page in a Home Assistant tab (iframe)

What did you already try to solve it?

Tried both octopi.local and the IP address.

Have you tried running in safe mode and if so did it solve the issue?

No change.

Complete Logs

octoprint.log, serial.log or output on terminal tab at a minimum, browser error console if UI issue ... no logs, no support! Not log excerpts, complete logs.)

This does not get logged as it comes from home assistant

Additional information about your setup

OctoPrint version, OctoPi version, printer, firmware, browser, operating system, ... as much data as possible

Chrome browser
Home Assistant 0.116
OctoPrint 1.4.2
Python 3.7.3
OctoPi 0.18.0

I managed to find the setting as per this post Multiple octoprint instances in one webpage (html) using iframe doesn't work and the login page does show now, however it just asks me for login over and over.

Any ideas?

Did you allow embedding in OctoPrint settings -> Server?

Yes, and also enabled CORS, but still no luck, can't get past the login prompt.
Tried multiple browsers too, same thing.

Right so... Now, I know this is not the recommended practice but as long as you don't have the OctoPrint instances exposed to the Internet, try disabling the login/authentication altogether to rule out/confirm it is a login/session problem (I don't use the embedding feature so basically just following a line of troubleshooting I usually do on my local web server when working on a new site).

I shall try that and see.
Also the user has admin and operator rights. Perhaps more from this list are needed?

An admin should be able to do everything so no need for extra permissions.

It will get logged by OctoPrint, all web requests do. That way you can see if it is an issue with the client or server. Opening the browser error console will also help, something may be logged there.

The logs seem to think everything is ok:

2020-10-26 15:37:37,445 - octoprint.access.users - INFO - Logged in user: admin
2020-10-26 15:37:37,447 - octoprint.server.api - INFO - Actively logging in user admin from ::ffff:192.168.0.68
2020-10-26 15:37:37,519 - octoprint.server.util.sockjs - INFO - Client connection closed: ::ffff:192.168.0.68
2020-10-26 15:37:37,702 - octoprint.server.util.sockjs - INFO - New connection from client: ::ffff:192.168.0.68
2020-10-26 15:37:42,683 - octoprint.server.util.flask - INFO - Passively logging in user admin from ::ffff:192.168.0.68
2020-10-26 15:37:42,684 - octoprint.access.users - INFO - Logged in user: admin
2020-10-26 15:37:42,826 - octoprint.server.util.sockjs - INFO - Client connection closed: ::ffff:192.168.0.68
2020-10-26 15:37:43,303 - octoprint.server.util.sockjs - INFO - New connection from client: ::ffff:192.168.0.68
2020-10-26 15:37:43,331 - octoprint.server.util.flask - INFO - Passively logging in user admin from ::ffff:192.168.0.68
2020-10-26 15:37:43,332 - octoprint.access.users - INFO - Logged in user: admin
2020-10-26 15:37:44,461 - octoprint.server.util.sockjs - INFO - User adminlogged in on the socket from client ::ffff:192.168.0.68

How do I turn off the login/authentication so I can try that? Can't seem to find it in the settings

So I added this to the config.yaml:

accessControl:
    enabled: true
    autologinLocal: true
    autologinAs: admin
    localNetworks:
    - 192.168.0.0/24

And when I hit the server in a chrome page it goes straight in without asking for username/password however when trying to access it from the home assistant iframe I get this:

The chrome debug says this:

image

And the octoprint log:

2020-10-27 18:23:30,814 - octoprint.server.util.flask - INFO - Passively logging in user admin from ::ffff:192.168.0.68
2020-10-27 18:23:30,815 - octoprint.access.users - INFO - Logged in user: admin
2020-10-27 18:23:31,788 - octoprint.server.util.sockjs - INFO - User admin logged in on the socket from client ::ffff:192.168.0.68

Any ideas?

well, been down this rabbit hole also...

Tried iframe and Nginx reverse proxies but all without success.

Anyone made some progress?

With the iframe you have to enable the option in OctoPrint to allow it.

thanks, but after this you are stuck in the login-screen-loop.

My HA is ssl, and the iframe was also integrated as ssl.

I guess, all non-ssl could be working. But with ssl enabled the cookies won't get accepted, even when adjusting the config.yaml with samesite: none and cookies.secure: true.

Or am i missing something here?

Take a look at this ticket, and see if you can make sense of it:

The comments below sound relevant to you, my link was a direct one.

Sounds to me like the browser can't validate the SSL, so it refuses to send anything useful to the server.

someone on Discord also seemed to indicate that 99% of these issues are related to SSL and if you look in your browser's developer console it may shed some light into the problem.

Using http only so not sure how SSL comes into play but yeah still not working to this day for me.

Well, a few cups of coffee later:

I created some Home Assistant addon that worked way better than all those iframe stuff. 10MegaBytes of RAM I waste happily!

It is based on some haproxy and by using some rewrite magic it was done.

Have a try, and please provide feedback: https://github.com/MaxWinterstein/homeassistant-addons/

2 Likes

This may even be unnecessary in the future as I think Frenck from the HA team is working on a bundled OctoPrint install with HA directly as well.

Just tried and it works as expected (except the camera as mentioned)
Also I updated an add-on in octoprint which caused it to restart but it didn't auto refresh - no biggie just refresh HA page but feedback is feedback :slight_smile:

thx :slight_smile: will have a look at the webcam and the refresh stuff, might be just some small adjustments :v: