Search code examples
sslcloudflarestreamlitcname

SSL Issue - Blank page, won't load after linking custom domain on CloudFlare - First Website

My website deployed to Streamlit community cloud is displaying a blank page when visiting it from a custom domain

What I did

  • I wrote my site, linked my Github repo to Streamlit and deployed it
  • I then made two CNAME records linking my domain to the Streamlit site in Cloudflare dashboard where my domain was purchased and are managed. One CNAME record for the main URL, the other for "www"

Symptoms

  • When loading the site from the Streamlit link it works fine
  • When custom domain is tried the page is blank, only thing that loads is the Streamlit icon in the tab and Streamlit page title, nothing on the page itself, and not the icon or title I myself set

Are there any additional files I need in my app's root directory? Maybe some configuration step I missed? My current folder structure

  • app.py
  • requirements.txt
  • .streamlit folder with config.toml file inside

I tried changing several settings on Cloudflare:

  • Changed SSL to Full, when set to Flexible threw redirect error
  • Turned off Always use HTTPS
  • Turned off Automatic HTTPS Rewrites
  • Tried replacing CNAME records with A records pointing to the site's IP instead

Are there any other troubleshooting steps I should take? Some configuration step I missed?

EDIT I believe the issue has to do with SSL, I ran openssl s_client -connect <my site URL>:443 and received the following output:

    CONNECTED(00000005)
8679580928:error:1404B410:SSL routines:ST_CONNECT:sslv3 alert handshake failure:/AppleInternal/Library/BuildRoots/810eba08-405a-11ed-86e9-6af958a02716/Library/Caches/com.apple.xbs/Sources/libressl/libressl-3.3/ssl/tls13_lib.c:129:SSL alert number 40
---
no peer certificate available
---
No client certificate CA names sent
---
SSL handshake has read 7 bytes and written 287 bytes
---
New, (NONE), Cipher is (NONE)
Secure Renegotiation IS NOT supported
Compression: NONE
Expansion: NONE
No ALPN negotiated
SSL-Session:
    Protocol  : TLSv1.3
    Cipher    : 0000
    Session-ID: 
    Session-ID-ctx: 
    Master-Key: 
    Start Time: 1677549075
    Timeout   : 7200 (sec)
    Verify return code: 0 (ok)

I believe this is saying there was an SSL handshake failure, SSL on Cloudlfare is set to full, how could I further troubleshoot this? Do I need to manually install an SSL Certificate?

On my cloudlfare dashboard the SSL Certficate under Edge certificates is active and valid, I thought there was nothing else I needed to do but for some reason the SSL handshake is failing and I can't figure out why.

After tons of research, i'm starting to think I need to obtain a seperate SSL certificate then configure my config.toml file in my .streamlit folder to use the new SSL key. Is this true? Even if cloudflare already has an active SSL?

And if I do have to install the SSL, I have to do this manually every single time it expires? Isn't there supposed to be an automatic solution?

Solution

  • Tldr; Disable Cloudflare Proxy on all A and AAAA records of the host.

    Hi @AVGVSTVS, I had a similar issue an hour back which brought me to this thread, I'm deploying Streamlit from Google Cloud Run via a docker container, and the public IP generated by Cloud run works as expected, but using a custom domain just showed an empty page. This is the exact same behavior as you see with Streamlit Cloud. Like you I too had all the Cloudflare security settings enabled, full SSL, TLS, auto HTTPs rewrite on etc.

    However the issue for me was the orange cloud (Cloudflare proxying), which you can disable from your DNS settings on Cloudflare as described in the link.

    Turning off the proxy solved it for me instantly, do let me know if it works with Streamlit Cloud as well. Don't forget to do a hard reload to make sure all page resources are fetched again.