No internet connection
  1. Home
  2. General

Tiny Pilot Pro Http Server, Caddy Http Reverse Proxy, and Logging into TinyPilot within an iFrame

By Paul DiMaggio @pauldimaggio2021-02-26 18:39:23.014Z

Wanted to share a discussion I had with Michael so that others with a similar environment can benefit.

In my environment at home, I'm running Home Assistant (https://www.home-assistant.io/). Home Assistant is basically my portal to controlling everything in my home. I have a bunch of different services running in my home network on different webservers - a basic file server, picoreplayer for home audio, Blue Iris for security camera software NVR, NoMachine webserver for access to a Windows jump box, and now Tiny Pilot for access to a Chromebook (for IoT devices that need a mobile app on the same subnet).

I access Home Assistant via https. The Home Assistant developers have a cloud service called Nabu Casa that maintains certs and provides connectivity without me needing to open any ports in my router. If I add my http services as iFrames to pages in Home Assistant, they won't render because they need to have valid ssl certs.

So, I spun up a Caddy Server (https://caddyserver.com/) on one of my machines to act as a reverse proxy that also automatically handles requesting/renewing Let's Encrypt certificates for everything. When I hit the one port I have open on my router via my DuckDNS domain, traffic gets directed to my Caddy server which then farms the traffic to the appropriate internal webserver depending on the subdomain preceding my DuckDNS domain (for example - nomachine.<myduckdnsdomain>.duckdns.org). This helps keep me sane since I don't have to setup certificate renewal for every single webserver or open a bunch of ports on my router.

TinyPilot Pro's default Nginx Http configuration /etc/nginx/sites-enabled/tinypilot.http.conf redirects all traffic to https by default. Since Caddy is an http reverse proxy, I needed the TinyPilot to stop auto redirecting to https. To accomplish this, Michael provided an updated nginx http configuration (i.e. updated /etc/nginx/sites-enabled/tinypilot.http.conf) that can be found here:

https://gist.github.com/mtlynch/b38a6a423b69e223c46196458eeb0d18

So, now I was able to put TinyPilot into an iFrame within Home Assistant. Unfortunately, when I went to log into TinyPilot within that iFrame, I received an error...

The CSRF session token is missing

In order to remedy this and allow login within an iFrame I modified a specific part of /opt/tinypilot/app/main.py...

this...

app.config.update(
    REMEMBER_COOKIE_HTTPONLY=True,
    SECRET_KEY=os.urandom(32),
    SESSION_COOKIE_HTTPONLY=True,
    SESSION_COOKIE_SAMESITE='Strict',
    TEMPLATES_AUTO_RELOAD=True,
    WTF_CSRF_TIME_LIMIT=None,
)

became this...

app.config.update(
    REMEMBER_COOKIE_HTTPONLY=True,
    SECRET_KEY=os.urandom(32),
    SESSION_COOKIE_HTTPONLY=True,
    SESSION_COOKIE_SAMESITE='None',
    SESSION_COOKIE_SECURE=True,
    TEMPLATES_AUTO_RELOAD=True,
    WTF_CSRF_TIME_LIMIT=None,
)

Note that SESSION_COOKIE_SAMESITE='Strict', became SESSION_COOKIE_SAMESITE='None', and I added the line SESSION_COOKIE_SECURE=True,

I hope this can help other folks in the future.

Thanks again to Michael for awesome advice/support figuring this out!

  • 1 replies
  1. Michael Lynch @michael2021-02-26 20:45:57.167Z

    Thanks so much for writing this up, Paul! Glad you got it working!