Iframe Component is Blank on Streamlit Cloud Deploy

Answered via Discord, but for readers here:

When having issues on Streamlit Cloud, it is good to check the console. In this case, the issue is having a URL starting with http instead of https, leading to the following error in the browser console:

Mixed Content: The page at https://randyzwitch-metabase-streamlit-app-0yyn12.streamlitapp.com/ was loaded over HTTPS, but requested an insecure frame http://smb-analytics-metabase.herokuapp.com/public/dashboard/afefddda-d5d4-43ed-83fd-307eab7ded3c. This request has been blocked; the content must be served over HTTPS.

Because Streamlit Cloud is https by default, all embedded content must also be the same. This is in contrast to developing on localhost, which is http (unless you are savvy enough to set up SSL on your local computer, and if so, you probably already understand the issues :stuck_out_tongue_winking_eye: )

Best,
Randy

3 Likes