Iframe Component is Blank on Streamlit Cloud Deploy

I am having trouble getting an iframe to display correctly on my private Streamlit Cloud deployed app.

I am trying to embed a Metabase dashboard inside my Streamlit app. Locally, the iframe works just fine (pictured).

The example iframe from the Streamlit docs is loading in my Streamlit Cloud deployed app, but not my Metabase iframe.

Here is the code used to display my iframe (I made replicated this scenario with dummy data so you can test the code) and my Streamlit version

streamlit==1.10.0

import streamlit.components.v1 as components
import streamlit as st
st.write("Streamlit Docs Example iframe")
components.iframe("https://docs.streamlit.io/en/latest")
st.write("different iframe test")
components.iframe(src="http://smb-analytics-metabase.herokuapp.com/public/dashboard/afefddda-d5d4-43ed-83fd-307eab7ded3c", width=1285, height=1000, scrolling=True)

I have tried:

  • Chrome and Brave browsers
  • Using components.html() inplace of components.iframe()
  • Removing the width=1285, height=1000, scrolling=True arguements of components.iframe()
  • Rebooting my Streamlit Cloud App
  • Deleting and Rebuilding my Streamlit Cloud App

None of these things got the iframe to load on the deployed app. Anyone know of a fix ?

Locally

Streamlit Cloud

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

Thank you so much @randyzwitch !

I had tried checking the logs under “Manage App”, but didn’t see that error message. Did I just miss it ?

It’s in the browser developer tools…usually when you right-click, it gives you the option like “Inspect this element”, which will then show you all sorts of stuff about the current page. For example, here’s the Chrome version:

Best,
Randy

Ah, I should have checked that.

Thanks a million !

1 Like